Question

我试图使用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文件运行）

Answer 1

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

实现

＆＃13;

<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>

＆＃13;

在影子DOM

1 个答案: