Когда-нибудь думать о создании веб-страницы, используя HTML с простым заголовком и нижним колонтитулом? Это легко, верно?

Но что, если ваша заявка растет и вам нужно повторить тот же код для заголовка и нижнего колонтитула 5, 10 или скажем, 15 раз?

Помните сухое (не повторяйте себя) Принцип разработки программного обеспечения.

С введением веб-компонентов становится легко решить эту проблему и создавать многоразовые компоненты HTML.

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

Что такое веб-компоненты?

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

Он состоит из трех основных технологий:

1. HTML шаблоны : «Шаблон» и «слот» Элементы позволяют вам записывать шаблоны разметки, которые не отображаются на визуализированной странице. Затем они могут быть повторно использованы несколько раз в качестве основы структуры пользовательского элемента.

2. Пользовательские элементы : Набор apis javascript, которые позволяют определять пользовательские элементы и их поведение, которое затем можно использовать по желанию в вашем пользовательском интерфейсе.

3. Тень Дом : Набор apis javascript для прикрепления капсулированной “тени” DOM DOM к элементу – который отображается отдельно от основного документа DOM – и контролирует связанную функциональность.

В этой статье мы обсудим о Тень Дом реализация.

Тень Дом Относится к способности браузера включать подметку элементов DOM в рендеринг документа, но не в основной документ DOM DOM.

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

Есть некоторые терминологии, связанные с Shadow DOM:

• Теневый хост: Регулярный узел DOM, к которому прикреплен тень Дом.
• Тень дерево: Дом дерева внутри тени Дом.
• Теневая граница: Место, где заканчивается тень DOM, и начинается обычный дом.
• Корень тени: Корневой узел тени дерева.

Давайте понять это простым примером: –

Шаг 1: Создайте определение класса

Для начала в нашем файле header.js мы определяем класс под названием заголовок, который расширяет HTMLELEMENT:

class Header extends HTMLElement {
  constructor() {
    // Always call super first in constructor
    super();

    // write element functionality in here
    ...
  }
}

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

Шаг 2: Создайте корень тени

Сначала мы прикрепим корень тени к пользовательскому элементу:

// Create a shadow root
const shadowRoot = this.attachShadow({ mode: 'open' });

Есть два варианта для ‘Режим’ : ‘открытым’ * & * «Закрыто» Отказ

Режим: Открыть Значит, вы можете получить доступ к Shadow DOM, используя JavaScript, написанный на главном контексте страницы.

Если вы прикрепите корень тени к пользовательскому элементу с * Режим: закрыто * Установите, вы не сможете получить доступ к тени DOM снаружи – myCustomelem.shadowroot возвращает null.

Шаг 3: Создание структуры Shadow DOM

Затем мы используем некоторые манипулирующие DOM для создания внутренней теневой структуры DOM элемента:

const headerTemplate = document.createElement('template');
headerTemplate.innerHTML = `


    

        
 Header - My First Blog on Web Component 
    
`

Шаг 4: Прикрепление Shadow DOM к корню тени

Последний шаг состоит в том, чтобы прикрепить все созданные элементы к корню тени. ConnectedCallback Запускается каждый раз, когда ваш пользовательский элемент вставлен в DOM.

connectedCallback() {
        const shadowRoot = this.attachShadow({ mode: 'closed' });
        shadowRoot.appendChild(headerTemplate.content);
}

Шаг 5: Стайлинг тень Домос

После этого мы создаем элемент стиля и заполните его с некоторыми CSS для его стиля:

const headerTemplate = document.createElement('template');
headerTemplate.innerHTML = `




    

        
 Header - My First Blog on Web Component 
    

`

В приведенном выше примере мы применяем стиль к Shadow DOM, используя элемент стиля, но вполне возможно сделать это, ссылаясь на внешнюю таблицу стилей из элемента «ссылка».

const headerTemplate = document.createElement('template');
headerTemplate.innerHTML = `

Ваш результирующий Header.js Файл будет выглядеть так:

const headerTemplate = document.createElement('template');
headerTemplate.innerHTML = `




    

        
 Header - My First Blog on Web Component 
    

`

class Header extends HTMLElement {
    constructor() {
        // Always call super first in constructor
        super();
    }

    connectedCallback() {
        const shadowRoot = this.attachShadow({ mode: 'open' });
        shadowRoot.appendChild(headerTemplate.content);
    }
}

customElements.define('header-component', Header);

Шаг 6: Импортируйте свой компонент в HTML-файл

Создать index.html Файл и добавьте его пользовательский компонент заголовка на него.

Теперь запустите index.html в браузере:

Поздравляю!! Вы создали свой первый пользовательский HTML-компонент.

Спасибо за чтение. Это первый раз, когда я написал любую статью в блоге. Я надеюсь, что вам понравилось читать это. Пожалуйста, поделитесь этим с вашей сетью. Не забудьте оставить свои комментарии ниже.

Оригинал: “https://dev.to/anuradha9712/create-reusable-web-components-in-html-1llc”