Skip to content

Styling local DOM #1842

Description

@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?

Activity

  1. ebidel commented on Jun 12, 2015

    @ebidel
    Contributor

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

      Milestone

      No milestone

      Relationships

      None yet

      Development

      No branches or pull requests

      Issue actions