What exactly is the / deep / selector in CSS?

Question:

I have been investigating about the /deep/ selector, because I have had to modify the styles of an input from google's 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 appear outside the page, but I cannot find a clear example to understand it correctly.

What is /deep/ ?
What is it used for?
Problems? Ex: compatibility.

Answer:

HTML5 web components offer full encapsulation of CSS styles.

This means that:

Styles defined within a component cannot be pulled out and affect 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 your DOM shadow. To do this, /deep/ is added to the CSS selector.

/deep/ is therefore a combiner.

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

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

3.2.4 Shadow selection: the / deep / combiner

When a /deep/ combiner is found in a selector, replace all items in the selector match list with each item accessible from the original item 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 stylesheet in the external document, the selector x-foo/deep/span selects all three elements: #top , # not-top and #nested .

Trouble:

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

Compatibility

The deep combiner has been declared deprecated in some libraries such as Polymer or Angular ( see official page and also this question in SO ), the same as in Chrome .

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

These links could help you form a judgment about compatibility:

Post Views: 0