Web components

Когда я приходил на конференцию и видел презентации на тему веб-компонентов, я всегда думал, что это довольно изящно, но с другой стороны добавляет сложности. Тысяча строк JavaScript, чтобы сохранить всего 4 строки HTML. Выступающий или неизбежно скрывал огромное количество JS кода, или погружался в сложные детали, и мои глаза тускнели, когда я думал о том, покрывают ли мои суточные выплаты закуски.

Однако в недавнем проекте, который создан для более легкого изучения HTML (Конечно, путем добавления зомби и глупых шуток), я решил, что необходимо описать каждый элемент HTML в спецификации. Не считая той конференции, я впервые начинал знакомство с <slot> и <template> элементами, и когда я захотел написать что-то интересное, мне пришлось углубиться в тему.

И в процессе углубления я понял: веб-компоненты проще, чем я думал.

Либо веб-компоненты прошли долгий путь развития с тех пор, как я поймал себя, мечтающим о закусках на конференции, либо позволил моему изначальному страху помешать по-настоящему узнать их, а возможно и то, и другое.

Я здесь, чтобы сказать вам: да, вы можете создать веб-компонент. Давайте оставим все отвлекающие факторы, страхи и даже закуски за дверью, чтобы сделать все вместе.

Начнем с <template>

<template> - это HTML элемент, позволяющий создать нам шаблон (HTML структуру для веб-компонентов).

<template>  <p>The Zombies are coming!</p></template>

Элемент <template> - очень важный, потому что позволяет держать все вместе. Это как база для вашего дома, база, с которой начинает строиться все, что мы называем готовым зданием. Давайте использовать этот небольшой фрагмент кода для нашего <apocalyptic-warning> компонента, который оповещает нас о наступлении зомби-апокалипсиса.

Тогда есть компонент <slot>

<slot> - это всего лишь другой HTML элемент, как и <template>. Но в нашем случае <slot> настраивает то, что <template> отображает на странице.

<template>  <p>The <slot>Zombies</slot> are coming!</p></template>

Здесь мы добавили слот с словом "Zombies" (Слово ли это?) в разметку <template>. Если мы ничего не делаем со слотом, по умолчанию он отображает контент между тегами. В нашем случае это будет "Zombies".

Использование <slot> похоже на placeholder. Мы можем использовать placeholder, тогда будет отображаться текст по умолчанию, или указать что-то другое с помощью атрибута name.

<template>  <p>The <slot name="whats-coming">Zombies</slot> are coming!</p></template>

name атрибут сообщает веб-компоненту о том, какое содержание должно быть отображено в <template>. Прямо сейчас у нас есть "whats-coming" слот. Мы предполагаем, что зомби придут первыми при наступлении зомби-апокалипсиса, но <slot> дает нам гибкость, чтобы вставить что-то еще, если окажется, что первыми придут роботы или оборотни.

Использование веб-компонента

Технически, мы закончили писать компонент и уже можем вставить в любое место, где захотим.

<apocalyptic-warning>  <span slot="whats-coming">Halitosis Laden Undead Minions</span></apocalyptic-warning><template>  <p>The <slot name="whats-coming">Zombies</slot> are coming!</p></template>

Видите, что мы делаем? Мы помещаем <apocalyptic-warning> компонент на страницу так же, как и любой другой HTML элемент. Однако мы добавили <span> в слот "whats-coming". <span> и его содержимое будет отображено на месте "Zombies", когда компонент отобразится.

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

Все еще со мной? Не так уж и страшно, не правда ли? Что ж, минус зомби. Нам еще надо будет немного поработать, чтобы сделать замену <slot>возможной, именно здесь мы начинаем

Регистрация компонента

Как я уже сказал ранее, вам нужно немного JavaScript кода, чтобы все это работало, но это не очень сложный, многострочный и глубокий код, как я всегда думал. Надеюсь, я смогу убедить вас.

Вам нужна функция-конструктор, которая регистрирует веб-компонент. Иначе наше компоненты будет как нежить: она есть, но не полностью живая.

Вот конструктор, который мы будем использовать.

