Ответ 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.