In Chrome 34, styles defined in the header with a <style> tag will affect elements within the Shadow DOM of a Polymer element. In Chrome 36, this isn't the case.

I can move all of our styles directly into the element's template, but sometimes our css selectors bridge the Shadow DOM gap. e.g.:

.something-outside .something-inside { ... }
.something-outside.foo .something-inside { ... }

The latter case is more difficult since it needs information about two scopes.

What's the correct way to deal with this? Is there a feature of Polymer that will let global styles through?

Hilariously, I can't add any images or more than 2 links without 10 stackoverflow reputation points (whee), so the best I can offer is this jsbin:

In Chrome 34, styles defined in the header with a <style> tag will affect elements within the Shadow DOM of a Polymer element. In Chrome 36, this isn't the case.

I can move all of our styles directly into the element's template, but sometimes our css selectors bridge the Shadow DOM gap. e.g.:

.something-outside .something-inside { ... }
.something-outside.foo .something-inside { ... }

The latter case is more difficult since it needs information about two scopes.

What's the correct way to deal with this? Is there a feature of Polymer that will let global styles through?

Hilariously, I can't add any images or more than 2 links without 10 stackoverflow reputation points (whee), so the best I can offer is this jsbin:

http://jsbin./vobowigi/1/edit

• javascript
• css
• polymer

Share Improve this question Follow asked Apr 22, 2014 at 22:10 secretrobotronsecretrobotron 5511 silver badge33 bronze badges

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 6

What you're seeing is the difference between the polyfill and native Shadow DOM. The selectors that applied before no longer target elements in the SD.

To styles elements from outside the SD, there's the /deep/ binator and ::shadow pseudo element. For example, to style all h1s red, no matter what tree they appear in use:

body /deep / h1 {
  color: red;
}

These two articles contain all the details for SD styling stuff:

• http://www.polymer-project/articles/styling-elements.html
• http://www.polymer-project/docs/polymer/styling.html

If, like me, you were looking for a way to centrally style mon elements throughout your site and not just reach into one shadow DOM, a strategy I figured out is to use a global stylesheet as a separate file and include it in the templates of all your custom elements. This way you're not repeating styles or tediously referencing nested levels of elements, but you can still take advantage of style scoping.

My answer might be a bit late, but i had a similar problem. But the issue only arose after i had changed from shady DOM to shadow DOM. If you use shadow DOM, then you need to include the styles as is described here:

https://www.polymer-project/1.0/docs/devguide/styling#style-modules

E.g. you would do this:

<!-- shared-styles.html -->
<dom-module id="shared-styles">
  <template>
    <style>
      .red { color: red; }
    </style>
  </template>
</dom-module>

and then include it in your elements like so:

<style include="shared-styles">
  :host { display: block; }
</style>

I hope this helps someone.