Question

我正在尝试创建一个附加了影子dom的自定义组件。创建自定义组件并将其添加到附加了阴影dom的dom中，但：host样式未应用

HTML

<html>
<head></head>
<body>
<notify-user>
<h3 slot='title'>New message in #customer-support</h3>
<p>This is shadow dom in action</p>
<button>Reply</button>
</notify-user>
<script src='main.js' type="text/javascript"></script>
</body>
</html>

JS

class Notification extends HTMLElement{
    constructor(){
        super();
    }
    connectedCallback(){
        console.log('notification custom element attached to DOM');
        console.log('this',this);
        let nRoot = this.attachShadow({mode : 'open'});
        nRoot.innerHTML = `
                    <style>
                        :host{
                            background-color : #3498db;
                            border-radius : 5px;
                            line-height: 1.4;
                            width: 25rem;
                        }
                        button {
                            min-width : 5rem;
                            padding: 0.5rem 2rem;
                            margin: 0.2rem;
                            background-color: transparent;
                            border-radius: 2px;
                            border: none;
                            color : white;
                        }
                        p{
                            color : white;
                        }
                    </style>    
                    <div class="wrapper">
                        <button><span>X<span></button>
                        <slot name='title'></slot>
                        <slot></slot>
                        <p>1 minute ago</p>
                    </div>`;

    }
}

customElements.define('notify-user',Notification);

运行时，这是为：host定义的浏览器样式未应用。

有人可以帮忙吗？

Answer 1

此处应用:host选择器。问题在于，您托管的元素没有可见内容要显示。

此问题的一个简单解决方法是将CSS显示设置设置为“阻止”，以使该元素可见：

:host{
    background-color : #3498db;
    border-radius : 5px;
    line-height: 1.4;
    width: 25rem;
    display:block;
}

：host选择器不适用于具有阴影dom的自定义元素

1 个答案: