Question

我正在制作第一个Web组件，但是shadow dom部分阻止了内容的渲染。基本上，这是一个在右上角带有关闭按钮的框（尚不可用）。

问题在于，hello world文本会暂时出现，然后消失，大概是在渲染阴影dom时。我正在Chrome（70）中查看它。

JavaScript文件：

export class InfoBox extends HTMLElement {

    constructor() {

        super();

        this.sRoot = this.attachShadow({mode: 'open'});

        this.sRoot.innerHTML = `
        <style>
        .close{
            font-family: sans-serif;
            font-size: 24px;
            float: right;
            padding-top: 10px;
            padding-right: 10px;
        }
        </style>
        <div class="close">X</div>
        `;
    };
};

HTML：

<!DOCTYPE html>
<html>
    <head>

        <title>Web component test bed</title>

        <!-- Load the polyfil for Edge. -->
        <script src="./scripts/webcomponents-lite.js"></script>

        <script type=module>

            import { InfoBox } from './scripts/InfoBox.js';
            window.customElements.define('infobox-content', InfoBox);

        </script>

    </head>



    <body>

        <style>

            infobox-content{
                position: absolute;
                top: 100px;
                left: 100px;
                width: 300px;
                height: 100px;
                background-color: #333333;
                color: #ffffff;
            }

        </style>

        <infobox-content>Hello World</infobox-content>


    </body>

Answer 1

解决方案似乎是使用<slot>标签：

this.sRoot.innerHTML = `
        <style>
        .close{
            z-index: 20;
            position: relative;
            font-family: sans-serif;
            font-size: 24px;
            float: right;
            padding-top: 10px;
            padding-right: 10px;
            color: #ffffff;
        }
        </style>
        <slot class="user">Your content here</slot>
        <div class="close">X</div>
        `;

除非有人有更好的解决方案。在许多其他任务中，我仍然必须弄清楚如何将默认样式应用于用户提供的内容。

Answer 2

我不确定是否要设置shadowRoot的innerHTML，因此创建一个元素，然后使用appendChild进行添加。这应该起作用；

export class InfoBox extends HTMLElement {

constructor() {

    super();

    this.attachShadow({mode: 'open'});

};

connectedCallback() {
    console.log("heyo")
    let exampleDiv = document.createElement("div");
    exampleDiv.innerHTML = `
    <style>
    .close{
        font-family: sans-serif;
        font-size: 24px;
        float: right;
        padding-top: 10px;
        padding-right: 10px;
    }
    </style>
    <div class="close">X</div>
    `;

    this.shadowRoot.appendChild(exampleDiv);
}

};

window.customElements.define（'infobox-content'，InfoBox）;

Web组件内容未呈现

2 个答案: