メインコンテンツへスキップ
Shadow DOM は、開発者がウェブページの構造の一部をカプセル化し、別の「シャドウ」セクションを作成できる高度なウェブ開発機能です。メインサイトのコンポーネント内にミニチュアのウェブページを作成するようなものだと考えてください。この「ミニページ」はページの他の部分から独立して動作し、コンポーネント内で使用されるスタイルやスクリプトとメインページで使用されるものとの衝突を防ぎます。 Kameleoon Graphic エディタで作業している場合、Shadow DOM 要素を使用するには DOM（Document Object Model）がどのように機能するかを理解する必要があります。Shadow DOM 要素はデフォルトでメイン DOM に表示されないため、ウィジェットの配置や実験のパーソナライズなどは、標準的な DOM 要素を扱うよりも難しい場合があります。
この機能は、開発経験のあるユーザーに最適です。DOM や Shadow DOM のカプセル化に慣れていない場合は、開発者に相談するか、Web Components と Shadow DOM の基本について、オンラインリソースを参照することをお勧めします。

​
標準セレクタの制限

querySelector() や $() などの標準的な CSS セレクタや JavaScript メソッドは、Shadow DOM 内の要素では動作しません。これらの要素はメインページから隠されており、以下を意味します。
  • Kameleoon Graphic エディタの通常の選択方法を使用して Shadow DOM 内の要素をターゲティングすることはできません。
  • 実験で従来の CSS や jQuery スタイルのセレクタを使用してこれらの要素をターゲティングすると失敗する可能性があります。
  • Shadow DOM の境界を越えるための特別な手順を実行しない限り、変更（テキスト変更、スタイル更新、コンテンツの挿入など）が適用されない場合があります。
Shadow DOM を扱っているかどうかわからない場合は、ブラウザの開発者ツールを使用して要素を検査してください。Elements パネルで #shadow-root を探します。

​
Graphic エディタでの Shadow DOM の操作

ほとんどの場合、ユーザーは Kameleoon Graphic エディタのプレビューゾーンから直接シャドウルート内の要素を選択できます。

​
追加の「Shadow root path」入力が表示される場合

場合によっては、Kameleoon Graphic エディタを使用して Shadow DOM 内の要素を選択または編集しようとすると、Shadow root path というラベルの付いた追加の入力フィールドが表示されることがあります。このフィールドは、ターゲット要素がシャドウツリー内に存在し、標準セレクタを使用してアクセスできないことを Kameleoon が検出したときに表示されます。 Shadow root path を使用すると、ネストされた Shadow DOM 層を通る特定のパスを定義でき、Kameleoon は実験の実行中に要素に到達して変更できます。 モック接続: Graphic エディタはこのパスを使用して、メイン DOM と Shadow DOM 内の要素との接続を「モック」し、要素が通常のページ構造の一部であるかのように視覚的に編集およびプレビューできます。

​
例

​
シャドウルート内のボタンをターゲティングする

Kameleoon Graphic エディタでは、シャドウルート内の要素をターゲティングできます。
  • プレビューゾーンで直接: 要素にアクセス可能な場合は、標準的な要素と同様に、エディタのプレビュー内で選択できます。
  • 「Edit selector」を使用: より複雑な構造の場合は、Edit selector 入力を使用してセレクタパスを手動で構築できます。シャドウルートへのステップインを示すために ::SHADOW-ROOT:: 区切り文字を使用します。

​
DevTools で Shadow DOM を検査する

  1. 要素を右クリック > Inspect。
  2. Elements パネルで、カスタム要素の下に #shadow-root (open) を探します。
  3. 展開して内部の要素を表示します。
例: 
<my-element>
  #shadow-root (open)
    <button class="cta">Click me</button>
</my-element>

​
UI の視覚的な手がかりまたはラベル

Shadow DOM を使用するウェブページを操作する際、Kameleoon Graphic エディタは要素がシャドウルートの一部であるかどうかを識別するためのいくつかの視覚的インジケーターを提供します。

​
Elements パネルでの #shadow-root

エディタの Elements パネルでは、Shadow DOM を使用するコンポーネントは CSS セレクタの一部として #shadow-root を表示します。これは、要素がカプセル化されており、メイン DOM ツリーの一部ではないことを示します。

