Веб-компоненты: полное руководство

С помощью веб-компонентов разработчики теперь имеют возможность создавать свои собственные HTML-элементы. В этом полном руководстве вы узнаете все, что вам нужно знать. На этой странице мы расскажем, что именно представляют собой веб-компоненты, преимущества их использования и элементы, из которых они состоят.

Затем вы узнаете, как создавать свои собственные компоненты, в двух коротких руководствах — на странице 2 вы узнаете, как создать компонент с помощью шаблонов HTML и API shadowDOM, а на странице 3 вы получите еще один шаг — и вы узнаете, как создать настраиваемый встроенный элемент.

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

Что такое веб-компоненты?

Разработчики любят компоненты. Они являются отличным способом определения блоков кода, которые можно вставлять и повторно использовать везде, где они требуются. За прошедшие годы было предпринято несколько попыток передать эту идею в Интернете, с разной степенью успеха.

Спецификации языка привязки XML Mozilla и компонентов HTML от Microsoft восходят к Internet Explorer 5 почти 20 много лет назад. К сожалению, обе попытки оказались громоздкими, не получили поддержки в других браузерах и в конечном итоге были удалены. Хотя их сегодня и нет, их концепции легли в основу используемых современных подходов.

Фреймворки JavaScript, такие как React, Vue или Angular, придерживаются аналогичного подхода. Одной из основных причин их успеха является способность содержать общую логику в легко разделяемом шаблоне в той или иной форме.

Хотя эти структуры могут улучшить опыт разработчиков, они делают это за счет затрат. Необходимо компилировать такие языковые функции, как JSX, и многие фреймворки полагаются на среду выполнения для управления всеми своими абстракциями. Разве не было бы проще, если бы был способ получить пользу без такого тяжелого веса? Веб-компоненты позволяют нам это делать.

Четыре столпа веб-компонентов

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

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

Это также позволяет веб-компонентам хорошо взаимодействовать с другими фреймворками и библиотеками. Используя те же механизмы связи, что и любой другой элемент, их можно использовать вместе с любой структурой, существующей сегодня или в будущем.

Самое главное, что все они построены на веб-стандартах. Интернет построен на концепции обратной совместимости, и, создав веб-компонент сегодня, он будет работать еще долгие годы.

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

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

Ключевые особенности:

• Определение поведения элемента
• Реагировать на изменения атрибутов
• Дополнить существующие элементы

Когда вы слышите, как люди говорят о «веб-компонентах», довольно часто они имеют в виду механизмы, лежащие в основе — API пользовательских элементов.

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

  class ExampleElement extends HTMLElement {static gethibitedAttributes () {return […]; } attributeChangedCallback (name, oldValue, newValue) {} connectedCallback () {}} customElements.define ("example-element", ExampleElement);  

Каждый настраиваемый элемент имеет аналогичную структуру. Они расширяют существующий класс HTMLElement который обеспечивает основу для того, как должен вести себя элемент.

Внутри есть несколько методов, называемых реакциями которые вызываются в ответ к чему-то об изменении этого элемента. Например, connectedCallback будет вызываться, когда на экране появится новый элемент. Они работают аналогично методам жизненного цикла, используемым в большинстве фреймворков JavaScript.

Обновление атрибутов элемента может изменить его поведение. Когда происходит обновление, срабатывает реакция attributeChangedCallback которая детализирует изменение. Это произойдет только для атрибута, который определен внутри массива ObservableAttributes.

Элемент должен быть определен, прежде чем браузер сможет что-либо с ним сделать. Метод define здесь принимает два аргумента — имя тега и класс, который он должен использовать. Все имена тегов должны содержать символы — чтобы избежать конфликтов с любыми будущими родными элементами.

   Содержимое   

Затем элемент можно записать в любом месте страницы как обычный тег HTML. Как только в браузере определен элемент, он находит любой из этих совпадающих тегов и связывает их поведение с классом в процессе, известном как «обновление».

Существует два типа настраиваемых элементов — «автономные» или «встроенный в индивидуальный». Автономные пользовательские элементы, которые были рассмотрены до сих пор, не связаны ни с одним существующим элементом. Как и

  class CustomInput расширяет HTMLInputElement {} customElements.define ("custom-input", CustomInput, {extends: "input"});