Home / Questions / 88419
Accepted
dddenis
Asked: 2020-07-21 11:39:47 +0800 CST 2020-07-21 11:39:47 +0800 CST

What exactly is the /deep/ selector in CSS?

  • 772

I have been researching about the selector /deep/, because I had to modify the styles of an input from the google material design library forcibly with that selector.

I have found that it is used to encapsulate the styles of a component so that they do not go outside the page, but I cannot find a clear example to finish understanding it correctly.

  1. What is it /deep/?

  2. What is it used for?

  3. Issues? Ex: compatibility.

css

2 Answers

  1. Best Answer

    HTML5 web components offer full encapsulation of CSS styles.

    This means that:

    • Styles defined within a component cannot break out and affect the rest of the page
    • Styles defined at the page level do not override the component's own styles

    However, it is sometimes desired to have page-level rules to manipulate the display of component elements defined within their shadow DOM. To do this, it is added /deep/to the CSS selector.

    /deep/is therefore a combinator.

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

    Perhaps the w3.org doc, in section 3.2.4, will help to understand it:

    3.2.4 Shadow selection: the /deep/ combinator

    When a combinator is found /deep/in a selector, replace all elements of the selectors match list with each element accessible from the original element by traversing any number of child lists or shadow trees.

    For example, suppose we have a component with a shadow tree like the following:

    <x-foo>
    <"shadow tree">
      <div>
        <span id="not-top">...</span>
      </div>
      <span id="top">...</span>
      <x-bar>
        <"shadow tree">
          <span id="nested">...</span>
        </>
      </x-bar>
    </>
  </x-foo>

    For a style sheet in the external document, the selector x-foo/deep/spanselects all three elements: #top, # not-topand #nested.

    Problem:

    This is basically a super-descending combinator. If the descendant combiner had an actual glyph, it would be potentially interesting to just duplicate it. Maybe we can give the descendant combinator a pseudonym of >>, since it is a super-child combinator? So /deep/it could be written>>>

    Compatibility

    The combinator deephas been declared deprecated in some libraries like Polymer or Angular ( see official page and also this question on SO ), the same as in Chrome .

    It is a subject that requires more depth, since it will depend on the libraries that you are using.

    These links might help you form a judgment on compatibility:

    • 8

  2. First you have to know what shadow DOM is : basically it is a DOM within another DOM, similar to a DOM iframebut as part of the same document. The shadow DOM has its own styles that do not affect the main DOM , and styles from the main DOM do not affect the shadow DOM .

    In order to apply styles from the main DOM to the shadow DOM , the selector /deep/that traverses that encapsulation is used. In the latest drafts it no longer appears /deep/but instead >>>: https://drafts.csswg.org/css-scoping-1/#deep-combinator .

    Shadow DOM browser support is still quite limited, only Chrome and Opera support it, Safari partially.

    One way to see how shadow DOM works is using the Chrome developer tools, in the options the option is activated Show user agent shadow DOMand if you inspect elements like <video<, <audio>and some other you can see how the browser builds an encapsulated DOM inside the element:

    enter image description here

    • 4