[Из песочницы] Веб-компоненты: обзор и использование в продакшне15.01.2018 16:48

При добавлении такого элемента в DOM-дерево он также станет объектом класса HTMLUnknownElement. Для того, чтобы зарегистрировать элемент, как пользовательский, и добавить ему своё поведение, нужно воспользоваться методом define глобального объекта customElements. Первым аргументом передаётся имя тега, вторым — класс, описывающий поведение. Класс при этом должен расширять класс HTMLElement, чтобы наш элемент обладал всеми качествами и возможностями других HTML элементов. Итого:

class XSpoiler extends HTMLElement {}

customElements.define("x-spoiler", XSpoiler);

После этого браузер пересоздаст все имеющиеся в разметке теги x-spoiler как объекты класса XSpoiler, а не HTMLUnknownElement. Все новые теги x-spoiler, которые добавляются в документ через innerHTML, insertAdjacentHTML, append или другие методы для работы с HTML, сразу создаются на основе класса XSpoiler. Также такие DOM-элементы можно создавать и через document.createElement.

Если попытаться зарегистрировать элемент с уже зарегистрированным именем или на основе уже зарегистрированного класса, мы получим исключение.

Имя тега и имя класса совсем не обязательно должны совпадать. Поэтому мы можем при необходимости зарегистрировать два пользовательских элемента с одинаковым именем класса под разными тегами.

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

Жизненный цикл пользовательского элемента

Мы можем добавить методы-коллбэки на создание элемента, добавление его в DOM, на изменение атрибутов, на удаление элемента из DOM и на изменение родительского документа. Мы воспользуемся этим, чтобы реализовать логику работы спойлера: компонент будет содержать кнопку с текстом «Свернуть»/«Развернуть» и секцию с изначальным содержимым тега. Видимость секции будет управляться кликом по кнопке или значением атрибута. Текст кнопок также можно будет настроить через атрибуты.

Коллбэком на создание элемента является конструктор класса. Чтобы он корректно отработал, сперва необходимо вызвать родительский конструктор через super. В конструкторе можно задать разметку, навесить обработчики событий, сделать какую-то другую подготовительную работу. В конструкторе, как и в других методах, this будет ссылаться на сам DOM-элемент, а благодаря тому, что наш пользовательский элемент расширяет HTMLElement, у this есть такие методы как querySelector и такие свойства как classList.

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

class XSpoiler extends HTMLElement {
  constructor() {
    super();

    this.text = {
      "when-close": "Развернуть",
      "when-open": "Свернуть",
    }

    this.innerHTML = `
      ${this.text["when-close"]}
      
${this.innerHTML}
    `;

    this.querySelector("button").addEventListener("click", () => {
      const opened = (this.getAttribute("opened") !== null);      

      if (opened) {
        this.removeAttribute("opened");
      } else {
        this.setAttribute("opened", "");
      }
    });
  }
}

Подробно разберём каждую часть конструктора.

super() вызывает конструктор класса HTMLElement. Это в данном случае обязательное действие, если нам нужен конструктор элемента.

this.text — так как this это объект, мы можем добавить и свои свойства. В данном случае я буду хранить в объекте text вспомогательные тексты, которые выводятся на кнопке.

this.innerHTML установит разметку нашего DOM-элемента. При этом мы используем текст, заданный чуть выше.

this.querySelector("button").addEventListener добавит обработчик события click по кнопке, который будет устанавливать или снимать атрибут opened. Мы будем работать с ним как с логическим значением — спойлер либо открыт, либо закрыт, следовательно, атрибут либо есть, либо нет. В обработчике мы будем проверять наличие атрибута через сравнение с null, а затем либо устанавливать, либо удалять атрибут.

Теперь при клике по созданной кнопке будет меняться атрибут opened. Пока что изменение атрибута ничего не даёт. Прежде чем перейти к этой тебе, немного модифицируем код.

