ShadowDOM: すべての Web 開発者が知っておくべき過小評価されている宝石

ShadowDOM を理解する: Web コンポーネントを変更しないための鍵

Web 開発の世界では、開発者は多くの場合、再利用可能であり、配置されている環境に依存しないコンポーネントを作成する必要があります。ここで、Shadow DOM が登場します。これにより、開発者は要素の内部構造をカプセル化し、周囲の外部スタイルやスクリプトの影響を受けないようにすることができます。

しかし、なぜこれが重要なのでしょうか?そして、私の製品 LiveAPI のユーザー エクスペリエンスはどのように変化しましたか?それでは、詳しく見ていきましょう!

ShadowDOMとは何ですか?

Shadow DOM は、ホスト要素内で DOM (ドキュメント オブジェクト モデル) の一部を分離する方法を提供する Web 標準です。この分離は、シャドウ ツリーの内部構造とスタイルがページの残りの部分から分離されていることを意味します。簡単に言うと、DOM 内に外界から保護されたミニ DOM を作成するようなものです。

Shadow DOM を使用すると、ページの他の部分と衝突しないようにコンポーネントの HTML、CSS、JavaScript を定義できます。このため、再利用可能、モジュール式、スケーラブルなコンポーネントを構築するために不可欠なツールとなります。

ShadowDOM が LiveAPI の課題をどのように解決したか

LiveAPI は私が開発している製品で、Git リポジトリに接続するだけで API ドキュメントを即座に構築できるようにします。

生成されたドキュメントをインタラクティブにするために、埋め込み可能な LiveAPI ウィジェットを開発しました。ここで私たちの挑戦が始まりました。

初期段階では、LiveAPI ウィジェットをさまざまな Web サイトに埋め込む際に大きな課題に直面しました。私たちのウィジェットは、API リクエストを実行し、結果をユーザーフレンドリーな方法で表示するように設計されています。ただし、Shadow DOM がないと、他のページ スタイルとの競合により、一部のコンテキストでウィジェットが誤動作することがわかりました。

何が問題だったかは次のとおりです:

• スタイルのオーバーライド: ウィジェットの内部スタイルは、ホスト ページのグローバル スタイルによってオーバーライドされることがよくありました。これにより、埋め込まれた場所に応じてウィジェットの外観が異なり、ユーザー エクスペリエンスの低下につながりました。
• JavaScript の競合: ウィジェットの JavaScript がホスト ページのスクリプトと競合する可能性もあり、これにより予期しない動作が発生し、プラットフォーム間で一貫性を維持することが困難になります。

ここで Shadow DOM が助けに来てくれました。ウィジェットをシャドウ ツリー内にカプセル化することで、次のことが保証されました。

1. スタイルは分離されています: ウィジェットの内部 CSS はホスト ページの外部スタイルの影響を受けなくなり、どこに埋め込まれても同じように見えることが保証されます。
2. スクリプトは衝突しません: ウィジェットの JavaScript は独立して実行されるため、ページ上の他のスクリプトと衝突するリスクが軽減されます。

その結果、ウィジェットをどこに配置したかに関係なく、ユーザーにシームレスで一貫したエクスペリエンスを提供することができました。

ShadowDOM の使用方法: コード例を含む簡単なガイド

プロジェクトで ShadowDOM を使用する方法を見てみましょう。

1. Shadow DOM の作成

ShadowDOM の使用を開始するには、既存の要素にシャドウ ルートを作成する必要があります。これを実現するには、Shadow DOM をアタッチする要素でattachShadow() メソッドを呼び出します。

HTML 要素のシャドウ ルートを作成する方法の例を次に示します。

    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>ShadowDOM Example</title>


    <div>



<p>In this example:</p>

<ul>
<li>The attachShadow() method creates a shadow root on the #shadow-host element.</li>
<li>The mode: 'open' option means that the shadow DOM is accessible via JavaScript (you can also use mode: 'closed' to make it inaccessible).</li>
<li>Inside the shadow root, we define some CSS and HTML that will be encapsulated within the shadow DOM.</li>
</ul>

<h4>
  
  
  2. <strong>Accessing the Shadow DOM</strong>
</h4>

<p>If you set the shadow DOM’s mode to open, you can access the shadow tree via JavaScript. Here’s an example of accessing and modifying the shadow DOM:<br>
</p>

<pre class="brush:php;toolbar:false"><script>
    const shadowHost = document.getElementById('shadow-host');
    const shadowRoot = shadowHost.shadowRoot; // Accessing the shadow root

    // Modify the shadow DOM
    const paragraph = shadowRoot.querySelector('p');
    paragraph.textContent = "The shadow DOM content has been updated!";
</script>

このコード内:

• shadowHost.shadowRoot を使用してシャドウ ルートにアクセスします。
• 次に、

  を選択して、Shadow DOM 内のコンテンツを変更します。要素とそのテキストを変更します。

3. Shadow DOM 内のスタイリング

ShadowDOM 内のコンポーネントのスタイルを試してみましょう。これはサイトの残りの部分から隔離されます。

<script>
    const shadowRoot = host.attachShadow({mode: 'open'});

    shadowRoot.innerHTML = `
        <style>
            p {
                color: red;
                font-weight: bold;
            }
            div {
                background-color: lightgray;
                padding: 10px;
                border-radius: 5px;
            }
        
        <div>
            <p>This paragraph is styled inside the shadow DOM.
        </script>