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

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

Содержание

Какие существуют типы веб-компонентов?
1. Пользовательские элементы
2. Shadow DOM
3. HTML-шаблоны
Сторонние веб-компоненты, доступные

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

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

Custom Elements.
Shadow DOM.
HTML Templates.

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

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

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

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

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

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

HTML

<!DOCTYPE html>

<html>

<head>

    <title>Web Components</title>

</head>

<body>

    <div>

        <h1>Custom Element</h1>

        <test-element></test-element>

    </div>

    <script type="text/javascript">

        class TestElement extends HTMLElement {

            constructor() {

                super();

                // Setting an attribute

                this.setAttribute('name', 'Marry');

            }

            connectedCallback() {

                this.innerHTML =

                    `<div>

                        <p>Hello ${this.getAttribute('name')}!</p>

                        <p>how are you</p>

                    </div>`

            }

        }



        // Register the custom element

        customElements.define('test-element', TestElement);

    </script>

</body>

</html>

Выход:

Читайте также: Полное бинарное дерево

2. Shadow DOM

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

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

HTML

<!DOCTYPE html>

<html>

<head>

    <title>Web Components</title>

</head>

<body>

    <div>

        <h1>Shadow DOM </h1>

        <test-element></test-element>

    </div>

    <script type="text/javascript">

        class TestElement extends HTMLElement {

            constructor() {

                super();

                // Setting an attribute

                this.setAttribute('name', 'ashton');

                // Attaches a shadow DOM tree to

                // <test-element> and returns a reference

                const shadowRoot =

                    this.attachShadow({ mode: 'open' });

            }

            connectedCallback() {

                this.shadowRoot.innerHTML =

                    `<style>

                            div {

                                background:cyan;

                            }

                        </style>

                        <div>

                            <p>Hello ${this.getAttribute("name")}!</p>

                            <p>Nice to meet you</p>

                        </div>`;

            }

        }

        // Register the custom element

        customElements.define('test-element', TestElement);

    </script>

</body>

</html>

Выход:

3. HTML-шаблоны

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

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

HTML

<!DOCTYPE html>

<html>

<head>

    <title>Web Components</title>

</head>

<body>

    <div>

        <h1>HTML Templates</h1>

        <template id="student_template">

            <style>

                li {

                    color: red;

                    list-style: none;

                }

            </style>

            <li>

                <span class="name"></span> —

                <span class="score"></span>

            </li>

        </template>

        <test-element></test-element>

        <ul id="students"></ul>

    </div>

    <script type="text/javascript">

        class TestElement extends HTMLElement {

            constructor() {

                super()

                const shadowRoot =

                    this.attachShadow({ mode: "open" });

            }

            connectedCallback() {

                let students = [

                    { name: "Emma", score: 94 },

                    { name: "Ashton", score: 72 },

                    { name: "Hannah", score: 86 },

                    { name: "Steve", score: 90 },

                    { name: "Amy", score: 75 },

                ]

                students.forEach(student => {

                    let template =

                        document.getElementById("student_template");

                    let templateContent =

                        template.content.cloneNode(true);

                    // Append a clone of the template

                    // content to the shadow root

                    this.shadowRoot.appendChild(templateContent);

                    this.shadowRoot.querySelector('.name')

                        .innerHTML = student.name // Add the name

                    this.shadowRoot.querySelector('.score')

                        .innerHTML = student.score // Add the score

                    // Append the list to the ul students

                    document.getElementById("students")

                        .appendChild(this.shadowRoot)

                })

            }

        }



        // Register the custom element

        customElements.define('test-element', TestElement);

    </script>

</body>

</html>

Выход:

Читайте также: Жирный текст Matplotlib

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

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