Articles
JavaScript入門
JavaScriptにおけるShadow DOM

JavaScriptにおけるShadow DOM

この記事ではJavaScriptにおけるShadow DOMについて説明します。

YouTube Video

javascript-html-shadow-dom.html 
  1<!DOCTYPE html>
  2<html lang="en">
  3<head>
  4  <meta charset="UTF-8">
  5  <title>JavaScript &amp; HTML</title>
  6  <style>
  7    * {
  8        box-sizing: border-box;
  9    }
 10
 11    body {
 12        margin: 0;
 13        padding: 1em;
 14        padding-bottom: 10em;
 15        font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
 16        background-color: #f7f9fc;
 17        color: #333;
 18        line-height: 1.6;
 19    }
 20
 21    .container {
 22        max-width: 800px;
 23        margin: 0 auto;
 24        padding: 1em;
 25        background-color: #ffffff;
 26        border: 1px solid #ccc;
 27        border-radius: 10px;
 28        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
 29    }
 30
 31    h1, h2 {
 32        font-size: 1.2rem;
 33        color: #007bff;
 34        margin-top: 0.5em;
 35        margin-bottom: 0.5em;
 36        border-left: 5px solid #007bff;
 37        padding-left: 0.6em;
 38        background-color: #e9f2ff;
 39    }
 40
 41    button {
 42        display: block;
 43        margin: 1em auto;
 44        padding: 0.75em 1.5em;
 45        font-size: 1rem;
 46        background-color: #007bff;
 47        color: white;
 48        border: none;
 49        border-radius: 6px;
 50        cursor: pointer;
 51        transition: background-color 0.3s ease;
 52    }
 53
 54    button:hover {
 55        background-color: #0056b3;
 56    }
 57
 58    #output {
 59        margin-top: 1em;
 60        background-color: #1e1e1e;
 61        color: #0f0;
 62        padding: 1em;
 63        border-radius: 8px;
 64        min-height: 200px;
 65        font-family: Consolas, monospace;
 66        font-size: 0.95rem;
 67        overflow-y: auto;
 68        white-space: pre-wrap;
 69    }
 70
 71    .highlight {
 72        outline: 3px solid #ffc107; /* yellow border */
 73        background-color: #fff8e1;  /* soft yellow background */
 74        transition: background-color 0.3s ease, outline 0.3s ease;
 75    }
 76
 77    .active {
 78        background-color: #28a745; /* green background */
 79        color: #fff;
 80        box-shadow: 0 0 10px rgba(40, 167, 69, 0.5);
 81        transition: background-color 0.3s ease, box-shadow 0.3s ease;
 82    }
 83  </style>
 84</head>
 85<body>
 86    <div class="container">
 87        <h2>HTML Sample</h2>
 88        <div id="content"></div>
 89        <div id="shadow-host">Shadow Root Element</div>
 90        <my-card></my-card>
 91    </div>
 92
 93    <div class="container">
 94        <h1>JavaScript Console</h1>
 95        <button id="executeBtn">Execute</button>
 96        <div id="output"></div>
 97    </div>
 98
 99    <div>
100        <h2>Slot Sample</h2>
101        <my-element>
102            <h3 slot="header">Header Content</h1>
103            <p slot="content">Main Content</p>
104        </my-element>
105    </div>
106
107    <script>
108        // Override console.log to display messages in the #output element
109        (function () {
110            const originalLog = console.log;
111            console.log = function (...args) {
112                originalLog.apply(console, args);
113                const output = document.getElementById('output');
114                output.textContent += args.map(String).join(' ') + '\n';
115            };
116            })();
117
118            document.getElementById('executeBtn').addEventListener('click', () => {
119            // Prevent multiple loads
120            if (document.getElementById('externalScript')) return;
121
122            const script = document.createElement('script');
123            script.src = 'javascript-html-shadow-dom.js';
124            script.id = 'externalScript';
125            //script.onload = () => console.log('javascript-html-shadow-dom.js loaded and executed.');
126            //script.onerror = () => console.log('Failed to load javascript-html-shadow-dom.js.');
127            document.body.appendChild(script);
128        });
129    </script>
130</body>
131</html>

Shadow DOM を理解する

Shadow DOM は、Web コンポーネント標準の強力な機能であり、スタイルと DOM 構造をコンポーネント内でカプセル化することを可能にします。この機能により、コンポーネントとメインドキュメントの間でスタイルやスクリプトの干渉を防ぐことができます。

JavaScriptにおけるShadow DOM

Shadow DOM は、通常の DOM 要素に関連付けられたスコープされた DOM ツリーを作成する方法を提供します。このシャドウツリーはドキュメント全体から分離されており、外部のスタイルやスクリプトは影響を与えず、内部のスタイルやスクリプトも外部に漏れ出しません。

例えば、Shadow DOM を使用してカスタムボタンコンポーネントを作成した場合、そのスタイルがページ内の他の要素に干渉することはありません。同様に、同じクラス名を持つ要素があっても競合しません。

また、Shadow DOM の外にある通常の HTML コンテンツのことを、**Light DOM**といいます。

Shadow DOM の利点

  1. カプセル化

    • Shadow DOM はスタイルと機能を分離し、グローバルスタイルやスクリプトとの競合を防ぎます。

  2. 再利用性

    • Shadow DOM を使用して構築されたコンポーネントは、スタイル競合を心配せずに異なるプロジェクト間で再利用可能です。

  3. 保守性

    • カプセル化により、コンポーネントのロジックとスタイルが自己完結型となり、デバッグと保守が容易になります。

Shadow DOM の作成

Shadow DOM を使用するには、HTML 要素にシャドウルートをアタッチする必要があります。以下は簡単な例です。

