Share This
Связаться со мной
Крути в низ
Categories
//Веб-компоненты и открытые стандарты

Веб-компоненты и открытые стандарты

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

veb komponenty i otkrytye standarty fe21df0 - Веб-компоненты и открытые стандарты

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

Концепции и использование

Большинство веб-разработчиков сходятся во мнении, что повторное использование кода является хорошей идеей. Раньше это было нелегким делом, особенно для сложных документов HTML, связанных с ними скриптов и стилевого оформления. Приходилось быть осторожным, чтобы многократно использовать написанный для отображения элементов интерфейса код: во многих случаях это приводило к хаосу на странице. Применение веб-компонентов нацелено на разрешение подобных конфликтов. Для их создания используются три технологии.

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

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

CustomElementRegistry – содержит функции, связанные с настраиваемыми элементами. В первую очередь с методом CustomElementRegistry.define() для регистрации новых настраиваемых элементов.

Window.customElements – возвращает ссылку на объект CustomElementRegistry.

Описанные внутри определения класса функции обратного вызова, которые влияют на поведение настраиваемого элемента:

connectedCallback вызывается, когда настраиваемый элемент впервые подключается к DOM документа.

disconnectedCallback вызывается, когда пользовательский элемент отключается от DOM документа.

adoptedCallback вызывается, когда настраиваемый элемент перемещается в новый документ.

attributeChangedCallback вызывается при добавлении, удалении или изменении одного из атрибутов настраиваемого элемента.

2. Shadow DOM

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

veb komponenty i otkrytye standarty 85a8ef3 - Веб-компоненты и открытые стандарты

Далее следуют методы и свойства для работы с этим компонентом:

ShadowRoot представляет корневой узел поддерева теневой модели DOM.

DocumentOrShadowRooе – миксин, определяющий функции, доступные для всех документов и теневых корневых узлов.

Расширения интерфейса Element, связанные с Shadow DOM:

Метод Element.attachShadow() прикрепляет теневое DOM-дерево к указанному элементу.

Свойство Element.shadowRoot возвращает теневой корневой узел, прикрепленный к указанному элементу или значение null, если корневой узел не прикреплен.

Дополнения к интерфейсу Node, относящиеся к ShadowDOM:

Метод Node.getRootNode() возвращает корень объекта контекста, который необязательно включает теневой корневой узел, если он доступен.

Свойство Node.isConnected возвращает логическое значение, указывающее, подключен ли узел (прямо или косвенно) к объекту контекста, например объект Document в случае обычного DOM или ShadowRoot в случае теневого DOM.

Расширения интерфейса Event, относящиеся к теневой модели DOM:

Event.composed возвращает значение типа Boolean, которое указывает, будет ли событие распространяться через границу теневого DOM в стандартное DOM-дерево (true) или нет (false).

Event.composedPath возвращает путь к событию (объекты, для которых будут вызваны обработчики событий). Сюда не включены узлы в теневых деревьях, если теневой корневой узел был создан с закрытым ShadowRoot.mode.

3. Шаблоны HTML

Элементы <template> и <slot> позволяют создавать шаблоны разметки, которых не видно на отображаемой странице. Затем они могут быть повторно использованы несколько раз в качестве основы структуры пользовательского элемента.

<template> содержит фрагмент HTML, который не отображается при первоначальной загрузке документа, но может отображаться во время выполнения сценария JavaScript. Он в основном используется в качестве основы для структур настраиваемых элементов. Связанный с ним интерфейс DOM – HTMLTemplateElement.

<slot> – пространство внутри веб-компонента, которое можно заполнить собственной разметкой, что позволяет создавать отдельные DOM-деревья и представлять их вместе. Связанный с ним интерфейс DOM – HTMLSlotElement.

Основные действия по внедрению веб-компонента

  1. Создаем класс, который описывает функциональность веб-компонента.
  2. Регистрируем новый пользовательский элемент, используя метод. CustomElementRegistry.define(). Передаем ему имя определяемого элемента, а также класс или функцию, в которой он описан. При этом неважно, от какого элемента он наследуется.
  3. При необходимости прикрепляем Shadow DOM к пользовательскому элементу, используя метод Element.attachShadow(). Добавляем дочерние элементы, обработчики событий и т.д. в Shadow DOM с помощью обычных методов DOM.
  4. При необходимости определяем шаблон HTML, используя <template> и <slot>. Снова используем обычные методы DOM для клонирования шаблона и прикрепления его к вашему Shadow DOM.
  5. Используем уже настроенный элемент в любом месте на своей странице точно так же, как обычный HTML-элемент.

Открытые стандарты

Многие разработчики выбирают подход с применением открытых стандартов и типовых решений, включающих веб-компоненты. Преимуществ у него множество:

  • Эти стандарты разработаны открытым веб-сообществом;
  • Они не ломают документ и взаимную совместимость элементов, поэтому у вашего кода неплохое будущее;
  • Почти все браузеры поддерживают эти стандарты, поэтому возникает меньше проблем с кросс-браузерностью.

Все это выглядит логичным, но тут есть о чем задуматься. Чтобы стандарт считался открытым, необходимо согласие всех заинтересованных сторон. Результат должен удовлетворять, если не всех, то большинство разработчиков. Что мы можем увидеть в данном случае? Открываем стандарт на GitHub и смотрим его создателей:

  • Дмитрий Глазков, Google;
  • Хаято Ито, Google;
  • Доминик Куни, Google.

Все разработчики документа работают в одной корпорации. Похожая ситуация наблюдается и в истории коммитов в этом репозитории. Выходит, что все написано на 100% в Google.

Google имеет огромное влияние на открытые стандарты и вносит в них новые фичи ни с кем не советуясь. Остальные создатели браузеров не способны тягаться с гигантом IT-индустрии и постепенно сходят с дистанции. Сначала перешла на Chromium и выбыла из борьбы Opera, а затем и Edge. В итоге мы наблюдаем ситуацию, когда на caniuse 3 из 6 основных браузеров не поддерживают некоторые особенности так называемого открытого стандарта.

Поддержка браузерами и ссылки на популярные на сайты с примерами использования компонентов

Поддержка в браузерах:

  • Firefox (версия 63), Chrome и Opera поддерживают веб-компоненты по умолчанию;
  • Safari не поддерживает ряд функций веб-компонентов, которые в Apple считают вредящим будущему веба хаком;
  • Создатели Edge еще только работают над реализацией веб-компонентов.

Библиотеки и примеры использования:

  • webcomponents.org – сайт с примерами веб-компонентов, учебными пособиями и другой информацией;
  • FAST – это библиотека веб-компонентов, созданная Microsoft;
  • Hybrids – библиотека веб-компонентов с открытым исходным кодом;
  • Polymer – фреймворк от Google с набором полифилов, последних веяний и примеров; на данный момент это самый простой способ кроссбраузерно использовать веб-компоненты.

Выводы

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

  • 9 views
  • 0 Comment

Leave a Reply

Ваш адрес email не будет опубликован. Обязательные поля помечены *

Этот сайт использует Akismet для борьбы со спамом. Узнайте, как обрабатываются ваши данные комментариев.

Связаться со мной
Close