Javascript 从<；模板>；进入<；插槽>；_Javascript_Web Component_Shadow Dom_Custom Element_Html Templates

Javascript 从<；模板>；进入<；插槽>；

javascript

Javascript 从<；模板>；进入<；插槽>；,javascript,web-component,shadow-dom,custom-element,html-templates,Javascript,Web Component,Shadow Dom,Custom Element,Html Templates,我想获取模板内容，将其注入带有阴影DOM的自定义元素，并通过：：slotted选择器将样式应用到span内部模板中，但这似乎无法按预期工作 <!doctype html> <html lang="en"> <head> <template id="template"> <span>element from template</span> </templat

我想获取模板内容，将其注入带有阴影DOM的自定义元素，并通过

：：slotted

选择器将样式应用到

span

内部

模板中，但这似乎无法按预期工作
<!doctype html>
<html lang="en">
    <head>
        <template id="template">
            <span>element from template</span>
        </template>
    </head>
    <body>
        <script type="text/javascript">
            class WithShadowDom extends HTMLElement {
                constructor() {
                    super();
                    const shadowRoot = this.attachShadow({mode: 'open'});
                    shadowRoot.innerHTML = `
                        <style>
                            ::slotted(span) {
                                font-size: 25px;
                            }
                        </style>
                    `;
                    shadowRoot
                        .appendChild(document.createElement('slot'))
                        .appendChild(
                            document.getElementById('template').content.cloneNode(true)
                        );
                }
            }
            window.customElements.define('with-shadow-dom', WithShadowDom);
            const myCustomElement = document.createElement('with-shadow-dom');
            document.body.appendChild(myCustomElement);
        </script>
    </body>
</html>

当在自定义元素中直接附加子元素时，font size
将被应用
const span = document.createElement('span');
span.innerHTML = 'asdffad';
shadowRoot
    .appendChild(document.createElement('slot'))
    .appendChild(span);

您已将跨度附加到阴影dom。如果希望将其插入到
位置，则应将其添加到灯光dom中
connectedCallback() {
    //template content
    this.appendChild(document.getElementById('template').content.cloneNode(true));
    //span element
    const span = document.createElement('span');
    span.innerHTML = 'asdffad';
    this.appendChild(span);
}

注意：您不应该在constructor（）
中将某些内容附加到light DOM中。而是在connectedCallback（）
方法中执行此操作
当您查看开发人员控制台中的“元素”窗格时，您可以看到，当您将HTML片段或元素添加到
和light DOM中时，结果是不同的。
但我将span
作为插槽的子级添加，而不是直接作为shadowRoot
的子级添加，因此，它实际上被添加到灯光DOM中。此外，我不是在抱怨span
的行为，它的工作原理与我预期的一样，我的问题是关于模板的问题。模板中的span
元素不采用：slotted（span）@YuriyKravets否中定义的样式。您不能通过该元素向灯光DOM添加内容（模板内容或span）。这行不通。您应该直接将其添加到灯光dom中。
connectedCallback() {
    //template content
    this.appendChild(document.getElementById('template').content.cloneNode(true));
    //span element
    const span = document.createElement('span');
    span.innerHTML = 'asdffad';
    this.appendChild(span);
}