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

Веб -компоненты – это способ создания пользовательских, многоразовых HTML -элементов. Используя веб -компоненты, вы можете создавать пользовательские HTML -элементы с помощью JavaScript. Структура/библиотеки, такие как ReactJS, Vuejs также предлагают многократные пользовательские компоненты. Но с ванильным JavaScript мы также можем создавать пользовательские компоненты. Мы также можем сделать наши пользовательские элементы изолированными от других элементов DOM.

Три вещи должны понять, чтобы изучить веб -компоненты: Пользовательские элементы: Вы можете создать пользовательский элемент/тег DOM с помощью API JavaScript. По соглашению используйте дефис для объявления пользовательских элементов, например: Анкет Мы используем дефис, чтобы он не связывался с другими местными элементами.

Shadow Dom: Когда вам нужно создать частный, изолированный пользовательский элемент, мы используем набор JavaScript API под названием Shadow Dom. Это также отображается отдельно от основного документа Dom.

Шаблоны HTML: У нас есть пара элементов HTML, которые не отображаются на основной странице. Мы можем представить это содержимое элемента, когда нам действительно нужно их отображать, и мы также можем повторно использовать это содержимое. Эти элементы: <Шаблон> , <слот>

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

Теперь давайте посмотрим, как мы можем создать пользовательский элемент. Для создания пользовательского элемента давайте позвоним определять Метод CustomElements API

customElements.define('my-component', CustomComponent);

Теперь давайте расширим класс Custommoponent от HTMleLement, чтобы создать пользовательский элемент.

class CustomComponent extends HTMLElement {
  connectedCallback() {
      this.innerHTML = `
Hello Universe
`;
  }
}
customElements.define('my-component', CustomComponent);

Htmlelement Имеет четыре крючка жизненного цикла. ConnectedCallback один из них. Он выполняется каждый раз, когда элемент вставляется в DOM. Мы можем выпустить наценки, получить данные о зависимости от других компонентов и т. Д.

Тень Дом

Мы также можем создавать изолированные компоненты. Изолированные компоненты не связываются с основным DOM. Он рендесирует в Lite Wait Dom под названием Shadow Dom. В основном доме все в глобальном масштабе. Так что конфликты и проблемы безопасности могут произойти легко. Shadow Dom – это обертка пользовательского компонента, он делает компонент изолированным от других основных элементов/компонентов DOM. Вы можете прикрепить Shadow DOM в любые основные элементы DOM или пользовательские элементы.

class CustomComponent extends HTMLElement {
  constructor() {
    super();
    const shadowRoot = this.attachShadow({mode: 'open'});
    shadowRoot.innerHTML = `
Hello Universe
`;
  }
}
customElements.define('my-component', CustomComponent);

.

Шаблоны HTML

<Шаблон> Содержание тегов не визуализирует на странице. Таким образом, вы можете написать в нем свое содержимое, а затем клонировать эти узлы JavaScript в пользовательских компонентах.

class TestComponent extends HTMLElement {
  constructor() {
    super();

    const templateNode = document.getElementById('my-template');
    const templateContent = templateNode.content;

    this.attachShadow({mode: 'open'}).appendChild(
      templateContent.cloneNode(true)
    );
  }
}

customElements.define('my-template', TestComponent);

.

Оригинал: “https://dev.to/abmsourav/web-components-with-javascript-8c6”