Пользовательские элементы v1 – многоразовые веб-компоненты

Пользовательские элементы позволяют веб-разработчикам определять новые теги HTML, расширять существующие и создавать повторно используемые веб-компоненты.

С помощью пользовательских элементов веб-разработчики могут создавать новые теги HTML , расширять существующие теги HTML или расширять компоненты, созданные другими разработчиками. API — это основа веб-компонентов . Он предлагает основанный на веб-стандартах способ создания повторно используемых компонентов, используя не что иное, как ванильный JS/HTML/CSS. В результате получается меньше кода, модульный код и больше повторного использования в наших приложениях.

Введение

Браузер предоставляет нам отличный инструмент для структурирования веб-приложений. Это называется HTML. Возможно, вы слышали об этом! Он декларативный, портативный, хорошо поддерживается и с ним легко работать. Каким бы прекрасным ни был HTML, его словарный запас и расширяемость ограничены. В стандарте жизни HTML всегда отсутствовал способ автоматически связать поведение JS с вашей разметкой… до сих пор.

Пользовательские элементы — это ответ на модернизацию HTML, заполнение недостающих частей и объединение структуры с поведением. Если HTML не обеспечивает решение проблемы, мы можем создать специальный элемент, который это сделает. Пользовательские элементы учат браузер новым трюкам, сохраняя при этом преимущества HTML .

Определение нового элемента

Чтобы определить новый элемент HTML, нам нужны возможности JavaScript!

Глобальный customElements используется для определения пользовательского элемента и обучения браузера новому тегу. Вызовите customElements.define() указав имя тега, который вы хотите создать, и class JavaScript, расширяющий базовый HTMLElement .

Пример : определение панели мобильного ящика <app-drawer> :

class AppDrawer extends HTMLElement {...}
window.customElements.define('app-drawer', AppDrawer);

// Or use an anonymous class if you don't want a named constructor in current scope.
window.customElements.define('app-drawer', class extends HTMLElement {...});

Пример использования:

<app-drawer></app-drawer>

Важно помнить, что использование пользовательского элемента ничем не отличается от использования <div> или любого другого элемента. Экземпляры могут быть объявлены на странице, созданы динамически в JavaScript, могут быть прикреплены прослушиватели событий и т. д. Продолжайте читать, чтобы увидеть больше примеров.

Определение JavaScript API элемента

Функциональность пользовательского элемента определяется с помощью class ES2015, который расширяет HTMLElement . Расширение HTMLElement гарантирует, что пользовательский элемент наследует весь API DOM и означает, что любые свойства/методы, которые вы добавляете в класс, становятся частью интерфейса DOM элемента. По сути, используйте этот класс для создания общедоступного API JavaScript для вашего тега.

Пример – определение DOM-интерфейса <app-drawer> :

class AppDrawer extends HTMLElement {

  // A getter/setter for an open property.
  get open() {
    return this.hasAttribute('open');
  }

  set open(val) {
    // Reflect the value of the open property as an HTML attribute.
    if (val) {
      this.setAttribute('open', '');
    } else {
      this.removeAttribute('open');
    }
    this.toggleDrawer();
  }

  // A getter/setter for a disabled property.
  get disabled() {
    return this.hasAttribute('disabled');
  }

  set disabled(val) {
    // Reflect the value of the disabled property as an HTML attribute.
    if (val) {
      this.setAttribute('disabled', '');
    } else {
      this.removeAttribute('disabled');
    }
  }

  // Can define constructor arguments if you wish.
  constructor() {
    // If you define a constructor, always call super() first!
    // This is specific to CE and required by the spec.
    super();

    // Setup a click listener on <app-drawer> itself.
    this.addEventListener('click', e => {
      // Don't toggle the drawer if it's disabled.
      if (this.disabled) {
        return;
      }
      this.toggleDrawer();
    });
  }

  toggleDrawer() {
    // ...
  }
}

customElements.define('app-drawer', AppDrawer);