// Определяем кастомный веб-компонент с подходящим именемcustomElements.define("apocalyptic-warning", class extends HTMLElement {    // Наследование обеспечивает, что мы имеет свойства и методы по умолчанию встроенного HTML    элемента    // Вызывается всякий раз, когда создаеся новый элемент    constructor() {      // Выываем родительский конструктор, т.е конструктор для HTMLElement. Таким образом   устанавливаются свойства базового HTML элемента.      super();      // Берет <template> и хранит его в переменной `warinng`      let warning = document.getElementById("warningtemplate");            // Хранит контент шаблона в переменной `mywarning`      let mywarning = warning.content;      const shadowRoot = this.attachShadow({mode: "open"}).appendChild(mywarning.cloneNode(true));    }});

Я оставил в коде подробные построчные комментарии, но не объяснил код на последней строке.

const shadowRoot = this.attachShadow({mode: "open"}).appendChild(mywarning.cloneNode(true));

Мы здесь делаем много работы. Во-первых, мы берем наш веб-компонент (this) и создаем скрытого шпиона, я имею в виду Shadow DOM.{ mode: open } означает, что JavaScript может извне :root обращаться к элементам Shadow DOM и управлять ими, что-то вроде настройки доступа к компоненту через черный вход. Был создан Shadow DOM и мы добавляем к ней узел (Примечание переводчика: HTML Node). Этот узел будет полной копией шаблона, включая все элементы и текст шаблона. С шаблоном, прикрепленным к Shadow DOM из пользовательского компонента, элемент <slot> и slot атрибут берут на себя задачу сопоставления содержимого с тем, где оно должно находиться.

Проверьте это. Теперь мы можем объединить экземпляра одного и того же веб-компонента, отображая разный контент, просто изменив один элемент.

customElements.define('apocalyptic-warning',    class extends HTMLElement {      constructor() {        super();        let warning = document.getElementById('warningtemplate');        let mywarning = warning.content;                 const shadowRoot = this.attachShadow({mode: 'open'}).appendChild(mywarning.cloneNode(true));              }    });

<p>The Apocalypse will never happen!</p><apocalyptic-warning>   <span slot="whats-coming">Undead</span></apocalyptic-warning><apocalyptic-warning>   <span slot="whats-coming">Halitosis Laden Zombie Minions</span></apocalyptic-warning><template id="warningtemplate">  <style>    p {      background-color: pink;      padding: 0.5em;      border: 1px solid red;    }  </style>    <p>The <slot name="whats-coming">Zombies</slot> are coming!</p></template>

Пример: Codepen

Стилизация компонента

Возможно, вы заметили стилизацию в нашем примере. Как и следовало ожидать, у нас есть абсолютно все возможности для стилизации наших компонентов в CSS. На самом деле, мы можем включить <style> элемент прямо в <template>.

<template id="warningtemplate">  <style>    p {      background-color: pink;      padding: 0.5em;      border: 1px solid red;    }  </style>    <p>The <slot name="whats-coming">Zombies</slot> are coming!</p></template>

Таким образом, стили применяются только для компонента, что позволяет изолировать их благодаря теневой модели Shadow DOM.

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

И с этого момента контент технически находится вне шаблона, любые селекторы и классы, используемые в шаблонном <style> не будут действовать на контент внутри <slot>. Это не позволяет достичь полной инкапсуляции, чего я ожидал. Но поскольку веб-компонент является элементом, мы можем использовать его как селектор элемента в любом старом CSS файле, включая основной файл, используемый на странице. И хотя вставленный материал технически не находится в шаблоне, он находится в веб-компоненте, где доступна стилизация через селекторы потомков CSS.

apocalyptic-warning span {  color: blue;}

Будьте осторожны, стили в основном файле CSS не могут получить доступ к внутренним элементам <template>.

Код JavaScript точно такой же, за исключением того, что сейчас мы работаем с компонентом, у которого другое имя, <zombie-profile>.

customElements.define("zombie-profile",  class extends HTMLElement {    constructor() {      super();      let profile = document.getElementById("zprofiletemplate");      let myprofile = profile.content;      const shadowRoot = this.attachShadow({mode: "open"}).appendChild(myprofile.cloneNode(true));    }  });

Вот шаблон HTML и инкапсулированный CSS.

