在影子 DOM 中使用 <content> 标记答案

【问题标题】：Using the <content> tag in a shadow DOM在影子 DOM 中使用 <content> 标记
【发布时间】：2017-09-03 10:14:32
【问题描述】：

我尝试在没有任何抽象框架的情况下使用 shadow 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 文件运行）

【问题讨论】：

content 元素已被 slot 元素替换。
有关使用slot 元素和slot 属性的示例，请参阅developer.mozilla.org/en-US/docs/Web/HTML/Element/…

标签： html web-component shadow-dom custom-element content-tag

【解决方案1】：

如上面评论中所述，您需要改用slot element 和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>

【讨论】：