В этом примере мы создаем ящик, который имеет свойство open , свойство disabled и метод toggleDrawer() . Он также отражает свойства как атрибуты HTML .

Отличительной особенностью пользовательских элементов является то, что this внутри определения класса относится к самому элементу DOM, то есть к экземпляру класса. В нашем примере this относится к <app-drawer> . Вот так (😉) элемент может присоединить к себе прослушиватель click ! И вы не ограничены прослушивателями событий. Весь DOM API доступен внутри кода элемента. Используйте this для доступа к свойствам элемента, проверки его дочерних элементов ( this.children ), узлов запроса ( this.querySelectorAll('.items') ) и т. д.

Правила создания нестандартных элементов

1. Имя пользовательского элемента должно содержать дефис (-) . Таким образом, <x-tags> , <my-element> и <my-awesome-app> — допустимые имена, а <tabs> и <foo_bar> — нет. Это требование сделано для того, чтобы анализатор HTML мог отличать пользовательские элементы от обычных. Это также обеспечивает совместимость вперед при добавлении новых тегов в HTML.
2. Вы не можете зарегистрировать один и тот же тег более одного раза. Попытка сделать это приведет к возникновению исключения DOMException . Как только вы сообщите браузеру о новом теге, все. Никаких возвратов.
3. Пользовательские элементы не могут быть самозакрывающимися, поскольку HTML допускает самозакрытие только нескольких элементов . Всегда пишите закрывающий тег ( <app-drawer></app-drawer> ).

Пользовательские реакции на элементы

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

Обратные вызовы реакций являются синхронными . Если кто-то вызывает el.setAttribute() для вашего элемента, браузер немедленно вызовет attributeChangedCallback() . Аналогично, вы получите disconnectedCallback() сразу после удаления вашего элемента из DOM (например, пользователь вызывает el.remove() ).

Пример: добавление реакций пользовательского элемента в <app-drawer> :

class AppDrawer extends HTMLElement {
  constructor() {
    super(); // always call super() first in the constructor.
    // ...
  }

  connectedCallback() {
    // ...
  }

  disconnectedCallback() {
    // ...
  }

  attributeChangedCallback(attrName, oldVal, newVal) {
    // ...
  }
}

Определите реакции, если/когда это имеет смысл. Если ваш элемент достаточно сложен и открывает соединение с IndexedDB в connectedCallback() , выполните необходимую работу по очистке в disconnectedCallback() . Но будьте осторожны! Вы не можете рассчитывать на удаление вашего элемента из DOM при любых обстоятельствах. Например, disconnectedCallback() никогда не будет вызван, если пользователь закроет вкладку.

Свойства и атрибуты

Отражение свойств в атрибуты

Свойства HTML обычно отражают свое значение обратно в DOM в виде атрибута HTML. Например, когда значения hidden или id изменяются в JS:

div.id = 'my-id';
div.hidden = true;

значения применяются к реальному DOM как атрибуты:

<div id="my-id" hidden>

Это называется « отражением свойств в атрибутах ». Почти каждое свойство HTML делает это. Почему? Атрибуты также полезны для декларативной настройки элемента, и некоторые API, такие как специальные возможности и селекторы CSS, полагаются на работу атрибутов.

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

Вспомните наш <app-drawer> . Потребитель этого компонента может захотеть затемнить его и/или запретить взаимодействие с пользователем, когда он отключен:

app-drawer[disabled] {
  opacity: 0.5;
  pointer-events: none;
}

Когда disabled свойство изменяется в JS, мы хотим, чтобы этот атрибут был добавлен в DOM, чтобы селектор пользователя соответствовал. Элемент может обеспечить такое поведение, отражая значение атрибута с тем же именем:

get disabled() {
  return this.hasAttribute('disabled');
}

set disabled(val) {
  // Reflect the value of `disabled` as an attribute.
  if (val) {
    this.setAttribute('disabled', '');
  } else {
    this.removeAttribute('disabled');
  }
  this.toggleDrawer();
}

Наблюдение за изменениями атрибутов

Атрибуты HTML — это удобный способ для пользователей объявить исходное состояние:

