この記事では、Shadow DOM内に存在するフィーチャーにタグを付ける方法について説明します。Shadow DOMはウェブアプリケーションに特化した構造で、Pendo が要素を検出して一致させる方法に影響を与えます。
Shadow DOMの使い方を理解することで、タグを正確かつ再利用可能に保つことができます。
前提条件
Shadow DOM内のフィーチャーにタグを付けるには：
- アプリケーションには「open」モードのShadow DOM要素を使用する必要があります。
- Pendo Web SDKのバージョンは2.38.0以上である必要があります。
- Google Chromeなどの開発者ツールでShadow DOMの検査をサポートするブラウザを使用する必要があります。
注：PendoはclosedモードでのShadow DOMをサポートしていません。
Shadow DOMについて
DOM（Document Object Model）は、ウェブページ上のすべての要素を階層的なツリー構造で表現するモデルです。ページ内の各要素（例：div、フォーム、ボタン）は、DOMツリー内のノードとして表示されます。Pendoでフィーチャーにタグを付けると、DOM構造内でその要素がどこにあるかをPendoに伝えることになります。
Shadow DOMは DOM 内の特殊なサブツリーであり、ドキュメントの他の部分から分離されています。再利用可能なコンポーネント（モーダルやドロップダウンなど）のスタイルや動作をカプセル化するためによく使用されます。Shadow DOMは、変更が発生した際に再処理が必要なものを制限することで、パフォーマンスを向上させます。
Shadow DOMはメインDOM内のミニDOMとして機能します。分離されており、正しい構文を使用して明示的にアクセスする必要があります。
以下は、Shadow DOMを含む偽のウェブページのDOM構造を概説した図です。左側には、チャートの送信ボタンを構成するさまざまなクラスとIDが含まれています。右側には、テーブル上のエクスポートボタンを構成するクラスとIDがShadow DOM内に表示されます。
ヒント：詳細については、MDNのShadow DOMの使用に関する記事をご覧ください。
Shadow DOMがタグ付けに重要な理由
フィーチャーのタグ付けはDOM内の要素を識別することで機能するため、Shadow DOM内の要素には異なる構文が必要です。標準セレクターを使用してShadow DOM要素にタグを付けようとすると、一致しません。
以下はその例です：
-
通常のセレクター：
.container .chart #submit-button -
Shadow DOMセレクター：
.container::shadow .table #export-button
::shadow部分は、要素を特定する際にPendoにShadow DOMの境界に入るよう指示します。
アプリがShadow DOMを使用しているかどうかを判断する方法
Shadow DOM内にフィーチャーがあるかどうかを判断する主な方法は2つあります。
提案されたタグ付けルールを確認する
ビジュアルデザインスタジオ（Visual Design Studio）で要素を選択し、提案された一致ルールを確認します。ルールに::shadowが含まれている場合、その要素はShadow DOM 内にあります。
Chromeでページを検証する
- 要素を右クリックし、［検証（Inspect）］を選択してChrome DevToolsを開きます。
- 画面右上の歯車アイコンを選択して［Settings］を開きます。
- ［Preferences > Elements］ で、［Show user agent shadow DOM］ にチェックを入れます。
-
［Elements］パネルで、階層内の
#shadow-root (open)の下にネストされている要素を探します。
Shadow DOM内の要素にタグを付ける
Shadow DOMでフィーチャーにタグを付ける際は、Pendoが提供する構造に基づいた推奨フィーチャー一致ルールから始めることをお勧めします。ただし、フィーチャータグは、必要以上に具体的である可能性があります（同様の機能のグループではなく、Shadow DOM内の機能の個々のインスタンスを参照するなど）。
このような場合は、DOMのShadow要素への参照をそのままにして、具体的すぎるルールを編集する必要があります。例えば、以下の画像では、テーブルと2つのボタン（インポートボタンとエクスポートボタン）を含むページのDOMツリーが表示されています。
こちらは、単一のボタンにタグを付けるための別の例です。推奨されるルールは以下の通りです。
.container::shadow .table #export-button
すべてのボタンに一致するように更新されたルールは次のとおりです。
.container::shadow .table .button
::shadow部分をそのままにして、セレクターの最も具体的な部分だけを調整し、一致範囲を広げたり絞り込んだりすることが重要です。
ネストされたShadow DOM をタグ付けする
アプリケーションに他のShadow DOM内にShadow DOMが含まれている場合、各レイヤーをマッチルールに::shadowを複数回使用して含める必要があります。
次の図の例を参照してください。
こちらは、Shadow DOMの2層を通してタグ付けするもう一つの例です。
.container::shadow .report::shadow .table #export-button
この例では、.report は最初のShadow DOMの内側にあり、.tableおよび#export-buttonは2番目のネストされたShadow DOM内にあります。
ブラウザコンソールを使用してルールを検証する
ブラウザのコンソールで任意のマッチルールをテストして、正しい要素をターゲットにしていることを確認できます。
ルールが期待通りに機能することを確認するには：
- ページを右クリックし、［検証（Inspect）］を選択してChrome DevToolsを開きます。
- ［コンソール（Console）］タブを開きます。
- ブラウザ拡張機能を使用している場合、コンソールの上部にあるドロップダウンメニューからコンテキストをPendo Launcherに変更します。
- 次のコマンドを実行します。
pendo.dom(`.container::shadow .table .button`)- 結果を展開し、各エントリにカーソルを合わせて、正しい要素が強調表示されていることを確認します。
ヒント：この方法は、Shadow DOMセレクターだけでなく、どのPendo一致ルールでも機能します。