javascript - 模板（具有插槽行为）和影子 DOM 可以用于非自定义元素吗？

Question

鉴于 Web Components 分别定义了自定义元素、模板和影子 DOM，模板（包括插槽行为）是否可以用于非自定义元素，例如动态创建的元素可重用的自定义元素？一次性元素可以改变它们的影子 DOM 吗？

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

这将有效地呈现为以下内容myElem（尽管它不会在 DOM 中）：

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

这被称为元素的“扁平化 DOM 树”。

有关样式的示例，请参阅此 JSFiddle