Question

我想获取模板内容，将其注入具有阴影DOM的自定义元素中，并通过span选择器将样式应用于template内的::slotted，但这似乎不起作用预期。

<!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 CSS没有得到应用。

shadowRoot
    .appendChild(document.createElement('slot'))
    .appendChild(document.getElementById('template').content.cloneNode(true));

直接在自定义元素中附加子项span时，会应用font-size。

const span = document.createElement('span');
span.innerHTML = 'asdffad';
shadowRoot
    .appendChild(document.createElement('slot'))
    .appendChild(span);

Answer 1

您已将跨度附加到阴影dom。如果要将其插入<slot>位置，则应将其添加到light 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()方法。

当您查看开发人员控制台中的 Elements 窗格时，可以看到将HTML片段或元素添加到<slot>和轻型DOM中的结果是不同的。

将内容从<template>注入到<slot>

1 个答案: