Разработчики уже давно могут определять многократно используемые веб-элементы с помощью таких фреймворков JavaScript, как React и Angular. Однако каждый фреймворк использует свой стандарт, что часто мешает использовать полезные фрагменты кода в разных проектах. Эту проблему можно решить с помощью веб-компонентов, которые представляют собой многоразовые HTML-компоненты, которые можно использовать независимо от фреймворка. Стандартизированный в 2012 году тип веб-элемента теперь поддерживается всеми современными браузерами.
Что такое веб-компоненты?
Веб-компоненты — это блоки кода, в которых заключена основная структура элементов HTML, включая CSS и JavaScript, и которые позволяют использовать этот код в любом месте веб-сайтов и веб-приложений. Эта концепция была разработана рабочей группой Консорциума Всемирной паутины (W3C), который был основан изобретателем паутины Тимом Бернерсом-Ли в 1994 году и с тех пор стремится стандартизировать все основные веб-технологии. Модель веб-компонентов, которая была опубликована в качестве стандарта в 2012 году, предусматривает следующие четыре основные спецификации для создания полезных компонентов HTML:
- Пользовательские элементы: Набор API JavaScript для определения пользовательских элементов.
- Теневой DOM: Набор API JavaScript для добавления элементов DOM.
- Модули ES: Модули для интеграции и повторного использования документов JavaScript
- Шаблоны HTML: Шаблоны разметки, которые не отображаются на отображаемой странице и могут быть использованы в качестве основы для пользовательских элементов.
Стандарт веб-компонентов теперь поддерживается всеми современными браузерами. Все фреймворки и библиотеки JavaScript, работающие с HTML, могут быть использованы для работы с инкапсулированными HTML-тегами.
Почему вы должны использовать веб-компоненты?
Библиотеки и фреймворки, такие как Angular и jQuery, уже много лет входят в число самых важных инструментов для веб-программистов, поскольку они значительно сокращают объем работы при разработке проектов. Однако, насколько практичными и универсальными являются эти базовые структуры кода, они также часто оказываются негибкими, когда речь заходит о межпроектном использовании. Нередко разработчикам приходится переписывать или модифицировать код, если, например, необходимо изменить фреймворк. Именно поэтому Консорциум Всемирной паутины (W3C) представил веб-компоненты и, таким образом, универсальную основу для простого и унифицированного повторного использования кода HTML, CSS и JavaScript.
Поскольку эти универсальные веб-элементы имеют простой и легко изучаемый синтаксис, начинающие программисты пользуются преимуществами стандарта W3C. В последние годы Google работает над созданием библиотек и шаблонов для программирования веб-компонентов и предоставляет их в свободный доступ в рамках «Полимерных проектов».
Обзор элементов веб-компонентов
Модель веб-компонентов основана на четырех основных спецификациях, которые будут более подробно рассмотрены ниже. Кроме того, мы приведем несколько конкретных примеров спецификаций веб-компонентов.
Пользовательские элементы
Пользовательские элементы (т.е. элементы, определяемые пользователем) — это HTML-теги, которые инкапсулируют содержимое HTML, включая команды CSS и скрипты. Они определяются в реестре CustomElementRegistry. Ниже перечислены их ключевые особенности:
- Они заканчиваются закрывающим тегом.
- Их имена являются строками DOM и всегда содержат дефис.
- Их имена могут встречаться только один раз в реестре CustomElementRegistry.
Чтобы создать пользовательский элемент, необходимо использовать JavaScript и метод define. В следующем примере веб-компонентов показан пользовательский элемент, который можно использовать для включения отдельной кнопки:
customElements.define(‘my-button', MyButton, { extends: 'p' });Все, что вам нужно для использования этого элемента в веб-приложении, — это следующий код:
<my-button></my-button>Shadow DOM
Наиболее важной особенностью веб-компонентов является их способность инкапсулировать элементы HTML. API Shadow DOM помогает в этом, позволяя присоединять скрытые деревья DOM к дереву документа. Таким образом, виден только HTML-тег Shadow DOM. Это позволяет добавлять элементы HTML в скрытый DOM без необходимости каждый раз изменять основной DOM. Более подробную информацию об этой технологии, а также примеры применения вы можете найти в нашей статье о Shadow DOM и о том, как они работают.
Модули ES
ES-модули — это модули, которые экспортируют объекты, функции или переменные из файла JavaScript. Эта функция позволяет разделить переменные в файле на группы и ссылаться на них. В настоящее время существует две системы ES-модулей. Если CommonJS изначально была частью Node.js, то последняя система уже включена в JavaScript ES6.
Чтобы экспортировать функцию из библиотеки JavaScript, используйте метод export. В следующем примере вы экспортируете функцию, которая дважды повторяет строку ввода.
// ? lib.bib1
export const repeat = (string) => `${string} ${string}`;
}Теперь вы можете использовать метод import, чтобы использовать экспортированную функцию, когда захотите.
main.mjs
import {repeat} from ‘./lib.my';
repeat (‘hello');
// → ‘hello hello'Шаблоны HTML
Шаблон HTML — это шаблон для файлов HTML. Включенные в него элементы остаются неактивными и не отображаются до тех пор, пока их явно не запросят. Эта особенность означает, что они не оказывают негативного влияния на время загрузки сайта. Таким образом, они являются полезной альтернативой традиционным методам JavaScript.
Для определения HTML-шаблона используется тег <template>. В следующем примере вы создаете шаблон под названием «Мой элемент».
<template id=”my-element">
<p>My element</p>
</template>Чтобы использовать шаблон на сайте, используйте методы JavaScript getElementbyId и content и прикрепите его к DOM.
let template = document.getElementById(‘my-element');
let templateContent = template.content;
document.body.appendChild(templateContent);Как использовать веб-компоненты?
Примеры, описанные выше для веб-компонентов, работают только в том случае, если вы используете отдельные элементы модели веб-компонентов вместе. Ниже приводится упрощенное описание процедуры:
- Создайте класс или функцию JavaScript или экспортируйте их из существующего файла JavaScript с помощью ES-модулей.
- Определите новый пользовательский элемент с помощью метода CustomElementRegistry.define().
- При необходимости или желании подключите скрытый Shadow DOM, чтобы добавить дочерние элементы к вашему настраиваемому элементу.
- Определите HTML-шаблон с помощью тегов <template> и <slot>.
- Используйте созданный пользовательский элемент на своем сайте как обычный HTML-элемент.
Следующий учебник представляет собой простое и понятное введение в программирование веб-компонентов:
В целях защиты вашей конфиденциальности видео не будет загружаться, пока вы не нажмете на него.
Совместимость веб-компонентов с различными версиями браузеров
В предыдущих версиях совместимость браузеров с веб-компонентами не гарантировалась. Однако теперь все текущие версии браузеров поддерживают пользовательские элементы, Shadow DOM, ES-модули и HTML-шаблоны. В следующей таблице представлен обзор совместимости браузеров с различными веб-компонентами.
| Совместим? | Firefox | Chrome | Edge | Safari | Opera |
|---|---|---|---|---|---|
| Пользовательские элементы | Да | Да | Да (версия 76 или выше) | Да | Да |
| Теневой DOM | Да | Да | Да (версия 75 или выше) | Да | Да |
| Модули ES | Да | Да | Да | Да | Да |
| Шаблоны HTML | Да | Да | Да | Да | Да |
Библиотеки, шаблоны и примеры для веб-компонентов
Программирование веб-компонентов может быть сложным, особенно для новичков. Однако в Интернете можно найти множество библиотек с шаблонами и стандартными функциями, а также практические примеры для веб-компонентов, которые облегчат вашу работу.
- Lit Element: Простой базовый класс для создания веб-компонентов.
- Проект Polymer: В рамках проекта Polymer Project компания Google предлагает ряд инструментов для работы с веб-компонентами, например, стартовый набор для программирования приложений с веб-компонентами, библиотеку HTML-шаблонов для JavaScript и множество готовых к использованию элементов.
- Hybrids: Предоставляет простую библиотеку пользовательского интерфейса для создания веб-компонентов.
- Slim.js: Библиотека с дополнительными возможностями для веб-компонентов, использующая наследование на основе классов JavaScript ES6.