JavaScriptによるWebコンポーネント

Webコンポーネントは、カスタム、再利用可能なHTML要素を作成する方法です.Webコンポーネントを使用すると、JavaScriptでカスタムHTML要素を作成できます.ReactJSのようなフレームワーク/ライブラリ、Vuejsも再利用可能な、カスタムコンポーネントを提供しています.しかし、バニラJavaScriptでは、カスタムコンポーネントを作成することもできます.また、他のDOM要素から分離されたカスタム要素を作成できます.
つのことは、Webコンポーネントを学ぶために理解する必要があります:
カスタム要素:JavaScript APIでカスタムDOM要素/タグを作成できます.慣例では、ハイフンを使用してカスタム要素を宣言します.私たちはハイフンを使用して、他のネイティブの要素を混乱させません.
シャドウDOM :プライベートで隔離されたカスタム要素を作成する必要がある場合、シャドウDOMと呼ばれるJavaScript APIのセットを使用します.また、メインドキュメントDOMとは別にレンダリングされます.
HTMLテンプレート:メインレンダリングページに表示されないHTML要素のカップルがあります.これらの要素の内容を実際にレンダリングする必要があるときにレンダリングできます.それらの要素は以下の通りである

カスタム要素

では、カスタム要素の作成方法を見てみましょう.カスタム要素を作成するには、<my-element></my-element> APIの<template>メソッドを呼び出します.

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

ここで、カスタム要素をHtmlElementから拡張してカスタム要素を作成します.

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

<slot>は4つのライフサイクルフックを持っています.defineはそれらのうちの1つです.DOMに要素が挿入される度に実行されます.私たちはそれにマークアップを出すことができます.

影ドム

また、分離コンポーネントを作成することができます.孤立したコンポーネントはメインDOMで混乱しない.これはLiteとドムシャドウDOMと呼ばれるレンダリングされます.メインDOMではすべてがグローバルスコープにあります.それで、衝突とセキュリティ問題は簡単に起こります.シャドウDOMはカスタムコンポーネントのラッパーで、コンポーネントは他のメインDOM要素/コンポーネントから分離されます.任意のメインDOM要素またはカスタム要素でシャドウDOMをアタッチできます.

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

.

HTMLテンプレート

customElementsタグのコンテンツはページに表示されません.それで、あなたはそれの中であなたの内容を書くことができて、それからカスタムコンポーネントで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);

.