Стили и селекторы

Стилизация Shadow DOM покрывается более общей спецификацией «CSS Scoping».

По умолчанию стили внутри Shadow DOM относятся только к его содержимому.

Например:

<p>Жили мы тихо-мирно, и тут...</p>

<p id="elem">Доброе утро, страна!</p>

<template id="tmpl">
  <style>
    p {
      color: red;
    }
  </style>
  <h3><content></content></h3>
  <p>Привет из подполья!</p>
</template>

<script>
  var root = elem.createShadowRoot();
  root.appendChild(tmpl.content.cloneNode(true));
</script>

При запуске окрашенным в красный цвет окажется только <p> внутри Shadow DOM. Обратим внимание, окрасился именно тот элемент, который находится непосредственно в Shadow DOM. А элементы, которые отображены в Shadow DOM при помощи <content>, этот стиль не получили – у них есть свои, заданные на внешней странице.

Внешний стиль для Shadow DOM

Граница между Shadow DOM и основным DOM, хоть и существует, но при помощи специальных селекторов её можно переходить.

Если нужно с основной страницы стилизовать или выбрать элементы внутри Shadow DOM, то можно использовать селекторы:

• ::shadow – выбирает корень Shadow DOM.

  Выбранный элемент сам по себе не создаёт CSS box, но служит отправной точкой для дальнейшей выборки уже внутри дерева Shadow DOM.

  Например, #elem::shadow > div найдёт внутри Shadow DOM #elem элементы div первого уровня.

• >>> – особого вида CSS-селектор для всех элементов Shadow DOM, который полностью игнорирует границы между DOM’ами, включая вложенные подэлементы, у которых тоже может быть свой Shadow DOM.

  Например, #elem >>> span найдёт все span внутри Shadow DOM #elem, но кроме того, если в #elem есть подэлементы, у которых свой Shadow DOM, то оно продолжит поиск в них.

  Вот пример, когда внутри одного Shadow DOM есть <input type="date">, у которого тоже есть Shadow DOM:

  <style>
    #elem::shadow span {
      /* для span только внутри Shadow DOM #elem */
  
      border-bottom: 1px dashed blue;
    }
  
    #elem >>> * {
      /* для всех элементов внутри Shadow DOM #elem и далее внутри input[type=date] */
  
      color: red;
    }
  </style>
  
  <p id="elem"></p>
  
  <script>
    var root = elem.createShadowRoot();
    root.innerHTML = "<span>Текущее время:</span> <input type='date'>";
  </script>

• Кроме того, на Shadow DOM действует обычное CSS-наследование, если свойство поддерживает его по умолчанию.

  Ð’ этом примере CSS-стили для body наследуются на внутренние элементы, включая Shadow DOM:

  <style>
    body {
      color: red;
      font-style: italic;
    }
  </style>
  <p id="elem"></p>
  <script>
    elem.createShadowRoot().innerHTML = "<span>Привет, мир!</span>";
  </script>

  Внутренний элемент станет красным курсивом.

<p id="elem"></p>

<script>
  var root = elem.createShadowRoot();
  root.innerHTML = "<span>Текущее время:</span> <input type='date'>";

  // выберет только span из #elem
  // вообще-то, должен выбрать span и из вложенных Shadow DOM,
  // но для встроенных элементов - не умеет
  alert( document.querySelectorAll('#elem::shadow span').length ); // 1
</script>

Стиль в зависимости от хозяина

Следующие селекторы позволяют изнутри Shadow DOM выбрать внешний элемент («элемент-хозяин»):

• :host выбирает элемент-хозяин, в котором, живёт Shadow DOM.

  Хозяин :host выбирается именно в контексте Shadow DOM.

  То есть, это доступ не к внешнему элементу, а, скорее, к корню текущего Shadow DOM.

  После :host мы можем указать селекторы и стили, которые нужно применить, если хозяин удовлетворяет тому или иному условию, например:

  <style>
    :host > p {
      color: green;
    }
  </style>

  Этот селектор сработает для <p> первого уровня внутри Shadow DOM.

