全局样式未应用于Chrome 36中Polymer元素中的Shadow DOM子项

Question

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. eg:

.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

Answer 1

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 h1 s 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.org/articles/styling-elements.html
• http://www.polymer-project.org/docs/polymer/styling.html

Answer 2

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.

Answer 3

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

Eg 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.