CODEWITHSUNDEEP
javascriptcsspolymer
secretrobotron
secretrobotron

Reputation: 55

Global styles not applied to Shadow DOM children in Polymer elements in Chrome 36

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.com/vobowigi/1/edit

Upvotes: 3

Views: 3780

Answers (3)

eitch
eitch

Reputation: 317

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.org/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.

Upvotes: 1

Brandon
Brandon

Reputation: 238

If, like me, you were looking for a way to centrally style common 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.

Upvotes: 1

ebidel
ebidel

Reputation: 24109

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/ combinator 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:

Upvotes: 6

Related Questions