Основы›Веб-компоненты

Веб-компоненты

Стекло поставляется как веб-компонент. Если термин новый, здесь есть всё, что нужно знать.

Что это

Веб-компоненты это стандарт браузера для создания своих HTML-тегов. <video> это тег, внутри которого спрятано много поведения. Веб-компонент это та же идея, только написанная кем-то другим. Это не фреймворк, поэтому учить ничего, кроме HTML, не надо.

Кастомные элементы

Кастомный элемент это тег с дефисом в имени, например <edinstvo-glass>. При импорте пакет сообщает браузеру, что делает этот тег. С этого момента он ведёт себя как любой элемент: его можно стилизовать, вкладывать, добавлять из JavaScript и удалять.

Атрибуты

Настройки это атрибуты, так же как src у картинки. Измените один, и стекло обновится, плавно там, где это уместно.

document.querySelector("edinstvo-glass").setAttribute("frost", "0.8");

Shadow DOM

Внутренние части элемента лежат в shadow DOM, закрытой части страницы. Его стили не сломают ваши, а ваши не сломают его. Ваше содержимое остаётся снаружи, на обычной странице, поэтому это настоящий текст.

Что вам это даёт

Он работает в любом фреймворке, потому что любой фреймворк рендерит HTML. Он не устаревает вместе со стеком: при переходе на другой фреймворк тег остаётся. А дизайн-система может подключить его один раз для всех продуктов. Смотрите Фреймворки.