<app-drawer open disabled></app-drawer>

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

class AppDrawer extends HTMLElement {
  // ...

  static get observedAttributes() {
    return ['disabled', 'open'];
  }

  get disabled() {
    return this.hasAttribute('disabled');
  }

  set disabled(val) {
    if (val) {
      this.setAttribute('disabled', '');
    } else {
      this.removeAttribute('disabled');
    }
  }

  // Only called for the disabled and open attributes due to observedAttributes
  attributeChangedCallback(name, oldValue, newValue) {
    // When the drawer is disabled, update keyboard/screen reader behavior.
    if (this.disabled) {
      this.setAttribute('tabindex', '-1');
      this.setAttribute('aria-disabled', 'true');
    } else {
      this.setAttribute('tabindex', '0');
      this.setAttribute('aria-disabled', 'false');
    }
    // TODO: also react to the open attribute changing.
  }
}

В этом примере мы устанавливаем дополнительные атрибуты в <app-drawer> при изменении disabled атрибута. Хотя здесь мы этого не делаем, вы также можете использовать attributeChangedCallback , чтобы синхронизировать свойство JS с его атрибутом .

Обновления элементов

Прогрессивно улучшенный HTML

Мы уже узнали, что пользовательские элементы определяются путем вызова customElements.define() . Но это не означает, что вам нужно определить + зарегистрировать пользовательский элемент за один раз.

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

Прогрессивное улучшение — это особенность пользовательских элементов. Другими словами, вы можете объявить на странице группу элементов <app-drawer> и никогда не вызывать customElements.define('app-drawer', ...) до гораздо более позднего времени. Это связано с тем, что браузер по-разному обрабатывает потенциальные пользовательские элементы из-за неизвестных тегов . Процесс вызова define() и присвоения существующему элементу определения класса называется «обновлением элемента».

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

customElements.whenDefined('app-drawer').then(() => {
  console.log('app-drawer defined');
});

Пример – отложить работу до обновления набора дочерних элементов

<share-buttons>
  <social-button type="twitter"><a href="...">Twitter</a></social-button>
  <social-button type="fb"><a href="...">Facebook</a></social-button>
  <social-button type="plus"><a href="...">G+</a></social-button>
</share-buttons>

// Fetch all the children of <share-buttons> that are not defined yet.
let undefinedButtons = buttons.querySelectorAll(':not(:defined)');

let promises = [...undefinedButtons].map((socialButton) => {
  return customElements.whenDefined(socialButton.localName);
});

// Wait for all the social-buttons to be upgraded.
Promise.all(promises).then(() => {
  // All social-button children are ready.
});

Содержимое, определяемое элементом

Пользовательские элементы могут управлять своим собственным содержимым с помощью API-интерфейсов DOM внутри кода элемента. Для этого пригодятся реакции .

Пример . Создайте элемент с HTML-кодом по умолчанию:

customElements.define('x-foo-with-markup', class extends HTMLElement {
  connectedCallback() {
    this.innerHTML = "<b>I'm an x-foo-with-markup!</b>";
  }
  // ...
});

Объявление этого тега приведет к:

<x-foo-with-markup>
  <b>I'm an x-foo-with-markup!</b>
</x-foo-with-markup>

// TODO: DevSite – удален пример кода, поскольку в нем использовались встроенные обработчики событий

Создание элемента, использующего Shadow DOM

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

<!-- chat-app's implementation details are hidden away in Shadow DOM. -->
<chat-app></chat-app>

Чтобы использовать Shadow DOM в пользовательском элементе, вызовите this.attachShadow внутри своего constructor :

let tmpl = document.createElement('template');
tmpl.innerHTML = `
  <style>:host { ... }</style> <!-- look ma, scoped styles -->
  <b>I'm in shadow dom!</b>
  <slot></slot>
`;

customElements.define('x-foo-shadowdom', class extends HTMLElement {
  constructor() {
    super(); // always call super() first in the constructor.

    // Attach a shadow root to the element.
    let shadowRoot = this.attachShadow({mode: 'open'});
    shadowRoot.appendChild(tmpl.content.cloneNode(true));
  }
  // ...
});

