В чем разница между веб-компонентами и пользовательскими элементами?

«Веб-компоненты» и «Пользовательские элементы» часто смешиваются, и веб-поиск названия этого вопроса пока не дает особой ясности. Давайте это исправим.

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

Из спецификации:

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

история

Спецификация сейчас на v1 . Предыдущая версия, у0, была поддержана , так как Chrome 33 , и имела различный API, используя document.registerElement- который является в настоящее время не рекомендуется .

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

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

// autonomous element
customElements.define("flag-icon", FlagIcon);
// customized <button> element
customElements.define("plastic-button", PlasticButton, { extends: "button" });

Вторым параметром customElements.define()вызова является имя класса, реализующего поведение элемента. См. Примеры в спецификации для автономных элементов и для настроенных встроенных элементов .

class PlasticButton extends HTMLButtonElement {
  constructor() {
    super();

    this.addEventListener("click", () => {
      // Draw some fancy animation effects!
    });
  }
}

Пользовательские элементы изначально поддерживаются в некоторых современных браузерах и могут быть заполнены для старых браузеров, начиная с Safari 7+ и IE11. Смотрите также v1 polyfill .

Шаблоны и Shadow DOM

Используя шаблоны и Shadow DOM в пользовательском элементе, вы можете упростить обработку и повторное использование элемента.

Шаблоны позволяют использовать HTML для объявления структуры пользовательских элементов:

<!-- Template Definition -->
<template id="fancy-element-template">
  <style>
    ...
  </style>
  <div id="container">
    <p>Some fancy markup goes here...</p>
  </div>
</template>

<!-- Custom Element usage -->
<fancy-element></fancy-element>

Shadow DOM позволяет определять стили, идентификаторы и классы содержимого. Это предотвращает кровотечение CSS или доступ к внутренним элементам пользовательского элемента извне.

customElements.define('fancy-element', class extends HTMLElement {
  constructor() {
    super();
    let shadowRoot = this.attachShadow({mode: 'open'});
    const t = document.querySelector('#fancy-element-template');
    const instance = t.content.cloneNode(true);
    shadowRoot.appendChild(instance);
  }
  ...
});

Учить больше

Статьи разработчиков Google :

• Пользовательские элементы v1: повторно используемые веб-компоненты
• Shadow DOM: автономные веб-компоненты