Share CSS styles across web components

问题

I am using mozilla - X-tabs, web components in my application for tabbing it. Now, i need to use bootstrap - glyphicons in my app. But since webcomponents use shadow-DOM, bootstrap css styles are not applied inside web components?

Is there a way around it, to share a css file/style for all web components?

回答1:

You possibly want to read CSS Scoping Model by W3C.

Each polyfill library (I’m sure, e.g., Mozilla’s does) provides handlers for /deep/, ::content etc selectors.

Hope it helps.

回答2:

We faced a similar scenario with font-awesome. We had a bunch of classes that are common across web components. We loaded them directly from the host and made those classes available to components using /deep/ combinator (soon going to be replaced with >>> syntax)

The polyfill (Webcomponents.js - from Polymer) used by X-tags has support for /deep/ and ::shadow (single level). You can use these selectors to target shadow DOM from outside.

回答3:

Polymer provides an element core-style for this, see here.

This blog post goes through how to set it up, you use the same tag to declare the common styles and to import them.

<core-style id="button">
  button {
    display: inline-block;
    background: #bada55;
  }
</core-style>

The presence of an id makes this element a producer of common styles.

Then to import the common styles inside the shadow dom of a component:

<core-style ref="button"></core-style>

The ref attribute makes this a style consumer.

So AFIK its not possible in a standard way yet with plain web components, but there's the core-style extension in Polymer, or the Polymer support for ::shadow and /deep/selectors.

来源：https://stackoverflow.com/questions/29181739/share-css-styles-across-web-components

标签

css

twitter-bootstrap

mozilla

web-component