Пример использования:

<x-foo-shadowdom>
  <p><b>User's</b> custom text</p>
</x-foo-shadowdom>

<!-- renders as -->
<x-foo-shadowdom>
  #shadow-root
  <b>I'm in shadow dom!</b>
  <slot></slot> <!-- slotted content appears here -->
</x-foo-shadowdom>

// TODO: DevSite – удален пример кода, поскольку в нем использовались встроенные обработчики событий

Создание элементов из <template>

Для тех, кто не знаком, элемент <template> позволяет вам объявлять фрагменты DOM, которые анализируются, инертны при загрузке страницы и могут быть активированы позже во время выполнения. Это еще один примитив API в семействе веб-компонентов. Шаблоны являются идеальным заполнителем для объявления структуры пользовательского элемента .

Пример: регистрация элемента с содержимым Shadow DOM, созданным из <template> :

<template id="x-foo-from-template">
  <style>
    p { color: green; }
  </style>
  <p>I'm in Shadow DOM. My markup was stamped from a &lt;template&gt;.</p>
</template>

<script>
  let tmpl = document.querySelector('#x-foo-from-template');
  // If your code is inside of an HTML Import you'll need to change the above line to:
  // let tmpl = document.currentScript.ownerDocument.querySelector('#x-foo-from-template');

  customElements.define('x-foo-from-template', class extends HTMLElement {
    constructor() {
      super(); // always call super() first in the constructor.
      let shadowRoot = this.attachShadow({mode: 'open'});
      shadowRoot.appendChild(tmpl.content.cloneNode(true));
    }
    // ...
  });
</script>

Эти несколько строк кода впечатляют. Давайте разберемся в ключевых моментах:

1. Мы определяем новый элемент в HTML: <x-foo-from-template>
2. Shadow DOM элемента создается на основе <template>
3. DOM элемента является локальным для элемента благодаря Shadow DOM.
4. Внутренний CSS элемента привязан к элементу благодаря Shadow DOM.

// TODO: DevSite – удален пример кода, поскольку в нем использовались встроенные обработчики событий

Стилизация пользовательского элемента

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

<!-- user-defined styling -->
<style>
  app-drawer {
    display: flex;
  }
  panel-item {
    transition: opacity 400ms ease-in-out;
    opacity: 0.3;
    flex: 1;
    text-align: center;
    border-radius: 50%;
  }
  panel-item:hover {
    opacity: 1.0;
    background: rgb(255, 0, 255);
    color: white;
  }
  app-panel > panel-item {
    padding: 5px;
    list-style: none;
    margin: 0 7px;
  }
</style>

<app-drawer>
  <panel-item>Do</panel-item>
  <panel-item>Re</panel-item>
  <panel-item>Mi</panel-item>
</app-drawer>

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

Предварительное оформление незарегистрированных элементов

Прежде чем элемент будет обновлен, вы можете указать его в CSS, используя псевдокласс :defined . Это полезно для предварительного оформления компонента. Например, вы можете захотеть предотвратить макет или другие визуальные ошибки, скрыв неопределенные компоненты и затенив их, когда они станут определенными.

Пример — скрыть <app-drawer> до его определения:

app-drawer:not(:defined) {
  /* Pre-style, give layout, replicate app-drawer's eventual styles, etc. */
  display: inline-block;
  height: 100vh;
  opacity: 0;
  transition: opacity 0.3s ease-in-out;
}

После того, как <app-drawer> становится определенным, селектор ( app-drawer:not(:defined) ) больше не соответствует.

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

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

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

Расширение другого пользовательского элемента осуществляется путем расширения определения его класса.

Пример . Создайте <fancy-app-drawer> , который расширяет <app-drawer> :

class FancyDrawer extends AppDrawer {
  constructor() {
    super(); // always call super() first in the constructor. This also calls the extended class' constructor.
    // ...
  }

