- From: Alexis Córdova via GitHub <sysbot+gh@w3.org>
- Date: Thu, 04 Apr 2019 17:46:11 +0000
- To: public-css-archive@w3.org
Hey all, @stefsullrew asked me to reply on her behalf. Essentially what we're looking for is having `getComputedStyle` provide all the CSS custom properties that are declared on an element (or, in our case, a Web Component). Currently, Safari and Firefox support this while the latest Chrome does not. Here's a test case: https://codepen.io/acordova/pen/wOLzyP If you view the above link in the supported browsers, you should see on the right-hand side a list of the component's declared custom properties with their values in an input. If you update the values in the input, it updates the component on the left-hand side. In Chrome, however, because it doesn't provide any properties that contain `--`, the right-hand side is empty. For this playground, we're assuming we _don't_ know the names of the properties contained within a component; `getPropertyValue()` and `setProperty()` absolutely work in all browsers, but it's seemingly only useful if you already know the name of the property, which in our case we wouldn't. Being able to grab the custom property names from `getComputedStyle` would allow us to build a theming playground like this without manually having to update the property names for every component; in [SLDS](https://www.lightningdesignsystem.com/components/overview/) we currently have 84 components with 165 variants 😅. If there's another way of accomplishing this, or if this is not the correct venue for this kind of change, or if anything needs further explanation, please do let me know. Thank you! -- GitHub Notification of comment by alexiscordova Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/1316#issuecomment-479996589 using your GitHub account
Received on Thursday, 4 April 2019 17:46:16 UTC