非カスタム要素でテンプレート（スロット動作）を使用できますか？

Question

カスタムコンポーネント、テンプレート、およびシャドーDOMを個別に定義するWebコンポーネントを使用すると、オンザフライで作成するような非カスタム要素（レイアウトに含まれないテンプレート）に対してテンプレートを使用できます再利用可能なカスタム要素を定義する

Answer 1

はい。テンプレートの内容を（一回限りの）要素の シャドールートに追加すると、オフフック要素の 子（例えば、slot属性を持つ子どものいずれか）に基づくテンプレートのスロットが、 となります単発要素を というカスタム要素として定義した場合です。

<template id="t"> 
    <slot name="h">NEED NAME</slot> 
    <h2>Heading level 2</h2> 
    <slot>OTHER CONTENT</slot> 
</template> 

<div id="myElem"> 
    <h1 slot="h">Heading level 1</h1> 
    <p>A paragraph</p> 
</div> 

<script> 
    const $ = (s) => document.querySelector(s); 
    const myElem = $('#myElem'); 
    const shadowRoot = myElem.attachShadow({mode: 'open'}); 
    shadowRoot.appendChild($('#t').content.cloneNode(true)); 
</script> 

JSFiddle

これは実質的に（それはのようなDOMになりませんが）myElemために、次のようにレンダリングされます：

<div id="myElem"> 
    <h1>Heading level 1</h1> 
    <h2>Heading level 2</h2> 
    <p>A paragraph</p> 
</div> 

。これは、要素の「DOMツリーを平坦化と呼ばれています"

スタイリングの例については、this JSFiddle