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

Что такое веб-компоненты?
Набор API-интерфейсов веб-платформы, которые позволяют нам создавать инкапсулированные теги HTML для использования на веб-страницах и в веб-приложениях. Веб-компоненты не требуют каких-либо специальных сторонних библиотек или фреймворков, но, безусловно, могут использоваться с ними. Следовательно, веб-компоненты можно использовать где угодно. Веб-компоненты можно использовать в React, Angular и т. д., они также включены в спецификацию HTML и являются нативными.

Какие существуют типы веб-компонентов?
Существует три типа веб-компонентов:

• Пользовательские элементы.
• Тень ДОМ.
• HTML-шаблоны.

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

Шаги для создания пользовательского элемента:

• Создайте класс, который расширяет HTMLElement, используя синтаксис класса
• Зарегистрируйте элемент, используя метод window.customElements.define().

Методы жизненного цикла для пользовательских элементов:

• конструктор(): этот метод обратного вызова вызывается при создании или обновлении экземпляра элемента.
• connectedCallback(): этот метод обратного вызова вызывается каждый раз, когда элемент вставляется в DOM.
• disabledCallback(): этот метод обратного вызова вызывается каждый раз, когда элемент удаляется из DOM.
• acceptCallback(): этот метод обратного вызова вызывается всякий раз, когда пользовательский элемент перемещается в новый документ.
• attributeChangedCallback(attributeName, oldValue, newValue): вызывается, когда атрибут добавляется, удаляется, обновляется или заменяется доступными нам методами, поэтому у нас есть конструктор.

Пример 1: В этом примере мы создали пользовательский элемент с тегом <test-element>.

Выход:

2. Теневой дом:

• Используется для автономных компонентов.
• Содержит стиль и разметку компонента.
• Создает «shadowRoot», на который можно ссылаться позже, когда это необходимо.
• Прикрепляется к элементу с помощью element.attachShadow({mode: open}).
• Метод document.querySelector() не работает для узлов в ShadowDOM

Пример 2. В этом примере мы создали теневой DOM и прикрепили его к нашему пользовательскому элементу.

Выход:

HTML-шаблоны:

• Шаблоны могут содержать как HTML, так и CSS.
• Шаблоны могут быть определены в документе с помощью тега <template>.
• Они используются для определения структур разметки.
• Элемент <template> не отображается на странице, пока мы не прикрепим его к DOM с помощью JavaScript.

Пример 3. В этом примере мы создали собственный шаблон для отображения данных учащихся.

Выход:

Сторонние веб-компоненты, доступные:

• Материальные веб-компоненты. Материальные веб-компоненты представляют собой версию веб-компонентов платформы Material UI, которая разработана и разработана Google.
• Bootstrap в веб-компонентах: Bootstrap — это потрясающая среда CSS, которая позволяет вам быстро разработать красивый и отзывчивый веб-сайт, используя предварительно стилизованный компонент. Если вы хотите использовать Bootstrap в своем веб-компоненте на основе ShadowDom, вы должны включить загрузочный CSS в каждый компонент. Это можно сделать, просто используя тег <link> , ссылающийся на Bootstrap CSS в вашем ShadowDOM.
• Elix: Elix — это открытый источник готовых к использованию веб-компонентов для распространенных шаблонов пользовательского интерфейса, таких как карусели, кнопки, меню и т. д. Вы также можете настраивать веб-компоненты, предоставляемые ELix, или даже создавать свои собственные веб-компоненты, расширяющие уже реализованные компоненты Elix.