Пользовательский Shadow DOM
📅
От встроенного Shadow DOM к стандарту
До этого мы говорили о встроенном shadow DOM. Исторически так сложилось, что браузеры использовали его для реализации своих собственных элементов. Позже эта технология была стандартизирована и стала доступна нам, веб-разработчикам.
Современный стандарт Shadow DOM — это именно то, что позволяет создавать свои собственные компоненты с таким же уровнем инкапсуляции, как у встроенного <select> или <video>.
Между встроенном Shadow DOM и тем, который мы будем создавать сами, есть некоторые различия. Давайте их сразу обозначим, чтобы четко понимать концепцию пользовательского Shadow Dom.
| Критерий | Встроенный Shadow DOM | Пользовательский Shadow DOM |
|---|---|---|
| Создание | Автоматически создается браузером для встроенных элементов (<select>, <video> и т.д.). |
Создается вручную разработчиком. |
| Доступ | Закрыт (Closed). Недоступен для JavaScript извне. | Может быть, как Открыт (Open) так и Закрыт (Closed), на усмотрение разработчика. |
| Стилизация | Очень ограничена. Стилизация возможна только через стандартные CSS-свойства, применяемые к самому элементу (например, color, font-size у <select>). |
Полностью контролируется разработчиком. Используются стандартные CSS-правила внутри Shadow DOM. |
| Структура | Определяется браузером, неподконтрольна разработчику и может различаться в разных браузерах. | Полностью определяется и контролируется разработчиком. |
Проще говоря, у нас теперь есть браузерная технология, которая позволяет создать свой собственный нативный select. И мы, наконец, сможем сами решать, давать возможность раскрашивать эту долбаную самую стрелочку или нет (кто пытался поменять стили у селекта, тот поймет)! Звучит здорово? Тогда поехали!
##Теневое дерево Итак, у любого элемента могут быть два набора дочерних элементов:
- Стандартные (Light DOM): те, что прописаны в HTML-коде.
- Скрытые (Shadow DOM): те, что создаются программно и изолированы от основного DOM.
При одновременном наличии обоих деревьев браузер рендерит исключительно Shadow DOM. Кстати, можно сделать, чтобы нужное содержимое из светлого дерева отображалось в темном, но об этом поговорим дальше, в разделе "Слоты".
Создавать светлые деревья мы умеем, мы просто не знали до сих пор, что они светлые:
<div class="user-card">
<h3>Привет</h3>
<p>Я светлое дерево</p>
</div>
В примере выше карточка пользователя имеет светлое дерево.
Для создания теневого дерева нужно приложить чуть побольше усилий. Существует два подхода: при помощи javascript(императивный) и непосредственно в html (декларативный). Такое положение дел можно сравнить с анимацией: можно сделать просто и быстро при помощи css, но с меньшими возможностями, а можно подключить js для полного контроля.
Начнем с императивного подхода. Во-первых, он появился гораздо раньше, во-вторых, он даст наиболее полную картину. Итак, давайте создадим разметку с теневым деревом.