• :host(селектор хозяина) выбирает элемент-хозяин, если он подходит под селектор.

  Этот селектор используется для темизации хозяина «изнутри», в зависимости от его классов и атрибутов. Он отлично добавляет просто :host, например:

  :host p {
    color: green;
  }
  
  :host(.important) p {
    color: red;
  }

  Здесь параграфы будут иметь color:green, но если у хозяина класс .important, то color:red.

• :host-context(селектор хозяина) выбирает элемент-хозяин, если какой-либо из его родителей удовлетворяет селектору, например:

  :host-context(h1) p {
    /* селектор сработает для p, если хозяин находится внутри h1 */
  }

  Это используется для расширенной темизации, теперь уже не только в зависимости от его атрибутов, но и от того, внутри каких элементов он находится.

Пример использования селектора :host() для разной расцветки Shadow DOM-сообщения, в зависимости от того, в каком оно <p>:

<p class="message info">Доброе утро, страна!</p>

<p class="message warning">Внимание-внимание! Говорит информбюро!</p>

<template id="tmpl">
  <style>
  .content {
    min-height: 20px;
    padding: 19px;
    margin-bottom: 20px;
    background-color: #f5f5f5;
    border: 1px solid #e3e3e3;
    border-radius: 4px;
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, .05);
  }

  :host(.info) .content {
    color: green;
  }

  :host(.warning) .content {
    color: red;
  }

  </style>
  <div class="content"><content></content></div>
</template>

<script>
var elems = document.querySelectorAll('p.message');

elems[0].createShadowRoot().appendChild( tmpl.content.cloneNode(true) );
elems[1].createShadowRoot().appendChild( tmpl.content.cloneNode(true) );
</script>

Стиль для content

Тег <content> не меняет DOM, а указывает, что где показывать. Поэтому если элемент изначально находится в элементе-хозяине – внешний документ сохраняет к нему доступ.

К нему будут применены стили и сработают селекторы, всё как обычно.

Например, здесь применится стиль для <span>:

<style>
  span { text-decoration: underline; }
</style>

<p id="elem"><span>Доброе утро, страна!</span></p>

<template id="tmpl">
  <h3><content></content></h3>
  <p>Привет из подполья!</p>
</template>

<script>
  elem.createShadowRoot().appendChild( tmpl.content.cloneNode(true) );
</script>

Ð’ примере выше заголовок «Доброе утро, страна!», который пришёл как <span> из внешнего документа, будет подчёркнут,

Итак, стили основного DOM-дерева применяются, всё в порядке.

Но что, если Shadow DOM тоже «имеет виды» на <content> и хочет стилизовать вставленное? Это тоже возможно.

Для обращения к «содержимому» <content> из стилей внутри Shadow DOM используется псевдоэлемент ::content.

Например, изнутри Shadow DOM селектор content[select="h1"]::content span найдёт элемент <content select="h1"> и в его содержимом отыщет <span>.

Ð’ примере ниже селектор ::content span стилизует все <span> внутри всех <content>:

<style>
  span { text-decoration: underline; }
</style>

<p id="elem"><span>Доброе утро, страна!</span></p>

<template id="tmpl">
  <style>
    ::content span { color: green; }
  </style>
  <h3><content></content></h3>
  <span>Привет из подполья!</span>
</template>

<script>
  elem.createShadowRoot().appendChild( tmpl.content.cloneNode(true) );
</script>

Текст внутри <h3> – зелёный и подчёркнутый одновременно, но стилизуется именно тот <span>, который показан в <content>, а тот, который просто в Shadow DOM – нет.

Приоритет селекторов рассчитывается по обычным правилам специфичности, если же приоритеты стилей на странице и в Shadow DOM равны, то, как описано в секции Cascading, побеждает страница, а для !important-стиля побеждает Shadow DOM.

Итого

По умолчанию стили и селекторы из DOM-дерева действуют только на те элементы, в которых сами находятся.

Границу можно преодолевать, причём проще, естественно, от родителя к Shadow DOM, чем наоборот:

• Снаружи можно выбирать и стилизовать элементы внутри Shadow DOM – при помощи селекторов ::shadow и >>>.
• Изнутри Shadow DOM можно стилизовать не только то, что изначально в Shadow DOM, но и узлы, показываемые в <content>.
• Также можно ставить стиль в зависимость от хозяина при помощи селекторов ::host, ::host-context, но выбирать и стилизовать произвольные теги внутри хозяина нельзя.