What do /deep/ and ::shadow mean in a CSS selector?

前端

http://stackoverflow.com/a/25609679

HTML5 Web Components offer full encapsulation of CSS styles.

This means that:

  • styles defined within a component cannot leak out and effect the rest of the page
  • styles defined at the page level do not modify the component’s own styles

However sometimes you want to have page-level rules to manipulate the presentation of component elements defined within their shadow DOM. In order to do this, you add /deep/ to the CSS selector.

So in the example shown, html /deep/ [self-end] is selecting all elements under the html (top level) element that have the self-end attribute, including those buried inside web components’ shadow DOMs roots.

If you require a selected element to live within a shadow root, then you can use the ::shadow pseudo selector on it’s parent element.

Consider:

 Outer #shadow-root  Inner

The selector html /deep/ span will select both elements.

The selector ::shadow span will select only the inner element.

Read more about this in the W3C’s CSS Scoping Module specification.