jeena/en.javascript.info
1
0
Fork 0
Code Issues Pull requests Projects Packages Wiki Activity Actions
en.javascript.info/3-more/1-webcomponents/3-shadow-dom/article.md
Ilya Kantor 35081a779a renovations
2015-02-21 14:58:02 +03:00

26 KiB
Raw Blame History

Shadow DOM, шаблоны и стили

Спецификация Shadow DOM является отдельным стандартом. Частично он уже используется для обычных DOM-элементов, но также применяется для создания веб-компонентов.

Shadow DOM -- это внутренний DOM элемента, который существует отдельно от внешнего документа. В нём могут быть свои ID, свои стили и так далее. Причём снаружи его, без применения специальных техник, не видно, поэтому не возникает конфликтов. [cut]

Внутри браузера

Концепция Shadow DOM начала применяться довольно давно внутри самих браузеров. Когда браузер показывает сложные элементы управления, наподобие слайдера <input type="range"> или календаря <input type="date"> -- внутри себя он конструирует их из самых обычных стилизованных <div>, <span> и так далее.

С первого взгляда они незаметны, но если в настройках Chrome Development Tools выбрать показ Shadow DOM, то их можно легко увидеть.

Например, вот такое содержимое будет у <input type="date">:

То, что находится под #shadow-root -- это и есть Shadow DOM.

Получить элементы из Shadow DOM можно только при помощи специальных JavaScript-вызовов или селекторов. Это не обычные дети, а намного более мощное средство отделения содержимого.

В Shadow DOM выше можно увидеть полезный атрибут pseudo. Он нестандартный, существует по историческим причинам. С его помощью можно стилизовать подэлементы через CSS, например, сделаем поле редактирования даты красным:

<!--+ run -->
<style>
*!*
input::-webkit-datetime-edit {
*/!*
  background: red;
}
</style>

<input type="date">

Ещё раз заметим, что pseudo -- нестандартный атрибут. Если говорить хронологически, то сначала браузеры начали экспериментировать внутри себя с инкапсуляцией внутренних DOM-структур, а уже потом, через некоторое время, появился стандарт Shadow DOM, который позволяет делать то же самое разработчикам.

Далее мы рассмотрим работу с Shadow DOM из JavaScript, по стандарту Shadow DOM.

Создание Shadow DOM

Shadow DOM можно создать внутри любого элемента вызовом elem.createShadowRoot().

Например:

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

<script>
  var root = elem.createShadowRoot();
  root.innerHTML = "<p>Привет из подполья!</p>";
</script>

Если вы запустите этот пример, то увидите, что изначальное содержимое элемента куда-то исчезло и показывается только "Привет из подполья!". Это потому, что у элемента есть Shadow DOM.

С момента создания Shadow DOM обычное содержимое (дети) элемента не отображается, а показывается только Shadow DOM.

Внутрь этого Shadow DOM, при желании, можно поместить обычное содержимое. Для этого нужно указать, куда. В Shadow DOM это делается через "точку вставки" (insertion point). Она объявляется при помощи тега <content>, например:

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

<script>
  var root = elem.createShadowRoot();
  root.innerHTML = "<h3>*!*<content></content>*/!*</h3> <p>Привет из подполья!</p>";
</script>

Теперь вы увидите две строчки: "Доброе утро, страна!" в заголовке, а затем "Привет из подполья".

Shadow DOM примера выше в инструментах разработки:

Важные детали:

  • Тег `` влияет только на отображение, он не перемещает узлы физически. Как видно из картинки выше, текстовый узел "Доброе утро, страна!" остался внутри `p#elem`. Его можно даже получить при помощи `elem.firstElementChild`.
  • Внутри `` показывается не элемент целиком `

    `, а его содержимое, то есть в данном случае текст "Доброе утро, страна!".

В <content> атрибутом select можно указать конкретный селектор содержимого, которое нужно переносить. Например, <content select="h3"></content> перенесёт только заголовки.

Внутри Shadow DOM можно использовать <content> много раз с разными значениями select, указывая таким образом, где конкретно какие части исходного содержимого разместить. Но при этом дублирование узлов невозможно. Если узел показан в одном <content>, то в следующем он будет пропущен.

