---
title: "Shadow DOMとは？HTML共有・AI生成サイトでの意味をやさしく解説"
description: "共有したAI生成HTMLでShadow DOMによるスタイルの効かない問題に直面した開発者・Web担当者向け。Shadow DOMの仕組み、HTMLファイル共有時のスタイル調整、DevToolsでの確認方法を説明する。"
image: "https://giga-site.com/og-image.png"
canonical: "https://giga-site.com/articles/what-is-shadow-dom-html-share"
markdown: "https://giga-site.com/articles/what-is-shadow-dom-html-share/index.md"
category: "用語解説"
publishedAt: "2026-06-25"
updatedAt: "2026-06-25"
readingMinutes: 4
---
# Shadow DOMとは？HTML共有・AI生成サイトでの意味をやさしく解説

AIで生成したWebコンポーネントをHTMLに埋め込んで共有したとき、「スタイルが効かない」「DevToolsで要素が見つからない」という報告を受けることがある。この挙動の原因はShadow DOMというブラウザ機能にある。HTMLを安全に共有・レビューするうえで、スタイルのカプセル化という概念を理解しておくと対処が速くなる。

> Source HTML: https://giga-site.com/articles/what-is-shadow-dom-html-share
> Article index: https://giga-site.com/articles/index.md

## ひとことで言うと

Shadow DOMとは、Web ComponentsのUI部品が持つ独立したDOM空間のことだ。通常のDOMとは分離されたツリーを持ち、外部のCSSがShadow内の要素に干渉せず、逆にShadow内のスタイルが外に漏れることもない。この「スタイルのカプセル化」が特徴だ。

AI生成のLitコンポーネントや組み込みブラウザUI（`<input type='range'>`のつまみ部分など）はShadow DOMを内部で使う。受け取った人がDevToolsの要素パネルを見ると「#shadow-root」という節が現れ、その内部に実際の要素が格納されている。

- 相手がログインなしで開ける状態か確認する
- PCとスマホで最低1回ずつ表示を確認する
- 内部情報・個人情報・不要な外部送信が残っていないか見る
- レビュー期限と修正時の差し替え方を決めておく

## HTML共有で関係する場面

AI生成のUIコンポーネントをHTMLに組み込んで共有したとき、親ページのCSSで`button { color: red; }`と書いてもShadow内のボタンには適用されない。受け取った側が「ブランドカラーになっていない」と指摘してきた場合、まずShadow DOMの境界が原因かを確認するのが先決だ。

Shadow DOMを使ったコンポーネントのスタイルを外から調整するには、CSSカスタムプロパティを使う。コンポーネント側で`color: var(--btn-color, #333);`のように変数を受け取る実装があれば、親CSSで`--btn-color: #0057FF;`と指定するだけでカラーを変更できる。この変数はShadow境界を超える。

## よくある誤解

「Shadow DOMの内部はJavaScriptからも操作できない」という誤解がある。`element.shadowRoot`プロパティを使えばJS側からShadow内の要素にアクセスできる。ただし`mode: 'closed'`で作られたShadow Rootは外からのアクセスが制限される。AI生成コードではほとんどが`open`モードだ。

「Shadow DOMを使うと印刷やPDF化でスタイルが崩れる」という声があるが、現行のChrome/Edgeはprint CSSとShadow DOMを問題なく処理する。崩れる場合はShadow内で`@media print`が考慮されていないことが多く、Shadow内のスタイルに印刷用CSSを追加すれば対応できる。

## 安全に使うための注意点

Shadow DOMは視覚的なカプセル化を提供するが、セキュリティ境界ではない。Shadow内のデータもJSから容易に取得できるため、「Shadow DOMに隠したから安全」という考えは危険だ。パスワードやAPIキーをShadow内のDOMに入れても、それは保護されない。

Content Security Policy（CSP）はShadow DOMの内外を区別せずページ全体に適用される。共有先のサーバーにCSPヘッダーが設定されている場合、Shadow内のinlineスタイルもブロックされる可能性がある。ギガサイト便などのサービスを使う際はCSP設定を確認し、`style-src 'unsafe-inline'`が許可されているかをチェックする。

## よくある質問

### DevToolsでShadow DOMの内部要素を確認するにはどうすればいいですか？