Помните, что у тега есть атрибут disabled, который отключает кнопку? Если мы пропишем его в разметке, кнопка перестанет быть активной, если удалим — вновь станет кликабельной. Работать с атрибутом мы можем и из JavaScript-кода, используя методы getAttribute, setAttribute и removeAttribute. Но это не очень удобно, нам нужно целых три метода для работы с атрибутами, они длинные, и, к тому же, работают только со строками (значение атрибута — всегда строка). Поэтому в DOM-элементах зачастую используется «отражение» атрибутов в одноимённые свойства. Так, свойство button.disabled вернёт наличие или отсутствие атрибута. А теперь сравнените два подхода, через прямую работу с атрибутами и через свойства:

// Получение текущего значения:
// атрибуты:
const isDisabled = button.getAttribute("disabled") !== null;
// свойства:
const isDisabled = button.disabled;

// Установка блокировки:
// атрибуты:
button.setAttribute("disabled", "");
// свойства:
button.disabled = true;

// Снятие блокировки:
// атрибуты:
button.removeAttribute("disabled");
// свойства:
button.disabled = false;

// Изменение значения на противоположное:
// атрибуты:
if (button.getAttribute("disabled") !== null) {
  button.removeAttribute("disabled");
} else {
  button.setAttribute("disabled", "");
}
// свойства:
button.disabled = !button.disabled;

Согласитесь, работа через свойства гораздо удобнее? Реализуем такой же механизм и с нашим атрибутом opened, чтобы его значение можно было легко получить и установить. Для этого используем возможность геттеров и сеттеров свойств в классах:

