Styling local DOM

[Scratch2k]

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?

[ebidel]

This issue was moved to Polymer/old-docs-site#1185