Webコンポーネントを使用したカスタムHTML要素の構築

任意のフレームワークなしで再利用可能な、カプセル化されたHTML要素を構築想像してください!Webコンポーネントを使用すると、我々は確かにそれを作成することができます!

Webコンポーネントとは
Webコンポーネントは、任意のドキュメントまたはWebアプリケーションで使用できるカスタム、再利用可能でカプセル化されたHTML要素を作成することができますWebプラットフォームAPIのセットです.Webコンポーネントは、3つの異なる技術から成ります.

カスタム要素、カスタムHTML要素を作成し、その動作を定義するJavaScript APIのセット.

シャドウDOMは、JavaScriptとスタイルを特定のコンポーネントにカプセル化するために使用されます.

HTMLテンプレートは、ページロードで未使用のマークアップを宣言するために使用されますが、実行時にインスタンス化することができます.

カスタム要素
カスタム要素はWebコンポーネントの基礎です.とCustomElemets APIは、所望の動作とロジックに基づいて新しいHTML要素を作成しています.
カスタム要素を構築するには、VUEでコンポーネントを構築したり、フレームワークの風味を挿入したり、フレームワークを必要とせずに挿入したりするのと似ています.これらのカスタム要素は、HTMLまたはWebアプリケーションで直接任意のドキュメントで使用できます.Webコンポーネントを使用するもう一つの利点は、これらのカスタム要素がブラウザによってサポートされているため、それらは(フレームワークとは対照的に)廃止されないことです.
カスタム要素を構築するには、JavaScriptクラスを拡張する必要がありますHTMLElement クラス名をタグ名で定義します.カスタム要素の基本的なバージョン:
この例が進んでいないという事実にもかかわらず、それは起動ブロックとして使われるのを許します.JavaScriptクラスの拡張HTMLElement コンポーネントをブラウザで登録できるようにします.ドキュメントから使用するには、カスタムHTML要素をタグで定義することが重要です.タグの定義はcustomElements.define('hello-world', HelloWorld) . これらの手順を実行した後、我々は、カスタムの要素を構築し、任意のドキュメントで使用する準備が簡単に書くだけで<hello-world></hello-world> .
その上、拡張HTMLElement HTML要素によって使用されるAPIへのアクセスを許可します.例えば、ライフサイクルイベント.公開された場合、ライフサイクルイベントconnectedCallback コンポーネントがDOMに挿入されたときに実行されます.connectedCallback 最初のコンテンツを要素に追加したり、コンポーネントにレンダリングするデータを取得するための適切な場所です.
注:カスタム要素は常にタグ名にダッシュを持ちますmy-component , hello-world or whats-up . ブラウザのベンダーは、タグ名の競合を避けるためにHTMLタグにダッシュを使わないようにしました.

HTMLテンプレート
HTMLテンプレートを使用すると、後で実行時にインスタンス化されるHTMLを定義します.

<template>
  <p>Hello world</p>
</template>

上記のコードスニペットは、テンプレートの内容がブラウザに表示されない結果、空のページが表示されます.この強力な手法で、DOMにHTMLを定義して保存し、必要に応じてコンテンツを表示できます.テンプレートの内容を表示するにはJavaScriptを使用する必要があります.

  const template = document.querySelector('template');
  const node = document.importNode(template.content, true);
  document.body.appendChild(node);

テンプレートをDOMから取得することから始め、次にテンプレートをnode 変数使用importNode そして最後に挿入したnode DOMに.
The importNode テンプレートの内容をコピーし、その結果、ドキュメントのいくつかの場所で再利用できます.実行後、DOMは以下のようになります.

<template>
  <p>Hello world</p>
</template>
<p>Hello world</p>

テンプレートに関する素晴らしい側面は、どんなHTML、スタイルまたはスクリプトも含む可能性です.結果として、テンプレートはコンポーネントのスタイルを整える良い場所です.

<template id="counter">
  <style>
    button {
      background-color: red;
      color: white;
      padding: 4px;
    }
  </style>
  <button>Click me</button>
  <span id="times">0</span>
</template>

影ドム
DOM(Document Object Model)はHTML文書の構造を表している.DOMは親の子関係を持つドキュメントをモデル化するツリー構造を持っています.
DOM APIはカプセル化をサポートしていません.この特徴は再利用可能で、カプセル化されたカスタム要素を作成することを難しくします.
しかし、カプセル化は影DOMで可能です、そして、カスタム要素にJavaScriptとスタイルを使用するのにアクセス可能です.シャドウDOMを作成するとき、1つのDOM要素にサブツリーが接続されます.新しく作成された影DOMサブツリーは、ドキュメントの残りの部分からカプセル化され、シャドウDOMサブツリーはドキュメントの残りの部分に影響を与えません.
カプセル化を除いて、DOMと影DOMのAPIは同様に働きます.その他の機能querySelector , textContent , getElementById APIからの等はまだ使用できます.
これはシャドウDOMがカスタム要素のルートにどのように接続されているかを例証しますthis.attachShadow({mode: 'open'}) . 現在生成されたShadow DOMは、JavaScript、HTML、およびスタイリングをコンポーネント内にカプセル化します.

<template id="counter">
  <style>
    button {
      background-color: red;
      color: white;
      padding: 4px;
    }
  </style>
  <button>Click me</button>
  <span id="times">0</span>
</template>
<my-counter>
  #shadow-root
    <style>
      button {
        background-color: red;
        color: white;
        padding: 4px;
      }
    </style>
    <button>Click me</button>
    <span id="times">0</span>
</my-counter>

コンポーネントをレンダリングした後、DOMの最終結果を現在の例のように概説します.

ラッピング
任意のスパフレームワークを使用せずに、我々は世界中のユーザーに大きな利点をカプセル化、再利用可能なWebコンポーネントを作成することができます.
Web開発がますます複雑になることを考えると、Webプラットフォームでより多くの開発を投資するのは妥当です.この観点から、私はWebコンポーネントは、Vueや反応などのスパフレームワークに大きな補完であると考えています.彼らはお互いを置き換えることはありませんが、任意のフレームワークなしで、これらのカスタムHTML要素を構築することは非常に適しています.
読書ありがとう!