class XSpoiler extends HTMLElement {
  constructor() {
    super();

    this.text = {
      "when-close": "Развернуть",
      "when-open": "Свернуть",
    }

    this.innerHTML = `
      

${this.text["when-close"]}

Для строковых свойств (как для встроенных id у любых элементов и href у ссылок) геттер и сеттер будут выглядеть немного проще, но идея сохраняется.

Можно ещё добавить, что такое «отржание» может быть не всегда полезным с точки зрения производительности. Так, у элементов формы атрибут value работает не совсем так.

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

Вместо этого можно навесить обработчик на изменение значения атрибутов, используя метод attributeChangedCallback. Он будет вызываться каждый раз при изменении атрибута, таким образом, через атрибуты можно будет управлять компонентом как изнутри, так и снаружи.

Метод применяет три параметра: имя атрибута, старое значение, новое значение. Так как вызывать этот метод на изменение абсолютно ВСЕХ атрибутов было бы нерационально с точки зрения производительности, срабатывает он только при изменении свойств, которые перечислены в статическом массиве observedAttributes текущего класса.

Наш компонент должен реагировать на изменение трёх атрибутов — opened, text-when-open и text-when-close. Первый будет влиять на отображение спойлера, а два других будут управлять текстом кнопки. Первым делом добавим к нашему классу имена этих атрибутов в статический массив observedAttributes:

static get observedAttributes() {
  return [
    "opened",
    "text-when-open",
    "text-when-close",
  ]
}

Теперь добавим сам метод attributeChangedCallback, который в зависимости от изменённого атрибута будет менять либо видимость контента и выводить текст кнопки, либо менять текст кнопки и выводить его при необходимости. Для этого используем switch по первому аргументу метода.

attributeChangedCallback(attrName, oldVal, newVal) {
  switch (attrName) {
    case "opened":
      const opened = newVal !== null;
      const button = this.querySelector("button");
      const content = this.querySelector("section");
      const display = opened ? "block" : "none";
      const text = this.text[opened ? "when-open" : "when-close"];
      content.style.display = display;
      button.textContent = text;
      break;

    case "text-when-open":        
      this.text["when-open"] = newVal;
      if (this.opened) {
        this.querySelector("button").textContent = newVal;
      }
      break;

    case "text-when-close":
      this.text["when-close"] = newVal;
      if (!this.opened) {
        this.querySelector("button").textContent = newVal;
      }
      break;
  }
}

Обратите внимание, что метод attributeChangedCallback сработает даже тогда, когда требуемые атрибуты изначально присутствуют у элемента. То есть, если наш компонент будет вставлен в разметку сразу с атрибутом opened, спойлер действительно будет открыт, т.к. attributeChangedCallback сработает сразу после constructor. Поэтому никакой дополнительной работы по обработке начального значения атрибутов в конструкторе производить не нужно (если, конечно, атрибут — отслеживаемый).

Теперь наш компонент действительно работает! При клике по кнопке меняется значение атрибута opened, после этого срабатывает коллбэк attributeChangedCallback, который в свою очередь управляет видимостью содержимого. Управление состоянием именно через атрибуты и attributeChangedCallback позволяет управлять изначальным состоянием (мы можем добавить opened в разметку сразу, если хотим показать открытый спойлер) или управлять состоянием снаружи (любой другой JS-код может установить или снять атрибут с нашего элемента и это будет корректно обработано). В качестве бонуса мы можем настроить текст управляющей кнопки. Демо результата, смотреть в свежем Chrome!

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

На вставку элемента в DOM-дерево срабатывает метод connectedCallback. Если элемент уже находился в разметке на момент регистрации, или он создаётся через вставку HTML-строки, последовательно сработают constructor, при необходимости — attributeChangedCallback, а уже затем — connectedCallback. Этот коллбэк можно использовать, если, например, необходимо знать информацию о родителе в DOM-дереве, или мы хотим оптимизировать наш компонент и отложить какой-то тяжёлый код именно до момента использования элемента. Однако, при этом стоит помнить две вещи: во-первых, если constructor срабатывает единожды для одного элемента, то connectedCallback срабатывает каждый раз, когда элемент вставляется в DOM, и во-вторых, attributeChangedCallback может сработать раньше connectedCallback, поэтому, если отложить создание разметки с конструктора до connectedCallback, это может привести к ошибке. Метод можно использовать для назначения обработчиков событий или для дргих тяжёлых операций, например, соединения с сервером.

Точно так же, как можно отследить вставку элемента в DOM, можно отследить и удаление. За это отвечает метод disconnectedCallback. Он срабатывает, например, при удалении элемента из DOM методом remove(). Обратите внимание: если элемент удалён из DOM-дерева, но у вас есть ссылка на элемент, он опять может быть вставлен в DOM, и при этом повторно сработает connectedCallback. При удалении можно, например, прекратить обновлять данные в компоненте, удалить таймеры, удалить назначенные в connectedCallback обработчики событий или закрыть соединение с сервером. Обратите внимание, что disconnectedCallback не гарантирует выполнение своего кода — например, при закрытии пользователем страницы метод вызван не будет.

Самым редко используемым коллбэком является метод adoptedCallback. Он срабатывает, когда элемент меняет свойство ownerDocument. Это происходит, если, например, создать новое окно и переместить элемент в него.

Взаимодействие с пользовательским элементом

Управляется компонент, как мы уже поняли, значением атрибутов напрямую или через свойства. А вот для того чтобы передать данные из компонента наружу, можно использовать CustomEvents. В случае нашего компонента будет рационально добавить событие изменения состояния, чтобы его можно было прослушать и отреагировать. Для этого добавим в конструкторе свойство events с двумя объектами CustomEvent:

this.events = {
  "close": new CustomEvent("x-spoiler.changed", {
    bubbles: true,
    detail: {opened: false},
  }),
  "open": new CustomEvent("x-spoiler.changed", {
    bubbles: true,
    detail: {opened: true},
  }),
};

Также отредактируем attributeChangedCallback, чтобы при изменении opened отправлялось то или иное событие:

this.dispatchEvent(this.events[opened ? "open" : "close"]);

Теперь мы можем прослушивать интересующие нас события, чтобы узнавать об изменении состояния спойлера.

Новое демо.

Ещё немного о customElements

При регистрации элемента мы использовали метод define глобального объекта customElements. Помимо этого у него есть ещё два полезных метода.

customElements.get(name) вернёт конструктор пользовательского элемента, зарегистрированного под именем name, если такой есть, либо undefined.

customElements.whenDefined(name) вернёт промис, который будет выполнен успешно тогда, когда элемент с именем name будет зарегистрирован, или незамедлительно, если элемент уже зарегистрирован. Особенно удобно это с использванием await, но это уже другая тема.

Расширение пользовательских элементов

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

Расширение стандартных элементов

Спецификация разрешает расширять и стандартные HTML-теги. Например, вам нужна своя реализация кнопки, но при этом вам желательно сохранить уже имеющийся функционал браузерных кнопок, например, правильную работу с атрибутами disabled, tabindex, type и прочими. Однако, тут есть ряд особенностей.

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

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

В-третьих, создаётся такой пользовательский элемент как обычный тег, который нужно было расширить, но с атрибутом is, равным имени пользовательского элемента. Если же элемент создается через document.createElement, is передаётся как свойство второго аргумента.

Выглядеть это будет так:

class FancyButton extends HTMLButtonElement { }

customElements.define("fancy-button", FancyButton, {extends: "button"});

// создание элемента через document.createElement
let button = document.createElement("button", {is: "fancy-button"});

Fancy button!

Стилизация элементов до регистрации

Между тем, как пользователь получит HTML-разметку, и тем, как будет скачан и выполнен JavaScript-код, пройдёт некоторое время. Чтобы как-то стилизовать пользовательские элементы, которые отрисованы в DOM, но ещё не зарегистрированы и не работают должным образом, можно использовать псевдокласс :defined. Самый простой пример использования — скрыть все незарегистрированные пользовательские элементы:

*:not(:defined) {
  display: none;
}

Итого

Мы сделали реиспользуемый веб-компонент на основе технологии пользовательских элементов. Однако, у него есть много минусов. Так, например, у нас нет изоляции стилей: правило section {display: block !important} легко сломает логику работы нашего компонента. Да и вообще навешивать стили непосредственно в JS — плохой тон. Также сложно поменять содержимое спойлера: наши кнопка, секция и обработчик клика пропадут при установке нового содержимого через innerHTML. Для того чтобы действительно поменять содержимое, нужно будет знать и учитывать структуру компонента. А ещё и разметка у нас хранится прямо в конструкторе. Всё это явно не то, что мы хотим от простого реиспользуемого компонента. Для того, чтобы исправить все эти минусы, мы будем использовать другие спецификации.

Теневой DOM (Shadow DOM)

Спецификация теневого DOM позволит решить проблемы с изоляцией стилей и разметки от окружения и внутреннего содержимого.

Инкапсуляция DOM

Стандартная модель DOM, к которой мы привыкли, предполагает, что все потомки элемента доступны через childNodes, их можно найти через querySelector(), и так далее. DOM — сквозной, где бы не находился параграф текста, он всегда будет найден через document.querySelectorAll("p"). Однако, есть возможность отображать не то, что находится в DOM-дереве, а какую-либо другую разметку, причём так, чтобы она была игнорировалась привычными childNode и querySelector. Самым простым примером такого поведения будет тег с несколькими внутри. Мы добавляем в DOM только , а видим полноценный видеопроигрыватель, с собственной изолированной разметкой (блоками, кнопками и прочим). Всё, что мы видим на экране, как раз располагается в теневом DOM. Как это работает?

В любой элемент времени мы можем добавить теневой DOM с помощью метода attachShadow(). В этот момент вместо обычного DOM-дерева у элемента появляется сразу три других: Shadow DOM, Light DOM и Flattened DOM. Рассмотрим их по отдельности.

Light DOM — это то, что раньше являлось обычным DOM-деревом элемента: все элементы, которые доступны через обычные innerHTML, childNodes или по которым ищет метод querySelectorAll.

Shadow DOM — это DOM-дерево, которое лежит в свойстве shadowRoot элемента. Сразу после вызова attachShadow свойство shadowRoot пустое, но мы можем задать какую-либо разметку через стандартные innerHTML, appendChild или другие способы работы с DOM, вызывая их относительно this.shadowRoot.

Flattened DOM — это результат объединения Shadow DOM и Light DOM. Это то, что пользователь в действительности видит на экране. Это искусственное понятие, необходимое только для понимания механизма работы Shadow DOM. Если получить разметку Light DOM можно через element.innerHTML, разметку Shadow DOM можно через element.shadowRoot.innerHTML, то на Flattened DOM можно только посмотреть в окне браузера. Flattened DOM строится на основе Shadow DOM и в самом простом варианте использования строго ему равен. Таким образом, Light DOM может вообще не отображаться на экране. Например:

Привет!

class Demo extends HTMLElement {
  constructor() {
    super();
    this.attachShadow({mode: "open"});
    this.shadowRoot.innerHTML = "Привет из тени...";
  }
}

customElements.define("x-demo", Demo);

До момента регистрации элемента пользователь будет видеть обычный DOM, т.е. в нашем случае текст «Привет!». Но как только элемент будет зарегистрирован, текст пропадёт, вместо него появится фраза «Привет из тени…».

Обратите внимание: при добавлении Shadow DOM нужно в объекте опций указать режим, в котором этот Shadow DOM будет создан. Для пользовательских элементов рекомендуется использовать open. Это позволит при необходимости взаимодействовать с Shadow DOM через свойство shadowRoot.

Пока не очень полезно. Гораздо больше возможностей нам дают тег и его атрибут name в Shadow DOM и атрибут slot в Light DOM. Они объяснят, где именно во Flattened DOM нужно отображать содержимое Lignt DOM. Работает это так: элементы (их может быть как 0, так и 1 и более) с атрибутом slot и каким-либо значением из Light DOM отображаются в качестве содержимого тега с соответствующим значением атрибута name в Shadow DOM. Если для какого-либо тега не нашлось подходящего содержимого, отображается его содержимое из Shadow DOM. Если есть тег без атрибута name, в нём отображается всё содержимое Light DOM без атрибута slot.

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

Этот вариант хорошо подходит для нашего компонента спойлера: попробуем убрать всю «обвязку» (секцию и кнопку) в Shadow DOM, и отобразим содержимое Light DOM с помощью тега . Для этого исправим конструктор:

this.attachShadow({mode: "open"});
this.shadowRoot.innerHTML = `
  ${this.text["when-close"]}
  

`;

Так как кнопка для открытия теперь находится в Shadow DOM, необходимо также заменить this.querySelector("button") на this.shadowRoot.querySelector("button"). Также нужно поступить и с поиском тега section.

Теперь мы можем безопасно менять текст спойлера, например, через textContent пользовательского элемента. Наша разметка инкапсулирована и никак не мешает работать с содержимым элемента. Разработчику не нужно знать, как устроен элемент изнутри, чтобы работать с ним. Демо.

Рассмотрим пример посложнее: это будет искусственный пример, который будет раскидывать по четырём цветным «коробкам» разных цветов DOM-элементы из Light DOM. Можете попробовать поменять содержимое тега, чтобы посмотреть, как оно работает: демо.

В этом примере видно, что если в Light DOM находится несколько элементов с одинаковым значением атрибута slot, все они попадут в  с аналогичным name (красная секция). Если у элемента в Light DOM не указан slot, он попадёт в Shadow DOM в тег , который не имеет атрибута name (белая секция). Ну и если у нас вообще нет элементов с атрибутом slot с каким-либо значением, соответствующий тег останется со своей собственной разметкой (желтая секция).

Инкапсуляция стилей

С изоляцией DOM и соотношением Light DOM / Shadow DOM вроде разобрались, теперь поговорим об изоляции стилей.

В последнем примере я уже начал использовать изоляцию стилей. Если в Shadow DOM находится тег

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

В случае с самим пользовательским элементом всё просто — стили на нём при совпадении со стилями в :host будут перебиты. Таким образом, стилизация по тегу будет перебивать стилизацию через :host. Это позволит управлять контейнером пользовательского элемента.

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

Взаимодействие с теневым DOM

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

Доступ к теневому DOM открыт любому JavaScript-коду при условии, что теневой DOM был добавлен с опцией {mode: "open"}.

Что ещё?

У вас есть возможность создавать так называемый «закрытый» Shadow DOM, передав опцию mode со значением closed. При этом Shadow DOM будет недоступен через свойство shadowRoot, оно будет возвращать null. Ссылку на настоящий shadowRoot вернёт сам метод attachShadow(), и если сохранить её в переменную, можно работать с shadowRoot в пределах конструтора и нельзя как-то повлиять в последующем. Это сильно ограничивает работу с Shadow DOM, поэтому не рекомендуется к использованию в пользовательских элементах.

Теги генерируют событие slotchange, если после инициализации пользовательского элемента произошло изменение в Light DOM, которое затронуло этот слот. Таким образом, можно отслеживать изменения и реагировать на них.

Также теги имеют метод assignedNodes, который возвращает массив DOM-узлов из Light DOM, которые были помещены в этот слот. Если

© Habrahabr.ru