1

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

4

1 回答 1

2

如上面评论中所述，您需要改用slot元素和slot属性。这是与上面完全相同的代码，但使用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>

于 2017-09-04T03:47:37.577 回答