Styling local DOM

[ebidel]

From @Scratch2k on June 12, 2015 0:4

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?

Copied from original issue: Polymer/polymer#1842

[ebidel]

Hey @Scratch2k, the relevant section on that page is Custom element for document styling (custom-style, although it's pretty far down on that doc. The idea is that within and element, polymer takes care of shimming styles in <style>. Outside, you need to tell Polymer what styles to shim using <style is="custom-style">.

[Scratch2k]

I see it now, thanks for taking the time to reply Eric.