1// Select the host element
2const hostElement = document.querySelector('#shadow-host');
3
4// Attach a shadow root
5const shadowRoot = hostElement.attachShadow({ mode: 'open' });

説明

このコードには次の要素があります。

  1. ホスト要素

    • シャドウルートがアタッチされる通常の DOM 要素（この場合は #shadow-host）です。

  2. シャドウルート

    • attachShadow を使用して作成されるシャドウツリーのルートです。

  3. モード

    • open モードでは、外部の JavaScript が element.shadowRoot を介してシャドウルートにアクセスできます。一方、closed モードではアクセスできません。

Shadow DOM 内でのスタイリング

Shadow DOM には独自のスタイルスコープがあります。シャドウツリー内で定義されたスタイルは、そのツリー内の要素にのみ適用されます。以下はその例です。

1// Add content to the shadow root
2shadowRoot.innerHTML = `
3    <style>
4        p {
5            color: green;
6        }
7    </style>
8    <p>Scoped style inside Shadow DOM.</p>
9`;

たとえメインドキュメントに競合するスタイルがあったとしても、シャドウツリー内の段落には影響を与えません。

1const content = document.getElementById('content');
2content.innerHTML = `
3    <style>
4        p {
5            color: red;
6        }
7    </style>
8    <p>This is in the main DOM.</p>
9`;
  • Shadow DOM 内の段落は緑色のままで、外部の段落は赤色になります。

Shadow DOM 内でのイベント

Shadow DOM 内のイベントは通常の DOM のイベントと似ていますが、カプセル化のためにイベント伝播の挙動が異なる場合があります。

以下はその例です。

 1// Add an event listener inside Shadow DOM
 2shadowRoot.innerHTML = `
 3    <div id="button-container">
 4        <button id="shadow-button">Click Me</button>
 5    </div>
 6`;
 7
 8shadowRoot.querySelector('#shadow-button').addEventListener('click', (event) => {
 9    console.log('Button : Button clicked inside Shadow DOM');
10    console.log(event.target);
11});
12
13shadowRoot.querySelector('#button-container').addEventListener('click', (event) => {
14    console.log('Container : Button clicked inside Shadow DOM');
15    console.log(event.target);
16});
17
18hostElement.addEventListener('click', (event) => {
19    console.log('Event bubbled to the host element');
20    console.log(event.target);
21});
22
23document.addEventListener('click', (event) => {
24    console.log('Document listener');
25    console.log(event.target);
26});
  • ボタンがクリックされると、両方のリスナーがトリガーされ、イベントバブルの動作が示されます。
  • Shadow DOM内で発生したイベントがLight DOMにバブリングして届いたとき、イベントのtargetは本来の発生元ではなく、ホスト要素に書き換えられます。
    • この例では、Shadow DOM内でのevent.targetは実際のbutton要素ですが、Shadow DOM外では、ホスト要素であるdiv要素に置き換えられています。

Shadow DOMとカスタム要素

Shadow DOMとカスタム要素は、Web Componentsのための重要な要素です。これらは、再利用可能でカプセル化されたUIコンポーネントを作るための技術です。

 1class MyCard extends HTMLElement {
 2    constructor() {
 3        super();
 4        const shadow = this.attachShadow({ mode: 'open' });
 5        shadow.innerHTML = `
 6        <style>
 7            p {
 8                color: blue;
 9            }
10        </style>
11        <p>I'm inside shadow DOM</p>
12        `;
13    }
14}
15
16customElements.define('my-card', MyCard);

メインドキュメントではこのようなHTMLが記述されています。

1<my-card></my-card>
  • カスタム要素の内部にShadow DOMを使うことで、再利用でき、スタイルが壊れにくいコンポーネントを作ることができます。このコードでは、my-cardというタグを作って、MyCardクラスに関連付けています。my-card内の<p>要素は外部のスタイルに影響されず、常に青く表示されます。

スロット: Light DOM コンテンツの分配

スロットを使用すると、Light DOM のコンテンツを Shadow DOM に投影することができます。以下はその例です。

 1class MyElement extends HTMLElement {
 2    constructor() {
 3        super();
 4        const shadow = this.attachShadow({ mode: 'open' });
 5
 6        shadow.innerHTML = `
 7        <style>
 8            .container {
 9                border: 2px solid #ccc;
10                padding: 16px;
11                border-radius: 8px;
12                font-family: sans-serif;
13            }
14            .header {
15                font-size: 1.2em;
16                color: darkblue;
17                margin-bottom: 8px;
18            }
19            .content {
20                font-size: 1em;
21                color: #333;
22            }
23        </style>
24        <div class="container">
25            <div class="header">
26                <slot name="header"></slot>
27            </div>
28            <div class="content">
29                <slot name="content"></slot>
30            </div>
31        </div>
32        `;
33    }
34}
35
36customElements.define('my-element', MyElement);

メインドキュメントではこのようなHTMLが記述されています。

1<my-element>
2    <h3 slot="header">Header Content</h1>
3    <p slot="content">Main Content</p>
4</my-element>
  • Shadow DOM 内の slot 要素は、対応する slot 属性を持つ Light DOM コンテンツを表示します。

結論

Shadow DOM は、堅牢で再利用可能で保守しやすい Web コンポーネントを構築するための重要なツールです。スタイルと機能をカプセル化することで、競合の可能性を減らし、コードベースの管理を容易にします。

YouTubeチャンネルでは、Visual Studio Codeを用いて上記の記事を見ながら確認できます。 ぜひYouTubeチャンネルもご覧ください。

YouTube Video

JavaScriptとHTML