カスタムタグとShadow DOMでHTMLを強化する

前回の記事では、カスタム タグの作成の基本について説明しました。実際、カスタム タグを使用すると、優れた Web アプリケーションを構築する際の脆弱性の一部が解消されます。ただし、制御の追求は止まらず、従来のカスタム タグではパフォーマンスの高いアプリケーションを構築するのに十分ではありません。たとえば、カスタム タグを追加すると、コード内のスタイル セレクターの数が増える場合があります。これは、パフォーマンスの問題を引き起こす可能性のある多くの要因のうちの 1 つにすぎません。

この問題を解決する 1 つの方法は、Shadow DOM を使用することです。

Shadow DOM は、スコープ付きスタイルを導入することで機能します。特別な命名規則やツールは必要ありません。 Shadow DOM を使用すると、CSS とマークアップを簡単にバンドルできます。さらに、この機能により、プレーンな JavaScript の実装に関する詳細をすべて隠すことができます。

Shadow DOM を使用する理由

Shadow DOM は次のソリューションを提供します:

• DOM 内で独立した要素を許可します。document.querySelectorなどのクエリは、孤立した要素を返しません。
• スコープ指定された CSS を許可します。スコープ付き CSS により、すべてのスタイル ルールがページ内に残ることが保証されます。また、名前の競合や多くの共通クラスのない、よりシンプルな CSS セレクターも意味します。

私たちの例

Shadow DOM をデモするために、tuts-tabsという単純なコンポーネントを使用します。この記事内のすべての参照は、このコードを指します。 Shadow DOM を体験するには、以下のデモをご覧ください:

Shadow DOM について理解する

Shadow DOM とは何ですか?

Shadow DOM を使用したコーディングを開始する前に、通常の DOM を理解する必要があります。

HTML は Web サイトのバックボーンです。わずか数分でページを作成できます。ブラウザでページを開くと、DOM が機能します。ブラウザがページを読み込むと、HTML のデータ モデルへの解析が開始されます。データ モデルは、ノードが HTML の要素を表すツリー構造です。データ モデルは、コードを使用して簡単に変更および操作できます。

欠点は、Web ページ全体、さらには複雑な Web アプリケーションさえも単一のデータ構造として扱われることです。これをデバッグするのは簡単ではありません。たとえば、あるコンポーネントに適用された CSS スタイルが、アプリケーション内の他のコンポーネントに影響を与える可能性があります。

インターフェースの一部を残りから分離したい場合は、iframes を使用します。ただし、iframe は重く、制限が非常に厳しいです。

これが、Shadow DOM が導入された理由です。これは、Web 開発者が DOM 内のさまざまな要素のサブツリーを含めることができる、最新のブラウザーの強力な機能です。 DOM のこれらのサブツリーは、メインのドキュメント ツリーには影響しません。技術的には、これらはシャドウ ツリーと呼ばれます。

シャドウ ツリーにはシャドウ ルートがあり、DOM 内の親に接続されます。この親はシャドウ ホストと呼ばれます。

たとえば、を WebKit を搭載したブラウザに接続すると、スライダーに変換されます。なぜ？これは、サブツリー DOM 要素の 1 つが「スコープ」を理解して外観を変更し、スライダーのような機能を導入するため、スライダーです。これは、Shadow DOM がタブにもたらす利点です。

うわー、それはたくさんの理論があります。ここで、Shadow DOM がどのように実装されるかを確認するためにコードを作成してみるとよいでしょう。

Shadow DOM の使用に関するステップバイステップ ガイド

ステップ 1: Shadow DOM 要素を作成する

element.attachShadow()を使用して、Shadow DOM 要素を作成します。

tuts-tabでは、Shadow DOM 要素の作成に使用されるコードが表示されます。リーリー

.innerHTMLを使用してコンテンツをシャドウ ルートに追加します。これが Shadow DOM を設定する唯一の方法ではないことに注意してください。 Shadow DOM の設定に役立つ API が多数あります。リーリー

customElements.define()を使用して新しいカスタム要素を作成します。前のチュートリアルで述べたように、新しい要素の名前には「-」が含まれている必要があります。tuts-tabsコンポーネントはHTMLElementを拡張します。

当我们扩展HTMLElement时，在构造函数中调用super()非常重要。另外，构造函数是需要创建shadowRoot的地方。

customElements.define('tuts-tabs', class extends HTMLElement { constructor() { super(); // always call super() first in the constructor. // Attach a shadow root to . const shadowRoot = this.attachShadow({mode: 'open'}); ... });

创建shadowRoot后，您可以为其创建 CSS 规则。 CSS 规则可以包含在 `; } ... });