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

изучать ReactJS Без рубрики

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

Выход:

Читайте также:  5 основных функций Java 17, которые вы должны знать

том примере мы создали пользовательский элемент

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>

Выход:

В этом примере мы создали теневой DOM и прикрепили его

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>

Выход:

Читайте также:  Новый учебный опыт Educative: объявляя о Learning Paths

В этом примере мы создали собственный шаблон для отображения

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

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

Adblock
detector