Shadow DOMは、スタイルと構(gòu)造の分離を?qū)g裝するための獨(dú)立したDOMツリーを作成するために使用され、カスタム要素を使用して、カスタムHTML要素を定義して再利用性とセマンティクスを改善します。 1。ShadowDomは、スタイルの分離、構(gòu)造的カプセル化、競(jìng)合の回避を提供し、Attachshadowメソッドを介して作成されます。 2.カスタム要素コンポーネント化は、HTMLELEMENTクラスを継承し、新しいタグを登録することにより実現(xiàn)されます。 3.この2つは、コンストラクターにシャドウDOMを作成するために組み合わせてよく使用され、プラグアンドプレイコンポーネントを?qū)g裝します。 4。アプリケーションシナリオには、構(gòu)築コンポーネントライブラリ、サードパーティコンポーネントのカプセル化、高度に分離されたモジュールが含まれます。 5。命名には短い水平線を含める必要があり、モード選択は外部アクセスとフレームワークのサポートの違いに影響することに注意してください。

Shadow Domとカスタム要素は、現(xiàn)代のWeb開発における2つの非常に重要な概念です。それらはWebコンポーネントの一部であり、主に再利用可能で十分にカプセル化されたUIコンポーネントを構(gòu)築するために使用されます。

簡(jiǎn)単に言えば、 Shadow Domを使用すると、要素內(nèi)に完全に獨(dú)立したDOMツリーを作成でき、ツリーは外部スタイルやスクリプトの影響を受けません。カスタム要素を使用すると、開発者は獨(dú)自のHTML要素を定義し、特定の動(dòng)作と構(gòu)造を提供できます。

使用シナリオから始めて、それらが何であり、どのように使用されるかを見てみましょう。

Shadow Domとは何ですか？

Shadow Domは、隠されたDOMツリーを要素に取り付けるための手法です。あなたはそれを「通常のDOMにネストされた小さな世界」として理解することができます。獨(dú)自のスタイルと構(gòu)造があり、外部要因によって簡(jiǎn)単に影響を受けることはありません。

最も簡(jiǎn)単な例を示すために、ブラウザに付屬する<video></video>または<input type="range">要素を示すために、內(nèi)部構(gòu)造は実際に隠され、これらはShadow Domを介して実裝されます。

ShadowDomを使用することの利點(diǎn)：

• スタイル分離：Shadow Domで書いているCSSは、世界を汚染しません。
• 構(gòu)造カプセル化：コンポーネント內(nèi)の実裝の詳細(xì)は、外側(cè)に表示されません。
• 競(jìng)合を避ける：複數(shù)のコンポーネントは同じクラス名を持つことができますが、異なるスタイルを持つことができ、互いに干渉しません。

シャドウドムを作成する方法は？

 const host = document.queryselector（ '＃myhost'）;
const Shadowroot = host.attachshadow（{mode： 'open'}）;
Shadowroot.innerhtml = `
  <style>
    p {色：赤; }
  </style>
  <p>私はShadow Dom </p>のコンテンツです
`;

これにより、要素にスタイルのDOM構(gòu)造を追加します。

カスタム要素とは何ですか？

カスタム要素はカスタムHTMLタグです。たとえば、 <my-button>というタグを作成してから、特定の機(jī)能とスタイルのあるボタンにレンダリングできます。

その最大の価値は、コードの再利用性とセマンティックページ構(gòu)造の改善にあります。一般的に使用されるU(xiǎn)Iコンポーネントをカスタム要素として記述し、複數(shù)のプロジェクトで直接使用できます。

カスタム要素を定義する方法は？

1. HTMLElementを継承するクラスを作成します
2. クラスで必要な動(dòng)作（コンストラクター、コネクテッドコールバックなど）を定義します
3. この要素をcustomElements.define()に登録する

サンプルコードは次のとおりです。

クラスmybuttonはhtmlelementを拡張します{
  constructor（）{
    素晴らしい（）;
    const shadow = this.attachshadow（{mode： 'open'}）;
    shadow.innerhtml = `
      <ボタン>私をクリックしてください</button>
      <style>
        ボタン{背景：青。色：白;パディング：10px; }
      </style>
    `;
  }
}

customelements.define（ &#39;my-button&#39;、mybutton）;

その後、HTMLで使用できます。

 <my-button> </my-button>

Shadow Domとカスタム要素を一緒に使用できますか？

もちろん！そして、これは組み合わせる最も一般的な方法です。

通常、カスタム要素はコンストラクターにShadow Domを作成し、コンポーネントの構(gòu)造的およびスタイルのカプセル化を?qū)g裝します。この組み合わせにより、「プラグアンドプレイ」コンポーネントを?qū)g際に書くことができます。

一般的なアプリケーションシナリオには以下が含まれます。

• 設(shè)計(jì)システムまたはコンポーネントライブラリ（ボタン、入力ボックスなど）を構(gòu)築する
• サードパーティのコンポーネントをカプセル化する（埋め込みマップ、チャートなど）
• 高いスタイルの分離を必要とするモジュール

メモとヒント

これらの2つの機(jī)能は非常に強(qiáng)力ですが、注意を払うべきことがいくつかあります。

• Shadow Domのスタイルは外側(cè)に浸透しませんが、ホスト要素のスタイルは:hostを通して制御できます。
• mode: 'open'または'closed'を使用して、シャドウドムに外部からアクセスできるかどうかを制御できます。
• カスタム要素には、 my-cardなどの短い水平線-単一の単語には含まれていません。
• プロジェクトがフレームワーク（React、Vueなど）を使用している場(chǎng)合、カスタム要素のサポートはわずかに異なり、追加の構(gòu)成が必要です。

基本的にそれだけです。 Shadow Domとカスタム要素のマスター化は、最新のフロントエンドコンポーネント構(gòu)造をよりよく理解し、構(gòu)築するのに役立ちます。最初は少し馴染みがありませんが、実際には使用するのは複雑ではなく、詳細(xì)を無視するのは簡(jiǎn)単です。

以上がShadow Domとカスタム要素とは何ですか？の詳細(xì)內(nèi)容です。詳細(xì)については、PHP 中國(guó)語 Web サイトの他の関連記事を參照してください。