← Page-Type Lab に戻る
customElements.define · attachShadow({mode:'open'}) · <slot>

⑤ Shadow DOM / Web Components — 未対応

document.querySelectorAll は shadow root を貫通しません。検証ポイント: コントラスト・フォント拡大を ON にして、Light DOM のテキストには効くが、 web component の shadow root 内テキストには効かないことを確認してください。 <slot> 経由の slotted content(Light DOM 由来)は効きます。

Light DOM(対象内)

通常 DOM の低コントラスト文。widget の効果が及ぶ対照。

Web Component(shadow root 内 — 未対応)

slotted タイトル(Light DOM 由来 → 効く)

カード本文は shadow root 内に閉じているため、widget の DOM 走査が届きません。