Кратко

  • Первый публичный проект W3C о Custom Elements вышел 14 мая 2013 года. Проект 2016 года описал классы, реестр, обновление уже созданных элементов и вызовы жизненного цикла; заметка 2018 года зафиксировала переход материала в DOM и HTML.
  • По действующему стандарту HTML автор регистрирует определение в CustomElementRegistry. Браузер сопоставляет элементы с этим определением, обновляет их и выполняет реакции при подключении, удалении и изменении наблюдаемых атрибутов.

Редакция хочет многократно использовать карточку с фотографией, заголовком и ссылкой. Можно заставить скрипт обходить каждую страницу и искать все карточки. А можно дать карточке имя и определение, которое браузер сам свяжет с подходящим тегом. Во втором случае обязанности принадлежат самому элементу, а не дежурному обходчику с длинным списком адресов.

Первый публичный рабочий проект W3C от 14 мая 2013 года предложил способ определять новые типы элементов DOM. В раннем варианте имя связывалось с прототипом и вызовами жизненного цикла. Детали со временем изменились, но распределение роли уже читалось: платформа вводит новый тип в документ, автор пишет его поведение.

В проекте W3C от 9 июня 2016 года появилась более привычная схема: класс наследует HTMLElement и регистрируется через customElements.define(). Пример показывает элемент, уже находящийся в документе до регистрации. После появления определения подходящий элемент обновляется. Рабочее место можно открыть раньше, чем придёт инструкция для сотрудника.

Реестр проверяет имена и организует обновление с реакциями. Дефис в имени автономного пользовательского элемента помогает выделить пространство для имён авторских тегов. Класс объявляет атрибуты, за которыми следит. attributeChangedCallback() обрабатывает их изменения, connectedCallback() — подключение, disconnectedCallback() — уход из документа. Браузер управляет временем этих вызовов по правилам реакций элемента.

Жизнь карточки не ограничивается первым появлением. Тег может стоять в HTML до регистрации, затем получить определение, переехать и снова подключиться. Код автора должен понимать такие смены. Браузер обеспечивает реестр и вызовы, но не выбирает фотографию и не пишет заголовок. Отдел кадров не заменяет редактора.

Отдельный документ позднее переехал. Заметка рабочей группы W3C от 3 мая 2018 года сообщает, что материал Custom Elements включался в спецификации DOM, HTML и связанные тексты. История публикаций W3C сохраняет путь от первого проекта 2013 года. Сегодня раздел Custom Elements в HTML Living Standard организации WHATWG определяет реестры, проверку имён, обновления и очереди реакций. В нём есть и более поздние случаи, в том числе перемещение между документами и участие в формах.

Shadow DOM отвечает за внутреннее дерево компонента и его отношения с внешней страницей. Custom Elements отвечает за имя тега и его жизненный путь. Одна карточка может пользоваться обоими: один механизм даёт план комнаты, другой — удостоверение и расписание выходов на работу.