  toggleDrawer() {
    // Possibly different toggle implementation?
    // Use ES2015 if you need to call the parent method.
    // super.toggleDrawer()
  }

  anotherMethod() {
    // ...
  }
}

customElements.define('fancy-app-drawer', FancyDrawer);

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

Допустим, вы хотите создать более красивую кнопку <button> . Вместо копирования поведения и функциональности <button> лучшим вариантом будет постепенное улучшение существующего элемента с использованием пользовательских элементов.

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

Чтобы расширить элемент, вам необходимо создать определение класса, наследуемое от правильного интерфейса DOM. Например, пользовательский элемент, расширяющий <button> должен наследовать от HTMLButtonElement а не от HTMLElement . Аналогично, элемент, расширяющий <img> должен расширять HTMLImageElement .

Пример — расширение <button> :

// See https://html.spec.whatwg.org/multipage/indices.html#element-interfaces
// for the list of other DOM interfaces.
class FancyButton extends HTMLButtonElement {
  constructor() {
    super(); // always call super() first in the constructor.
    this.addEventListener('click', e => this.drawRipple(e.offsetX, e.offsetY));
  }

  // Material design ripple animation.
  drawRipple(x, y) {
    let div = document.createElement('div');
    div.classList.add('ripple');
    this.appendChild(div);
    div.style.top = `${y - div.clientHeight/2}px`;
    div.style.left = `${x - div.clientWidth/2}px`;
    div.style.backgroundColor = 'currentColor';
    div.classList.add('run');
    div.addEventListener('transitionend', (e) => div.remove());
  }
}

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

Обратите внимание, что вызов метода define() немного меняется при расширении собственного элемента. Обязательный третий параметр сообщает браузеру, какой тег вы расширяете. Это необходимо, поскольку многие теги HTML используют один и тот же интерфейс DOM. <section> , <address> и <em> (среди прочих) используют общий HTMLElement ; и <q> , и <blockquote> используют общий HTMLQuoteElement ; и т. д. Указав {extends: 'blockquote'} браузер узнает, что вы создаете усовершенствованный <blockquote> вместо <q> . Полный список интерфейсов HTML DOM см . в спецификации HTML .

Потребители настраиваемого встроенного элемента могут использовать его несколькими способами. Они могут объявить это, добавив атрибут is="" в собственный тег:

<!-- This <button> is a fancy button. -->
<button is="fancy-button" disabled>Fancy button!</button>

создайте экземпляр в JavaScript:

// Custom elements overload createElement() to support the is="" attribute.
let button = document.createElement('button', {is: 'fancy-button'});
button.textContent = 'Fancy button!';
button.disabled = true;
document.body.appendChild(button);

или используйте new оператор:

let button = new FancyButton();
button.textContent = 'Fancy button!';
button.disabled = true;

Вот еще один пример расширения <img> .

Пример — расширение <img> :

customElements.define('bigger-img', class extends Image {
  // Give img default size if users don't specify.
  constructor(width=50, height=50) {
    super(width * 10, height * 10);
  }
}, {extends: 'img'});

Пользователи объявляют этот компонент как:

<!-- This <img> is a bigger img. -->
<img is="bigger-img" width="15" height="20">

или создайте экземпляр в JavaScript:

const BiggerImage = customElements.get('bigger-img');
const image = new BiggerImage(15, 20); // pass constructor values like so.
console.assert(image.width === 150);
console.assert(image.height === 200);

Разные детали

Неизвестные элементы и неопределенные пользовательские элементы

HTML прост и гибок в работе. Например, объявите <randomtagthatdoesntexist> на странице, и браузер с радостью его примет. Почему нестандартные теги работают? Ответ в том, что спецификация HTML позволяет это. Элементы, не определенные спецификацией, анализируются как HTMLUnknownElement .

Этого нельзя сказать о пользовательских элементах. Потенциальные пользовательские элементы анализируются как HTMLElement , если они созданы с допустимым именем (включая «-»). Вы можете проверить это в браузере, который поддерживает пользовательские элементы. Запустите консоль: Ctrl + Shift + J (или Cmd + Opt + J на ​​Mac) и вставьте следующие строки кода:

