ネストされたシャドウDOMの繰り返しスロットを再配布DOM

Question

背景：この問題は、Chromeの最新バージョンの拡張機能の開発に関するものです。これは、HTMLインポートやすべてのブラウザで利用できないカスタム要素などのjavascript機能に依存していますが、この場合は問題ありません。

私は次のように簡略化されたHTMLカスタム要素を実装しようとしています：

<custom-el> 
    <span slot="head">Great</span> 

    <span slot="item">Item one</span> 
    <span slot="item">Item two</span> 

    <span slot="foot">done</span> 
</custom-el> 

私は<custom-el>を登録します。要素が作成されるたびに、私のコードのカスタム要素クラスは、シャドウルートを添付して、次のテンプレートから影のルートコンテンツに追加：

<template id="main"> 
    <h1><slot name="head"></slot></h1> 
    <ul> 
     <slot name="item"></slot> 
    </ul> 
    <i><slot name="foot"></slot></i> 
</template> 

は私が責任を二次テンプレートに属性slot="item"各<span>を再配布したいと思います個々のアイテムを描画する：

<template id="sub"> 
    <li><slot name="item"></slot></li> 
</template> 

属性name="item"とスロットの数が固定されていません。データベースから生成され、定期的に変更されます。

私は、スロットの親要素にshadowRootを付けてスロットのスロット属性を設定することで、スロットを再配布できることを理解しています。 <slot name="item" slot="newItem">。しかし、サブテンプレートはアイテムのリストではなく各アイテムのインスタンスをラップする必要があるので、私のケースではこれはうまくいかないと思います。

メイン文書の各項目にシャドウルートとサブテンプレートを添付できます。これは動作しますが、私の好みはメインテンプレートがネストされたshadowRootとテンプレートをインポートして適用することです。このようにして、プライマリ・ドキュメントは、メイン・テンプレートを含むファイルをインポートするだけでよい。コンポーネントの詳細の実装は、メインテンプレートhtmlファイルにカプセル化されています。

また、slotchangeイベントとHTMLSlotElement.assignedNodesメソッドを使用して、スクリプトソリューションを組み合わせることもできます。しかし、私はむしろそのように行かないだろう。

別の方法がありますか？私の実際のユースケースには、より複雑なHTML構造が含まれています。あるいは、私のアーキテクチャやWebコンポーネントの理解に欠陥があるかもしれませんか？

Answer 1

可能であれば、<li>タグを付けたアイテムを軽いDOMに追加するのが最も簡単な方法です。

<span slot=item><li>Item 1</li></span> 
<span slot=item><li>Item 2</li></span> 

あなたが<li>タグを生成するためにJavascriptを使用する必要はありませんこの方法です。