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

Question

鉴于 Web Components 分别定义了自定义元素、模板和影子 DOM，模板（包括插槽行为）是否可以用于非自定义元素，例如动态创建的元素，而这些元素并不适用？不想麻烦地定义一个可重用的自定义元素？一次性元素的影子 DOM 可以改变吗？

Answer 1

是的。将模板内容的（副本）添加到（一次性）元素的 shadow root 将根据一次性元素的子项（例如，任何具有 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>

这称为元素的"flattened DOM tree"。

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

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

Can templates (with slot behavior) and the shadow DOM be used on non-custom elements?

javascript

html

shadow-dom

html-templates