Question

鉴于Web Components分别定义了自定义元素，模板和影子DOM，可以在非自定义元素上使用模板（包括插槽行为），例如即时创建的元素，而不希望将其转到定义可重用的自定义元素的麻烦？

Answer 1

是。将模板内容的（副本）添加到（一次性）元素中阴影根将根据一次性元素填充模板的插槽儿童（例如，任何具有slot属性的儿童）如果您将一次性元素定义为a，则会出现这种情况自定义元素。

<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树”。

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

可以在非自定义元素上使用模板（带插槽行为）吗？

1 个答案: