Что такое веб-компоненты?
Сегодня более 10% всех загружаемых страниц в Google Chrome - это страницы, содержащие веб-компоненты! Крупные технологические компании, такие как Apple, Google и Facebook, также изучают возможности использования веб-компонентов в своих приложениях и JavaScript фреймворках (например, Angular и React). Довольно впечатляющий результат для технологии, официально представленной в 2011 году и стандартизированной совсем недавно.
Веб-компоненты становятся все более популярными с каждым днем, поэтому сейчас самое время начать изучать эту удивительную технологию!
Что такое веб-компоненты?
Веб-компоненты - это полноценные элементы HTML с пользовательскими шаблонами, API и именами тегов. Они позволяют создавать новые HTML-теги, расширять существующие HTML-теги или расширять компоненты других разработчиков. Они могут быть использованы в любом веб-приложении, совместимы с (или без) любой библиотекой JavaScript или фреймворком (например, React, Angular, Vue.js, Next.js) и будут работать во всех современных браузерах.
Основой для него является API, который предоставляет основанный на веб-стандартах способ создания многократно используемых компонентов, используя только ванильный JavaScript, HTML и CSS.
Четыре самых используемых стандарта:
Давайте рассмотрим эти веб-стандарты более подробно.
1) Пользовательские элементы
Пользовательские элементы - это набор API, который позволяет создавать новые HTML-теги. С помощью этого API мы можем указать парсеру, как правильно создавать элемент и как он будет реагировать на изменения.
Существует два типа пользовательских элементов:
- Автономный пользовательский элемент, который можно использовать для создания совершенно новых элементов HTML.
- Настраиваемый встроенный элемент, который можно использовать для расширения существующих элементов HTML или других веб-компонентов.
Таким образом, API пользовательских элементов очень полезен для создания новых элементов HTML, но также и для расширения существующих или других веб-компонентов.
2) HTML-шаблоны
С помощью шаблонов HTML мы можем создавать многократно используемые фрагменты кода внутри обычного потока HTML, которые не отображаются сразу. Их можно клонировать и вставлять в документ во время выполнения JavaScript и скриптов, при этом ресурсы, находящиеся внутри, не будут извлекаться или выполняться до тех пор, пока шаблон не будет вставлен. Также не имеет значения, сколько раз используется шаблон - он клонируется в браузере и разбирается только один раз, а значит мы имеем большой прирост производительности!
Синтаксис HTML-шаблона выглядит следующим образом:
<template> <h1>Web Components 101</h1> <p>HTML Templates are awesome!</p> </template>
Когда страница рендерится, шаблон пуст. Содержимое хранится в DocumentFragment без контекста просмотра. Это сделано для того, чтобы не мешать остальной части приложения, то есть он отображается только по запросу, снова повышение производительности!
3) Теневой DOM
API Shadow DOM позволяет веб-браузерам изолировать фрагменты DOM (включая весь HTML и CSS) от основного дерева DOM документа. Его внутренняя работа почти аналогична работе <iframe/>, где содержимое изолировано от остальной части документа, с той лишь разницей, что мы по-прежнему имеем полный контроль над ним.
Что такое DOM?
С помощью HTML мы можем легко создавать страницы, которые имеют как представление, так и структуру. Нам, людям, это очень легко понять, но компьютерам требуется немного больше помощи, для этого введена объектная модель документа, или DOM.
Когда браузер загружает веб-страницу, он переводит HTML автора в модель данных, которая хранится в дереве узлов. Это дерево называется DOM и является живым представлением страницы. У него есть свойства, методы и, что самое интересное, им можно манипулировать с помощью... JavaScript!
Теневой DOM скрывает свое содержимое от окружающей среды (процесс называется инкапсуляцией), что предотвращает утечку кода CSS и JavaScript из пользовательского элемента и в него.
4) Модули ES
До появления ES-модулей в JavaScript не было системы модулей, как в других языках программирования. Разработчики прибегали к использованию тегов <script/> для загрузки файлов JavaScript в свои приложения. Позже начали появляться несколько определений модулей (например, CommonJS, AMD и UMD), но ни одно из них не стало стандартом. Все изменилось с появлением ES Modules, и у нас наконец-то появилась стандартная система модулей.
API ES Modules привносит в JavaScript стандартизированную систему модулей, которая обеспечивает способ объединения набора функций в библиотеку, которую можно повторно использовать в других файлах JavaScript.
Веб-компоненты и поддержка браузеров
Какие браузеры поддерживают веб-компоненты? В настоящее время все браузеры Evergreen (Chrome, Firefox и Edge) обеспечивают полную поддержку веб-компонентов. Это означает, что все API (т.е. пользовательские элементы, шаблоны HTML, теневой DOM и ES-модули) полностью поддерживаются!
Этот снимок экрана с сайта WebComponents.org показывает текущую поддержку веб-компонентов браузерами.
Internet Explorer
К сожалению, Internet Explorer 11 не поддерживает веб-компоненты, Microsoft прекратил поддержку IE11 17 августа 2021 года, до этого момента были доступны полифиллы, позволяющие максимально точно имитировать недостающие возможности браузера.
Safari
Safari поддерживает веб-компоненты, но он не поддерживает настраиваемые встроенные элементы, только автономные элементы. К счастью, полифиллы обеспечивают поддержку и для Safari.
Заключение
Современная веб-разработка становится сложнее с каждым днем, и сейчас, когда веб-платформа и ее стандарты созревают, имеет смысл использовать их более интенсивно. Веб-компоненты - это идеальный пример, основанный на 4 API, основанных на веб-стандартах (пользовательские элементы, шаблоны HTML, теневой DOM и ES-модули).
Постоянно растущая популярность Web-компонентов доказывает, что они останутся, и что сейчас самое время начать изучать эту удивительную технологию!
Во втором посте этой серии мы обсудим, почему Web-компоненты настолько удивительны и почему их нужно использовать.
Источник: https://dev.to/stefannieuwenhuis/web-components-101-what-are-web-components-3fdi