Shadow DOM を使用せずに WebComponents でスロットを使用する

Question

ShadowDOM を使用せずに WebComponent を構築しようとしています。これまでのところ基本的には動作していますが、今度は Angular の @ViewChild / を使用するなど、他のコンポーネントをラップするコンポーネントを構築したいと考えています。 @ViewChildren 同じです。 (ここでレンダリングに使用するライブラリは、lit-html に似た uhtl です)

リーリー

今このコンポーネントを使用する場合

リーリー

楽しみにしています

リーリー

しかし、スロット部分は機能しません。

ShadowDOM に切り替えると機能しますが、今は ShadowDOM のサンドボックス化に対処しなければならないので、それはしたくありません。

リーリー リーリー

ShadowDOM なしでスロットを動作させることは可能ですか? そうでない場合、コンポーネント内で定義されているものを取得し、それを表示内で使用する別の方法はありますか?

リーリー

は

として表示される必要があります リーリー ＃＃＃助言がありますか？

Answer 1

いいえ、<slot> は ShadowDOM API の一部です

偽装することはできますが、shadowDOM がないため、そのコンテンツを別の場所に保存する必要があります。
おそらく、(軽い) DOM コンテンツを読み取って解析する <template> です。

これは一連の DOM 突然変異です。
ShadowDOM スタイルの使用方法を学ぶ方が簡単かもしれません:

• CSS プロパティ
• 継承可能なスタイル
＃＃＃：：一部＃＃＃
• 構築可能なスタイルシート