Что означает /deep/and:: shadow в селекторе CSS?

При взгляде на Polymer я вижу следующий селектор CSS на вкладке "Стили" инструментов разработчика Chrome 37:

Я также видел селектор с псевдоселектором ::shadow.

Итак, что означают /deep/ и ::shadow в селекторе CSS?

Ответ 1

Как отмечает Joel H. в комментариях, Chrome с тех пор не одобряет комбинатор /deep/, и он дает синтаксическую ошибку в IE.

Веб-компоненты HTML5 предлагают полную инкапсуляцию стилей CSS.

Это означает, что:

стили, определенные внутри компонента, не могут просачиваться и влиять на остальную часть страницы.
определенные на уровне страницы, не изменяют собственные стили компонента

Однако иногда вы хотите иметь правила уровня страницы, чтобы манипулировать представлением компонентов элементов, определенных в их теневой DOM. Для этого вы добавляете /deep/ в селектор CSS.

Итак, в показанном примере html /deep/ [self-end] выбирает все элементы под элементом html (верхнего уровня), которые имеют атрибут self-end, в том числе те, которые скрыты в корнях теневых DOM-узлов веб-компонентов.

Если требуется, чтобы выбранный элемент находился в теневом корне, вы можете использовать псевдо-селектор ::shadow в его родительском элементе.

Рассмотрим:

<div>
  <span>Outer</span>
  #shadow-root
  <my-component>
    <span>Inner</span>
  </my-component>
</div>

Селектор html /deep/ span выберет оба элемента <span>.

Селектор ::shadow span выберет только внутренний элемент <span>.

Подробнее об этом читайте в спецификации W3C CSS Scoping Module.