Например, если сначала идёт <content select="h3.title">, а затем <content select="h3">, то в первом <content> будут показаны заголовки <h3> с классом title, а во втором -- все остальные, кроме уже показанных.

В примере выше тег <content></content> внутри пуст. Если в нём указать содержимое, то оно будет показано только в том случае, если узлов для вставки нет. Например потому что ни один узел не подпал под указанный select, или все они уже отображены другими, более ранними <content>.

Например:

<!--+ run autorun -->
  
<section id="elem">
  <h1>Новости</h1>
  <article>Жили-были <i>старик со старухой</i>, но недавно...</article>
</section>

<script>
  var root = elem.createShadowRoot();

  root.innerHTML = "<content select='h1'></content> \
   <content select='.author'>Без автора.</content> \
   <content></content>";
  
</script>

<button onclick="alert(root.innerHTML)">root.innerHTML</button>

При запуске мы увидим, что:

  • Первый `` выведет заголовок.
  • Второй `` вывел бы автора, но так как такого элемента нет -- выводится содержимое самого ``, то есть "Без автора".
  • Третий `` выведет остальное содержимое исходного элемента -- уже без заголовка `

    `, он выведен ранее!

Ещё раз обратим внимание, что <content> физически не перемещает узлы по DOM. Он только показывает, где их отображать, а также, как мы увидим далее, влияет на применение стилей.

Корень shadowRoot

После создания корень внутреннего DOM-дерева доступен как elem.shadowRoot.

Он представляет собой специальный объект, поддерживающий основные методы CSS-запросов и подробно описанный в стандарте как ShadowRoot.

Если нужно работать с содержимым в Shadow DOM, то нужно перейти к нему через elem.shadowRoot. Можно и создать новое Shadow DOM-дерево из JavaScript, например:

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

<script>
*!*
  // создать новое дерево Shadow DOM для elem
*/!*
  var root = elem.createShadowRoot();

  root.innerHTML = "<h3><content></content></h3> <p>Привет из подполья!</p> <hr>";
</script>

<script>
*!*
  // прочитать данные из Shadow DOM для elem
*/!*
  var root = elem.shadowRoot; 
  // Привет из подполья!
  document.write("<p>p:" + root.querySelector('p').innerHTML); 
  // пусто, так как физически узлы - вне content 
  document.write("<p>content:" + root.querySelector('content').innerHTML); 
</script>

[warn header="Внутрь встроенных элементов так "залезть" нельзя"] На момент написания статьи shadowRoot можно получить только для Shadow DOM, созданного описанным выше способом, но не встроенного, как в элементах типа <input type="date">. [/warn]

Шаблоны

Элемент <template> предназначен для хранения "образца" разметки, невидимого и предназначенного для вставки куда-либо.

Конечно, есть много способов записать произвольный невидимый текст в HTML. В чём же особенность <template>?

Его отличие от обычных тегов в том, что его содержимое обрабатывается особым образом. Оно не только показывается, но и считается находящимся вообще "вне документа".

Однако, вместе с тем, оно всё же обрабатывается браузером (а значит должно быть корректным HTML) и записывается как DocumentFragment в свойство тега content. Предполагается, что мы, при необходимости, возьмём content и вставим, куда надо.

Пример вставки шаблона tmpl в Shadow DOM элемента elem:

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

<template id="tmpl">
  <h3><content></content></h3> 
  <p>Привет из подполья!</p>
  <script> document.write('...document.write:Новость!'); </script>
</template>

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

У нас получилось, что:

  1. В элементе `#elem` содержатся данные в некоторой оговорённой разметке.
  2. Шаблон `#tmpl` указывает, как их отобразить, куда и в какие HTML-теги завернуть содержимое `#elem`.
  3. Это содержимое добавляется в Shadow DOM тега. Технически, шаблон можно использовать и без Shadow DOM, но тогда не сработает тег ``.