​
セレクタパネル内の「Shadow root path」フィールド

シャドウルート内の要素を選択すると、Edit CSS selector パネルに追加の Shadow root path 入力が表示されます。この入力により、::SHADOW-ROOT:: 構文を使用してシャドウルートを通る完全なパスを構築できます。

​
Shadow DOM 要素のセレクタパスを記述する方法

Kameleoon Graphic エディタで Shadow DOM 要素を操作する際、標準的な CSS セレクタでは不十分です。シャドウルートを含むセレクタパスを定義する必要があります。 シングルレベルのシャドウルート 内の要素をターゲティングするには、::SHADOW-ROOT:: 区切り文字を使用します。 custom-element::SHADOW-ROOT::.target-button ::SHADOW-ROOT:: 区切り文字は、指定された要素のシャドウルートに入り、標準的な CSS セレクタを使用してその内部でターゲティングを続行するように Kameleoon に指示します。
Kameleoon は現在、シャドウ DOM への 1 レベル のナビゲーションのみをサポートしています。要素が複数のシャドウルート内にネストされている場合、現時点では完全なセレクタパスを使用してターゲティングすることはできません。

​
例

<my-element>
  #shadow-root
    <button class="cta">Click me</button>
</my-element>
セレクタパスは my-element::SHADOW-ROOT::.cta になります。 これは Kameleoon に以下を指示します。
  • my-element 要素を選択する。
  • そのシャドウルートに入る。
  • 内部の .cta ボタンをターゲットにする。

​
制限事項と考慮事項

Shadow DOM を扱う際は、以下の制限を念頭に置いてください。
  • クローズドな Shadow DOM: クローズドなシャドウルート内の要素は、Graphic エディタまたは標準的な JavaScript を使用してアクセスまたは変更できません。
  • 動的またはスクリプト生成コンテンツ: シャドウルート内のコンテンツが動的に生成または更新される場合、変更が期待通りに永続化されないか、効果が現れない可能性があります。
  • スタイリングの制限: シャドウルートの外側から適用されるスタイルは、Shadow DOM のスタイルカプセル化のために内部要素に影響を与えないことがよくあります。CSS ルールはコンポーネントの内部構造内に直接適用する必要があるかもしれませんが、これは Graphic エディタでは不可能です。

​
シャドウルート（クローズド）

一部のウェブコンポーネントはクローズドシャドウルートを使用しており、内部の DOM がブラウザの開発者ツールや JavaScript から完全に隠されています。 .shadowRoot を使用してアクセスできるオープンシャドウルートとは異なり、クローズドシャドウルートはコンテンツを DOM を介して公開 しない ため、以下にはアクセスできません。
  • Graphic エディタ
  • JavaScript ベースのターゲティング
  • セレクタパスまたはカスタムスクリプト
クローズドシャドウルートの内部要素は隠されているため、Kameleoon でそれらを選択または変更することはできません。外側のラッパーコンポーネントが見えていても、内部構造は密閉されたままです。

​
何ができるか？

主要な要素がクローズドシャドウルート内にある場合、開発者の助けが必要です。開発者は次のことができます。
  • オープンシャドウルートを使用してコンポーネントを再構築する。
  • 外部からのターゲティングのために特定の要素を公開する。
  • ターゲティング用のフックまたは回避策を提供する。
ブラウザの DevTools でコンポーネントの内部を検査できない場合は、クローズドシャドウルートを使用している可能性が高いです。

​
ネストされたシャドウルート

Shadow DOM は複数の層に深くネストされる場合があります（たとえば、別のシャドウルート内のシャドウルート）。このケースは Kameleoon の現在のバージョンではサポートされていません。
要素が編集に反応しない場合は、クローズドシャドウルート内にあるか、パスの一部が欠けていないかを再確認してください。

​
シャドウルートへのウィジェットの追加

Kameleoon の Graphic エディタでは、Shadow DOM 要素内にウィジェットを追加することはできません。これは、シャドウルートがエディタが到達できる DOM ノードからコンテンツを分離しているためです。

​
Graphic エディタからのクリックトラッキングの追加

現在、Shadow DOM 要素に対して Graphic エディタから直接クリックトラッキングゴールを追加することはできません。ただし、Kameleoon の API を使用して作成および管理できます。