Light DOM(対象内・対照)
通常 DOM の低コントラスト文。widget が効くはず。
フレームワーク風コンポーネント(ネスト shadow root)
外側 <lit-card> の shadow root の中に内側 <lit-badge> がさらに shadow root を持ちます。二重に閉じたツリー。
⑤ Shadow DOM が手書きの単純な web component だったのに対し、これは
フレームワーク風(Lit/Stencil/Salesforce LWC 相当)の
① reactive re-render、② ネストした shadow root(component の中に component)、
③ <slot> projection を再現します。
検証ポイント: Light DOM / slotted は効くが、ネストした shadow root 内の
テキストには querySelectorAll が貫通しないことを確認。
通常 DOM の低コントラスト文。widget が効くはず。
外側 <lit-card> の shadow root の中に内側 <lit-badge> がさらに shadow root を持ちます。二重に閉じたツリー。