ChromeのDevToolsでElements（要素）パネルを開き、コンポーネントの要素を展開すると「#shadow-root (open)」という行が表示されます。それを展開すると内部のDOM構造が確認できます。

### 共有したHTMLのShadow DOM内の文字色を外から変えたいのですが、CSSが効きません。どうすればいいですか？

コンポーネントがCSSカスタムプロパティ（変数）に対応しているか確認してください。対応していれば親ページのCSSで変数を定義するだけで変更できます。対応していない場合はコンポーネントのソースを直接編集する必要があります。

### Shadow DOMを使ったコンポーネントはSEO上問題がありますか？

GooglebotはShadow DOMの内部コンテンツもクロールできます。ただしJSが実行されないと表示されないコンテンツはインデックスが遅れる場合があります。レビュー共有用途ではSEOへの影響はほぼ考慮不要です。

## 関連記事

- [SRI（Subresource Integrity）とは？HTML共有・AI生成サイトでの意味をやさしく解説](https://giga-site.com/articles/what-is-sri-html-share/index.md)
- [Referrer-Policyとは？HTML共有・AI生成サイトでの意味をやさしく解説](https://giga-site.com/articles/what-is-referrer-policy-html-share/index.md)
- [Permissions-Policyとは？HTML共有・AI生成サイトでの意味をやさしく解説](https://giga-site.com/articles/what-is-permissions-policy-html-share/index.md)
- [Same-Origin Policyとは？HTML共有・AI生成サイトでの意味をやさしく解説](https://giga-site.com/articles/what-is-same-origin-policy-html-share/index.md)
- [sandbox付きiframeとは？HTML共有・AI生成サイトでの意味をやさしく解説](https://giga-site.com/articles/what-is-sandbox-iframe-html-share/index.md)
- [CORSプリフライトとは？HTML共有・AI生成サイトでの意味をやさしく解説](https://giga-site.com/articles/what-is-cors-preflight-html-share/index.md)

```json
{
  "@context": "https://schema.org",
  "@type": "Article",
  "headline": "Shadow DOMとは？HTML共有・AI生成サイトでの意味をやさしく解説",
  "description": "共有したAI生成HTMLでShadow DOMによるスタイルの効かない問題に直面した開発者・Web担当者向け。Shadow DOMの仕組み、HTMLファイル共有時のスタイル調整、DevToolsでの確認方法を説明する。",
  "datePublished": "2026-06-25",
  "dateModified": "2026-06-25",
  "mainEntityOfPage": "https://giga-site.com/articles/what-is-shadow-dom-html-share",
  "url": "https://giga-site.com/articles/what-is-shadow-dom-html-share",
  "inLanguage": "ja",
  "image": "https://giga-site.com/og-image.png",
  "articleSection": "用語解説",
  "author": {
    "@type": "Organization",
    "name": "ギガサイト便"
  },
  "publisher": {
    "@type": "Organization",
    "name": "ギガサイト便"
  },
  "mainEntity": [
    {
      "@type": "Question",
      "name": "DevToolsでShadow DOMの内部要素を確認するにはどうすればいいですか？",
      "acceptedAnswer": {
        "@type": "Answer",
        "text": "ChromeのDevToolsでElements（要素）パネルを開き、コンポーネントの要素を展開すると「#shadow-root (open)」という行が表示されます。それを展開すると内部のDOM構造が確認できます。"
      }
    },
    {
      "@type": "Question",
      "name": "共有したHTMLのShadow DOM内の文字色を外から変えたいのですが、CSSが効きません。どうすればいいですか？",
      "acceptedAnswer": {
        "@type": "Answer",
        "text": "コンポーネントがCSSカスタムプロパティ（変数）に対応しているか確認してください。対応していれば親ページのCSSで変数を定義するだけで変更できます。対応していない場合はコンポーネントのソースを直接編集する必要があります。"
      }
    },
    {
      "@type": "Question",
      "name": "Shadow DOMを使ったコンポーネントはSEO上問題がありますか？",
      "acceptedAnswer": {
        "@type": "Answer",
        "text": "GooglebotはShadow DOMの内部コンテンツもクロールできます。ただしJSが実行されないと表示されないコンテンツはインデックスが遅れる場合があります。レビュー共有用途ではSEOへの影響はほぼ考慮不要です。"
      }
    }
  ]
}
```