Веб-компоненты получают кроссбраузерную поддержку, сообщество стремительно растет, и появился совершенно новый каталог веб-компонентов, в котором можно найти именно тот компонент, который вам нужен.
Вы когда-нибудь хотели создать собственный автономный JavaScript-компонент, который можно легко использовать в нескольких проектах или делиться им с другими разработчиками независимо от того, какой JavaScript-фреймворк они используют? Возможно, вам подойдут веб-компоненты.
Веб-компоненты — это набор новых функций веб-платформы, позволяющих создавать собственные HTML-элементы. Каждый новый пользовательский элемент может иметь собственный тег, например, <my-button> , и обладать всеми преимуществами встроенных элементов — пользовательские элементы могут иметь свойства и методы, запускать события и реагировать на них, а также иметь инкапсулированные стили и DOM-деревья, чтобы придать им собственный внешний вид.
Предоставляя низкоуровневую компонентную модель на основе платформы, веб-компоненты позволяют создавать и совместно использовать многократно применяемые элементы для всего, от специализированных кнопок до сложных представлений, таких как средства выбора даты. Поскольку веб-компоненты построены на основе API платформы, которые включают мощные примитивы инкапсуляции, вы можете использовать эти компоненты даже в других библиотеках или фреймворках JavaScript, как если бы они были стандартными элементами DOM.
Возможно, вы уже слышали о веб-компонентах — ранняя версия спецификации веб-компонентов — v0 — поставлялась в Chrome 33 .
Сегодня, благодаря широкому сотрудничеству между производителями браузеров, следующее поколение спецификации Web Components — v1 — получает широкую поддержку. Chrome поддерживает две основные спецификации, составляющие Web Components — Shadow DOM и Custom Elements — начиная с Chrome 53 и Chrome 54 соответственно. Safari добавил поддержку Shadow DOM v1 в Safari 10 и завершил реализацию Custom Elements v1 в WebKit . Firefox в настоящее время разрабатывает Shadow DOM и Custom Elements v1, и обе спецификации включены в план развития Edge.
Чтобы определить новый пользовательский элемент, используя реализацию версии 1, достаточно создать новый класс, расширяющий HTMLElement , используя синтаксис ES6, и зарегистрировать его в браузере:
class MyElement extends HTMLElement {...}
window.customElements.define('my-element', MyElement);
Новые возможности версии 1 невероятно мощны — мы подготовили обучающие материалы по использованию Custom Elements v1 и Shadow DOM v1, чтобы помочь вам начать работу.
webcomponents.org
Сообщество веб-компонентов также стремительно развивается. Мы рады запуску обновленного сайта webcomponents.org — центрального ресурса сообщества веб-компонентов — включающего интегрированный каталог, позволяющий разработчикам делиться своими элементами.
На сайте webcomponents.org содержится информация о спецификациях веб-компонентов, обновлениях и контенте от сообщества разработчиков веб-компонентов , а также отображается документация по элементам с открытым исходным кодом и наборам элементов, созданных другими разработчиками.
Вы можете начать создавать свой первый элемент, используя библиотеку, например, Polymer от Google, или просто использовать низкоуровневые API веб-компонентов напрямую. Затем опубликуйте свой элемент на webcomponents.org.
Удачной работы с компонентами!