課題 2: Closed Shadow DOM
attachShadow({ mode: "closed" }) で生成された Shadow DOM は、 Web 標準により element.shadowRoot が常に null を返す。 Edge も DOMオーバーレイ型ツールも内部要素を取得・補正できない。
🔴 未補正Closed Shadow DOM 内の低コントラスト要素
↑ ホスト要素。内部に低コントラストボタンが存在するが、外部からは見えない。
const host = document.getElementById('closed-shadow-host');
const sr = host.attachShadow({ mode: 'closed' });
sr.innerHTML = '<button style="color:#ccc">...</button>';
// 外部から確認:
console.log(host.shadowRoot); // → 検査中...
閉じたシャドウルート内のボタンはページ上に表示されるが、 Edge / 外部スクリプト / アクセシビリティツールが属性を読み書きできない。
📋 比較: Open Shadow DOMopen モードであれば補正可能
↑ open モードの Shadow DOM。内部ボタンは同様に低コントラストだが、外部からアクセス可能。
const host = document.getElementById('open-shadow-host');
const sr = host.attachShadow({ mode: 'open' });
// 外部から確認:
console.log(host.shadowRoot); // → 検査中...
// Edge は補正スタイルを注入できる:
host.shadowRoot.querySelector('button')
.style.setProperty('color', '#000', 'important');
open モードでは shadowRoot が取得できるため、Edge は内部要素を補正できる。 ただし多くの第三者ウィジェットは closed モードを使用している。
🚫 構造的制約補正不可 — Web 標準による仕様
🔒
shadowRoot === null
/* Edge が試みる補正 */
const host = document.querySelector('#closed-shadow-host');
const shadowRoot = host.shadowRoot; // → null
if (shadowRoot === null) {
// 補正不可。ダッシュボードに警告を表示する。
reportUncorrectable(host, 'closed-shadow-dom');
}
WHATWG 仕様: closed モードの Shadow DOM は外部からのアクセスを意図的に遮断する設計。 Edge・DOM オーバーレイ型ツール・スクリーンリーダーの一部ともアクセス不可。 Siteforce の対応: 「補正不可」フラグをダッシュボードに表示し、 サイト運営者に手動修正を促す（warn-list として管理）。
結論: Closed Shadow DOM は Siteforce・競合 DOMオーバーレイ製品ともに構造的に補正不可（🚫）。 UserWay は公式ヘルプで shadow DOM 内コンテンツへのアクセス不可を認めている [CU-R22-001]。 Siteforce は「全部直る」と謳わず、補正不可対象を明示することで信頼性のシグナルとする。