在影子 DOM 中使用 <content> 标签

Question

我试图在没有任何抽象框架的情况下使用影子 DOM，主要是为了了解它的复杂性。我正在使用 webcomponents.js polyfills，所以它可以跨浏览器工作。

我已经成功地创建了一个自定义元素，并设置了它的影子 DOM，但由于某些原因，<content></content> 标签没有包含预期的内容。

我希望此示例呈现为

Shadow DOM
Hello world
More Shadow

但它呈现为

Shadow DOM
More Shadow

我在这里错过了什么？

<script src="webcomponents-lite.min.js"></script>

<test-component>
    <div>Hello world</div>
</test-component>

<template id="test-component">
    <div>Shadow DOM</div>
    <content></content>
    <div>More shadow</div>
</template>

<script>
    class TestComponent extends HTMLElement {
        constructor() {
            super();

            var shadow = super.attachShadow({ mode: 'open' });

            var template = document.getElementById('test-component');
            var clone = document.importNode(template.content, true);
            shadow.appendChild(clone);
        }
    }

    customElements.define('test-component', TestComponent);
</script>

（示例已完成，可以运行作为整个 HTML 文件，前提是您有可用的 webcomponents-lite.min.js，或者可以运行没有支持的浏览器中的 .js 文件）

Answer 1

如上面的评论所述，您需要改用 slot element and slot attribute。这是与上面完全相同的代码，但使用 slot 元素和属性实现：

<test-component>
    <div slot=middle>Hello world</div>
</test-component>

<template id="test-component">
    <div>Shadow DOM</div>
    <slot name=middle></slot>
    <div>More shadow</div>
</template>

<script>
    class TestComponent extends HTMLElement {
        constructor() {
            super();

            var shadow = super.attachShadow({ mode: 'open' });

            var template = document.getElementById('test-component');
            var clone = document.importNode(template.content, true);
            shadow.appendChild(clone);
        }
    }

    customElements.define('test-component', TestComponent);
</script>

在影子 DOM 中使用 <content> 标签

Using the <content> tag in a shadow DOM

html

web-component

content-tag

shadow-dom

custom-element