// "tabs" is not a valid custom element name
document.createElement('tabs') instanceof HTMLUnknownElement === true

// "x-tabs" is a valid custom element name
document.createElement('x-tabs') instanceof HTMLElement === true

Справочник по API

Глобальный объект customElements определяет полезные методы для работы с пользовательскими элементами.

define(tagName, constructor, options)

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

Пример

customElements.define('my-app', class extends HTMLElement { ... });
customElements.define(
    'fancy-button', class extends HTMLButtonElement { ... }, {extends: 'button'});

get(tagName)

Учитывая допустимое имя тега пользовательского элемента, возвращает конструктор элемента. Возвращает undefined , если определение элемента не было зарегистрировано.

Пример

let Drawer = customElements.get('app-drawer');
let drawer = new Drawer();

whenDefined(tagName)

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

Пример

customElements.whenDefined('app-drawer').then(() => {
  console.log('ready!');
});

Поддержка истории и браузера

Если вы следили за веб-компонентами последние пару лет, вы знаете, что в Chrome 36+ реализована версия API пользовательских элементов, которая использует document.registerElement() вместо customElements.define() . Сейчас это считается устаревшей версией стандарта, называемой v0. customElements.define() — это новая мода, которую производители браузеров начинают внедрять. Он называется Custom Elements v1.

Если вас заинтересовала старая спецификация v0, прочтите статью о html5rocks .

Поддержка браузера

Chrome 54 ( статус ), Safari 10.1 ( статус ) и Firefox 63 ( статус ) имеют пользовательские элементы v1. Edge начал разработку .

Чтобы функция обнаруживала пользовательские элементы, проверьте наличие window.customElements :

const supportsCustomElementsV1 = 'customElements' in window;

Полифилл

Пока поддержка браузеров не станет широко доступной, для Custom Elements v1 доступен отдельный полифил . Однако мы рекомендуем использовать загрузчик webcomComponents.js для оптимальной загрузки полифилов веб-компонентов. Загрузчик использует обнаружение функций для асинхронной загрузки только необходимых заполнений, требуемых браузером.

Установите его:

npm install --save @webcomponents/webcomponentsjs

Использование:

<!-- Use the custom element on the page. -->
<my-element></my-element>

<!-- Load polyfills; note that "loader" will load these async -->
<script src="node_modules/@webcomponents/webcomponentsjs/webcomponents-loader.js" defer></script>

<!-- Load a custom element definitions in `waitFor` and return a promise -->
<script type="module">
  function loadScript(src) {
    return new Promise(function(resolve, reject) {
      const script = document.createElement('script');
      script.src = src;
      script.onload = resolve;
      script.onerror = reject;
      document.head.appendChild(script);
    });
  }

  WebComponents.waitFor(() => {
    // At this point we are guaranteed that all required polyfills have
    // loaded, and can use web components APIs.
    // Next, load element definitions that call `customElements.define`.
    // Note: returning a promise causes the custom elements
    // polyfill to wait until all definitions are loaded and then upgrade
    // the document in one batch, for better performance.
    return loadScript('my-element.js');
  });
</script>

Заключение

Пользовательские элементы дают нам новый инструмент для определения новых HTML-тегов в браузере и создания повторно используемых компонентов. Объедините их с другими примитивами новой платформы, такими как Shadow DOM и <template> , и мы начнем понимать грандиозную картину веб-компонентов:

• Кроссбраузерность (веб-стандарт) для создания и расширения повторно используемых компонентов.
• Для начала не требуется никакой библиотеки или фреймворка. Ванильный JS/HTML FTW!
• Предоставляет знакомую модель программирования. Это просто DOM/CSS/HTML.
• Хорошо работает с другими новыми функциями веб-платформы (Shadow DOM, <template> , пользовательские свойства CSS и т. д.).
• Тесно интегрирован с DevTools браузера.
• Используйте существующие функции доступности.