Важные детали:

  • В отличие от вставки через `innerHTML` и от обычного `DocumentFragment`, скрипт внутри шаблона выполнится при вставке. Содержимое шаблона изначально "вне документа" и "оживает", когда оно попадает в него. Это относится ко всему -- картинки начинают загружаться, видео -- проигрываться и т.п.
  • Мы вставляем не сам `tmpl.content`, а его клон. Это обычная практика, чтобы можно было использовать один шаблон много раз.

Стили

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

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

Например:

<!--+ run autorun -->
<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, то можно использовать селекторы:

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

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

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

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

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

    <!--+ run -->
<style>
##elem::shadow span {
  /* для span только внутри Shadow DOM #elem */
  text-decoration: underline;    
}

##elem /deep/ span {
  /* для span внутри 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:

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

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

[warn header="Нельзя получить содержимое встроенных элементов"] Описанные CSS-селекторы можно использовать не только в CSS, но и в querySelector.

Исключением являются встроенные элементы типа <input type="date">, для которых CSS-селекторы работают, но получить их содержимое нельзя.

Например:

<!--+ run -->
<p id="elem"></p>

<script>
  var root = elem.createShadowRoot();
  root.innerHTML = "<span>Текущее время:</span> <input type='date'>";
  
  // выберет только span из #elem
  // вообще-то, должен выбрать и span из вложенных Shadow DOM,
  // но в текущей браузерной реализации для встроенных элементов - не умеет
  alert(document.querySelector('#elem /deep/ span').length); // 1
</script>

[/warn]

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

Следующие селекторы позволяют выбрать элемент-хозяин:

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

    Например:

    :host(.important) { 
  /* сработает, если хозяин имеет класс important */
}

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

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

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

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

    <style> 
  :host p { color: green; } 
  :host(.important) p { color: red; } 
</style>

    Эти селекторы сработают для <p> внутри Shadow DOM, причём второй -- только если у хозяина стоит класс important.

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

    Например:

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

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

Пример использования селектора :host() для темизации содержимого:

<!--+ run autorun -->
*!*
<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> не меняет DOM, а указывает, что где показывать. Поэтому если элемент изначально находится в элементе-хозяине -- внешний документ сохраняет к нему доступ.

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

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

<!--+ run -->
<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> из внешнего документа, будет подчёркнут,

...Но, поскольку эти узлы показываются внутри Shadow DOM, то ему тоже может понадобится к ним доступ.

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

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

Селектор ::content подразумевает *::content, так что ::content span стилизует все <span> внутри всех <content>.

Например:

<!--+ run -->
<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> 
  <p>Привет из подполья!</p>
</template>

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

Если запустить пример выше, то текст внутри <h3> станет зелёным и подчёркнутым одновременно.

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

[summary] Если обобщить -- инкапсуляция Shadow DOM имеет односторонний характер:

  • Изнутри Shadow DOM можно стилизовать только сам Shadow DOM и узлы, показываемые в ``.
  • Со страницы можно иметь доступ и стилизовать элементы, изначально находящиеся внутри хозяина -- напрямую, а узлы внутри Shadow DOM -- при помощи селекторов `::shadow` и `/deep/`.
[/summary]

Итого

Shadow DOM -- это средство для создания отдельного DOM-дерева внутри элемента, которое не видно снаружи без применения специальных методов.

  • Ряд браузерных элементов со сложной структурой уже имеют Shadow DOM.
  • Можно создать Shadow DOM внутри любого элемента вызовом `elem.createShadowRoot()`. В дальнейшем его корень будет доступен как `elem.shadowRoot`.
  • Как только у элемента появляется Shadow DOM, его изначальное содержимое скрывается. Теперь показывается только Shadow DOM, который может указать, какое содержимое хозяина куда вставлять, при помощи элемента ``. Можно указать селектор `` и размещать разное содержимое в разных местах Shadow DOM.
  • Стили и `querySelector`, объявленные внутри Shadow DOM, по умолчанию относятся только к его содержимому, могут обращаться к содержимому ``, но не к основной странице.
  • Стили и `querySelector` с внешней страницы могут преодолевать границу между DOM при помощи селекторов `::shadow` и `/deep/`.

Спецификации, затрагивающие Shadow DOM: