CODEWITHSUNDEEP
csspolymer
Bassdrop Cumberwubwubwub
Bassdrop Cumberwubwubwub

Reputation: 832

Polymer deep CSS

I am building a Polymer Single Page Interface with a lot of custom elements.

Now I want my elements to have some sort of master style, which I can define in the index.html or my main content element. Think of it like this:

index.html

<style>
    .classWhichWillBeUsedInCustomElements {
        mainColor: #e0e0e0;
    }
</style>

or

<script>
    mainColor = "#e0e0e0";
</script>

my-cool-element.html

<polymer-element name="my-cool-element">
    <template>
        <paper-button style="color: {{mainColor}}"></paper-button>
    </template>
</polymer-element>

or

<polymer-element name="my-cool-element">
    <template>
        <style>
            .coolButton {
                width: 300px;
                color: {{mainColor}};
            }
        </style>
        <paper-button class="coolButton"></paper-button>
    </template>
</polymer-element>

Except that this doesn't work.

I have tried:

What is the right way to achieve this? I am trying to avoid using Less

Upvotes: 1

Views: 750

Answers (1)

Vlad Stirbu
Vlad Stirbu

Reputation: 1792

Use the following pattern in the index.html or a global stylesheet:

<style>
    body /deep/ .classWhichWillBeUsedInCustomElements {
        mainColor: #e0e0e0;
    }
</style>

Then you could use the class within the custom element. The global style will punch the shadow boundary. You could replace body with any other element or selector under which you want to punch the shadow dom boundary.

More on deep here: https://www.polymer-project.org/0.5/articles/styling-elements.html#cat

Upvotes: 0

Related Questions