From 5200717cd8d1acf5b7ff3ca3ed5fc7186a902900 Mon Sep 17 00:00:00 2001 From: Masahiro FUJIMOTO Date: Sun, 29 Sep 2024 16:45:25 +0900 Subject: [PATCH] =?UTF-8?q?2024/08/30=20=E6=99=82=E7=82=B9=E3=81=AE?= =?UTF-8?q?=E8=8B=B1=E8=AA=9E=E7=89=88=E3=81=AB=E5=9F=BA=E3=81=A5=E3=81=8D?= =?UTF-8?q?=E6=9B=B4=E6=96=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../web_components/using_shadow_dom/index.md | 401 ++++++++++++------ 1 file changed, 281 insertions(+), 120 deletions(-) diff --git a/files/ja/web/api/web_components/using_shadow_dom/index.md b/files/ja/web/api/web_components/using_shadow_dom/index.md index d36b5f94b5c512..a6ef38c3aa833b 100644 --- a/files/ja/web/api/web_components/using_shadow_dom/index.md +++ b/files/ja/web/api/web_components/using_shadow_dom/index.md @@ -2,29 +2,28 @@ title: シャドウ DOM の使用 slug: Web/API/Web_components/Using_shadow_DOM l10n: - sourceCommit: de954cbfe1c070de631cdaf91005c7def339c344 + sourceCommit: 9d76a1d4601c8e0042732899a99b6fecde2c919d --- {{DefaultAPISidebar("Web Components")}} -ウェブコンポーネントにおける重要な側面の一つが、カプセル化です。マークアップ構造、スタイル、動作を隠蔽し、コード上の他のコードから分離することで、他の部分でクラッシュすることを防ぎ、コードをきれいにしておくことができます。シャドウ DOM API はこの主要部分であり、隠蔽され分離された DOM を要素に取り付けるための方法を提供しています。この記事ではシャドウ DOM を使う基本を記述しています。 +カスタム要素の重要な側面の一つがカプセル化です。なぜなら、カスタム要素は定義上、再利用可能な機能の一部であり、任意のウェブページにドロップして動作させることが期待されるからです。そのため、ページで実行されるコードが、内部実装を変更することでカスタム要素を誤って壊すことがないようにすることが重要です。シャドウ DOM を使用すると、DOM ツリーを要素に割り当て、ページで実行される JavaScript や CSS からこのツリーの内部を隠すことができます。 -## 高水準のビュー +この記事では、シャドウ DOM の使用法の基本について説明します。 + +## 高水準の視点 この記事は、すでにあなたが [DOM (Document Object Model)](/ja/docs/Web/API/Document_Object_Model/Introduction) の概念を理解していることを想定しています。これはツリー上の構造で、接続されたノードがマークアップ文書（ウェブ文書の場合は通常 HTML 文書）に現れるさまざまな要素や文字列を表します。例として、以下のような HTML の断片を考えてみましょう。 ```html - - Simple DOM example + DOM example
- A red Tyrannosaurus Rex: A two legged dinosaur standing upright like a human, with small arms, and a large head with lots of sharp teeth. + A red Tyrannosaurus Rex.

Here we will add a link to the Mozilla homepage @@ -34,9 +33,22 @@ l10n: ``` -この断片によって以下のような DOM 構造が構成されます。 - -![要素とテキストノードを持つDOMツリー、要素の属性名と内容を含めるために、空でないテキストノードのコンテンツ。](dom-screenshot.png) +このフラグメントは、以下の DOM 構造を生成します（ホワイトスペースのみのテキストノードを除く）。 + +```plain +- HTML + - HEAD + - META charset="utf-8" + - TITLE + - #text: DOM example + - BODY + - SECTION + - IMG src="dinosaur.png" alt="A red Tyrannosaurus Rex." + - P + - #text: Here we will add a link to the + - A href="https://www.mozilla.org/" + - #text: Mozilla homepage +``` _シャドウ_ DOM により、通常の DOM ツリーの要素の下に隠れた DOM ツリーを取り付けることができます。このシャドウ DOM ツリーはシャドウルートから始まり、その下には普通の DOM ツリーと同様に任意の要素を追加することができます。 @@ -51,180 +63,329 @@ _シャドウ_ DOM により、通常の DOM ツリーの要素の下に隠れ シャドウ DOM 内のノードには、シャドウでないノードと全く同じように影響を与えることができます。たとえば、子を追加したり、属性を設定したり、element.style.foo を使用して個々のノードのスタイルを設定したり、 {{htmlelement("style")}} 要素内でシャドウ DOM ツリー全体へのスタイルを追加したりすることができます。違いは、シャドウ DOM 内のどのコードもその外の何かに影響を与えることができず、便利なカプセル化ができることです。 -なお、シャドウ DOM は決して新しいものではありません。ブラウザーは長い間、要素の内部構造をカプセル化するためにこれを使用してきました。例えば、既定のブラウザーコントロールが公開されている {{htmlelement("video")}} 要素を思い浮かべてください。 DOM には `

+I'm not in the shadow DOM ``` -`open` の場合は、シャドウ DOM にメインページに書かれた JavaScript からアクセスできます。以下のように {{domxref("Element.shadowRoot")}} プロパティを利用してアクセスできます。 +`"host"` の要素をシャドウホストとして使用します。このホスト上で {{domxref("Element.attachShadow()", "attachShadow()")}} を呼び出してシャドウ DOM を作成し、このシャドウ DOM には、メイン DOM に対して行うのと同じようにノードを追加することができます。この例では、単一の `` 要素を追加します。 ```js -const myShadowDom = myCustomElem.shadowRoot; +const host = document.querySelector("#host"); +const shadow = host.attachShadow({ mode: "open" }); +const span = document.createElement("span"); +span.textContent = "I'm in the shadow DOM"; +shadow.appendChild(span); ``` -シャドウルートを `mode: "closed"` が設定された状態で取り付けた場合、外部からシャドウ DOM にアクセスすることができません。 `myCustomElem.shadowRoot` は `null` を返します。シャドウ DOM を含む既成の要素、例えば `