I've just spent several hours trying to figure out why I couldn't apply a theme to my components with cross scope styling with css variable.
The documentation at: https://www.polymer-project.org/1.0/docs/devguide/styling.html outlines the basics and I followed it to the letter. It just wasn't working. The sample code shows the class definitions using css variables, like so:
<style>
.title {
color: var(--my-toolbar-title-color);
}
</style>
and
<style>
.title{
--my-toolbar-title-color: green;
}
</style>
and I followed this syntax, it wasn't until I stumbled upon the API reference (http://polymer.github.io/polymer/) which showed the following syntax:
<style is="custom-style">
.title{
--my-toolbar-title-color: green;
}
</style>
Then everything magically worked!
Could I recommend the docs be updated with the requirement for <style is="custom-style"> for css variables shim to work?
I've just spent several hours trying to figure out why I couldn't apply a theme to my components with cross scope styling with css variable.
The documentation at: https://www.polymer-project.org/1.0/docs/devguide/styling.html outlines the basics and I followed it to the letter. It just wasn't working. The sample code shows the class definitions using css variables, like so:
and
and I followed this syntax, it wasn't until I stumbled upon the API reference (http://polymer.github.io/polymer/) which showed the following syntax:
Then everything magically worked!
Could I recommend the docs be updated with the requirement for <style is="custom-style"> for css variables shim to work?