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