<template id="zprofiletemplate">  <style>    img {      width: 100%;      max-width: 300px;      height: auto;      margin: 0 1em 0 0;    }    h2 {      font-size: 3em;      margin: 0 0 0.25em 0;      line-height: 0.8;    }    h3 {      margin: 0.5em 0 0 0;      font-weight: normal;    }    .age, .infection-date {      display: block;    }    span {      line-height: 1.4;    }    .label {      color: #555;    }    li, ul {      display: inline;      padding: 0;    }    li::after {      content: ', ';    }    li:last-child::after {      content: '';    }    li:last-child::before {      content: ' and ';    }  </style>  <div class="profilepic">    <slot name="profile-image"><img src="http://personeltest.ru/aways/assets.codepen.io/1804713/default.png" alt=""></slot>  </div>  <div class="info">    <h2><slot name="zombie-name" part="zname">Zombie Bob</slot></h2>    <span class="age"><span class="label">Age:</span> <slot name="z-age">37</slot></span>    <span class="infection-date"><span class="label">Infection Date:</span> <slot name="idate">September 12, 2025</slot></span>    <div class="interests">      <span class="label">Interests: </span>      <slot name="z-interests">        <ul>          <li>Long Walks on Beach</li>          <li>brains</li>          <li>defeating humanity</li>        </ul>      </slot>    </div>    <span class="z-statement"><span class="label">Apocalyptic Statement: </span> <slot name="statement">Moooooooan!</slot></span>  </div></template>

Вот CSS для нашего <zombie-profile> элемента и его потомков из нашего основного файла CSS. Обратите внимание, что мы используем дублирование стилей, чтобы обеспечить одинаковую стилизацию и у замененных элементов, и у элементов <template>.

zombie-profile {  width: calc(50% - 1em);  border: 1px solid red;  padding: 1em;  margin-bottom: 2em;  display: grid;  grid-template-columns: 2fr 4fr;  column-gap: 20px;}zombie-profile img {  width: 100%;  max-width: 300px;  height: auto;  margin: 0 1em 0 0;}zombie-profile li, zombie-profile ul {  display: inline;  padding: 0;}zombie-profile li::after {  content: ', ';}zombie-profile li:last-child::after {  content: '';}zombie-profile li:last-child::before {  content: ' and ';}

А вот и результат:

Пример: Codepen

Несмотря на то, что есть еще пару ловушек и нюансов, я надеюсь, вы получили больше возможностей для работы с веб-компонентами, чем несколько минут назад. Возможно, будет хорошо, если вы добавите в свою работу какой-то нестандартный компонент, чтобы прочувствовать их и понять, где их использование имеет смысл.

Вот и все. Чего вы сейчас боитесь больше: веб-компонентов или зомби-апокалипсиса? В недалеком прошлом я бы мог сказать, что веб-компонентов, но теперь зомби - единственное, что меня беспокоит (Ну, и покроют ли мои суточные выплаты закуски).

Всем привет!

Продолжаю свой цикл публикаций о группе стандартов Web Components. Моя цель - сформировать реалистичные ожидания от данного набора технологий, а также, вместе с вами, прийти к более четкому пониманию того, где их не стоит применять, и где, напротив, ничего лучше еще не придумано. На этот раз, предлагаю подробнее остановится на Shadow DOM.

Начнем с азов, чтобы те из нас, кто пока не сталкивался с предметом обсуждения, не потеряли интерес к основной части статьи. Итак, Shadow DOM - это часть современного DOM API, которая позволяет создавать изолированные участки документа, со своей собственной внутренней разметкой и своими собственными стилями. Если вы откроете, с помощью инструментов разработчика в браузере, структуру документа, содержащего, к примеру, стандартный HTML-элемент audio - вы увидите в его составе область, обозначенную как #shadow-root и какую-то разметку внутри. Это и есть Shadow DOM элемента audio. Как видите, мы можем столкнуться с "теневыми" участками документов в приложениях и на страницах сайтов, даже если при их создании никак не использовались веб-компоненты или основанные на них библиотеки. Это утверждение справедливо для всех стандартных браузерных UI-примитивов, таких как кнопки, селекты, инпуты и т. д. Хорошая новость в том, что теперь у нас есть возможность создавать собственные универсальные элементы, подобные встроенным браузерным. И Shadow DOM, в данном случае, это ответ на вопрос "как?".

Какие основные вопросы решает Shadow DOM?

1. Инкапсуляция. Внутри Shadow DOM создается отдельный "поддокумент", к которому можно применять свои стили, экранированные от воздействий внешней среды (вам не нужно писать многоэтажные имена классов, чтобы обезопасить ваш элемент или внешний документ от "протечек") и где создается свой контекст для методов DOM API, где, к примеру, с помощью селекторов можно получить только те элементы которые находятся внутри и остаются почти невидимыми снаружи (при этом, допустимо использование одинаковых ID у элементов в разных контекстах, без опасности все поломать).

2. Композиция. Shadow DOM дает вам контроль над "размещением" непосредственных потомков сложного DOM-элемента в нужных местах его внутренней разметки. В этом случае, Shadow DOM выступает в роли некоего шаблона, в котором можно размещать содержимое в местах, обозначенных специальным тегом - slot. Это дает возможность, к примеру, создавать элементы-лейауты и повторно использовать их.

У тех, кто уже имел дело с библиотеками, основанными на веб-компонентах (такими как LitElement), могло сформироваться ложное впечатление о том, что Shadow DOM - это неотъемлемая часть любого веб-компонента. Это не так. Вы можете создавать компоненты с помощью стандарта Custom Elements и НЕ использовать Shadow DOM при этом, и напротив, создавать теневой DOM у обычных элементов, таких как старый добрый div. Теневой DOM открывает довольно интересные и нетривиальные возможности, например, когда вы динамически добавляете CSS-свойства к элементу через интерфейс "element.style", у вас нет возможности определить псевдоклассы и псеводоэлементы, а также, использовать media-запросы или создавать ключи анимации. Это большой недостаток модели работы со стилями через JavaScript в современных браузерах (работа в этом направлении ведется, но это отдельная сложная тема). Все меняет Shadow DOM:

let myElement = document.createElement('div');myElement.attachShadow({  mode: 'open',});myElement.shadowRoot.innerHTML = /*html*/ `<style>:host {  padding: 10px;}:host(:hover) {  color: red;}</style><slot></slot>`;

Теперь у нашего div есть реакция на наведение мыши при том, что мы не создавали для этого никаких классов и не вносили никаких изменений во внешние стили. Shadow DOM дает нам доступ к своему элементу-контейнеру через селектор :host, и используя этот селектор, мы можем создавать любые сложные стили для элемента в JS. Прошу принять во внимание, что код приведенный выше, написан исключительно для демонстрации самого принципа, в бою все может выглядеть немного иначе.

Когда стоит применять Shadow DOM?

Думаю, основными областями применения можно считать те-же, что и для веб-компонентов в целом: для создания встраиваемых виджетов и UI-библиотек-агностиков, минимально зависимых от конкретных мета-платформ, экосистем и фреймворков. Везде, где важна инкапсуляция, возможность спрятать "под ковер" реализацию и удобная независимая композиция.

Модные микрофронтенды также являются интересной областью для применения возможностей Shadow DOM.

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

Вялотекущий рефакторинг сложной системы тоже можно проводить через создание "островков безопасности".

Какие могут возникнуть сложности?

Следует понимать, что Shadow DOM в отдельности, НЕ решает вопрос контроля жизненного цикла ваших компонентов и инициализации компонентов во внешней среде (помните, для этого есть Custom Elements).

Shadow DOM в документе может быть создан только через JavaScript, а потому, вы не сможете напрямую использовать предварительный рендер (SSR) для внутренней разметки. Данное ограничение можно обойти, но это отдельный непростой разговор.

В случае, если на сайте используется CSP (Content Security Policy) - вы будете ограничены в выборе способов добавления стилей для элементов внутри теневого DOM. Любая попытка парсить стили из строки вызовет ошибку. Не будет работать ни innerHTML, ни insertRule, ничто иное в этом роде. Самое простое и быстрое решение, но, на мой взгляд, наименее красивое - CSP-флаг unsafe-inline. Если вы создаете виджет для интеграции его на сторонний сайт, рекомендовать пользователям использование небезопасных настроек - это не комильфо. Для браузеров на основе Chromium, выходом может быть использование adoptedStylesheets. Более универсальными решениями будет создание динамических стилей через element.style (что, как писалось выше, имеет свои ограничения), либо добавление в Shadow DOM внешнего файла стилей:

let myElement = document.createElement('div');myElement.attachShadow({  mode: 'open',});myElement.shadowRoot.innerHTML = /*html*/ `<link rel="stylesheet" href="styles.css"><slot></slot>`;

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

Ну и, поскольку данный вопрос все еще всплывает в обсуждениях, затрону и его: если среди требований к вашему проекту имеется поддержка IE - теневой DOM не ваш выбор. Радует, что все большее число разработчиков отказывается от поддержки некробраузеров, надеюсь скоро не нужно будет вообще об этом вспоминать.

Вывод

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