Пользовательские элементы являются частью спецификации стандарта веб-компонентов , наряду с 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 :
