← Page-Type Lab に戻る
Lit/Stencil/LWC 風 · ReactiveElement · <slot> · 多重ネスト shadow

⑭ Web Component フレームワーク — 未対応(プラットフォーム制約)

⑤ Shadow DOM が手書きの単純な web component だったのに対し、これは フレームワーク風(Lit/Stencil/Salesforce LWC 相当)の ① reactive re-render、② ネストした shadow root(component の中に component)、 ③ <slot> projection を再現します。 検証ポイント: Light DOM / slotted は効くが、ネストした shadow root 内の テキストには querySelectorAll が貫通しないことを確認。

Light DOM(対象内・対照)

通常 DOM の低コントラスト文。widget が効くはず。

フレームワーク風コンポーネント(ネスト shadow root)

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

外側 <lit-card> の shadow root の中に内側 <lit-badge> がさらに shadow root を持ちます。二重に閉じたツリー。