在 shadow DOM 元素中包含 shadow DOM 子节点答案

【问题标题】：having shadow DOM children inside shadow DOM element在 shadow DOM 元素中包含 shadow DOM 子节点
【发布时间】：2020-03-16 10:49:32
【问题描述】：

我正在尝试查看是否可以主要使用 shadow DOM 元素构建网站，一切正常，直到我尝试将 shadow DOM 元素放入另一个 shadow DOM 元素中

喜欢这个

<body>
    <nik-header background="#16a085" title="Custom HTML Components" color="#1c2127"></nik-header>
    <nik-content background="#1c2127">
        <button>nerd</button>
        <nik-card title="nik"></nik-card>
    </nik-content>
</body>

我的组件代码是这样的


//components.js

class nikHeader extends HTMLElement{
    constructor() {
        super();
        var title = this.getAttribute('title');
        var backgroundColor = this.getAttribute('background');
        var textColor = this.getAttribute('color');
        if(backgroundColor == null){
            backgroundColor = "white"
        }if(textColor == null){
            textColor == "black"
        }
        this._root = this.attachShadow({mode: 'open'});
        this._root.innerHTML = `
        <div class="shadow-nik-header">
            <center><h1>${title}</h1><center>
        </div>

        <style>

            .shadow-nik-header{
                position:absolute;
                right:0;
                left:0;
                top:0;
                height:80px;
                background:${backgroundColor};
                font-family:helvetica;
                color:${textColor}
            }
        </style>

        `;
    }
}
class nikContent extends HTMLElement{
    constructor(){
        super();
        var backgroundColor = this.getAttribute('background');
        var textColor = this.getAttribute('color');
        if(backgroundColor == null){
            backgroundColor = "white"
        }if(textColor == null){
            textColor == "black"
        }
        this._root = this.attachShadow({mode: 'open'});
        this._root.innerHTML = `
        <div class="shadow-nik-content">

        </div>

        <style>

            .shadow-nik-content{
                position:absolute;
                top:80px;
                right:0px;
                left:0px;
                bottom:0px;
                background:${backgroundColor};
                color:${textColor};
            }
        </style>

        `;
    }
}
class nikCard extends HTMLElement{
    constructor(){
        super();
        var backgroundColor = this.getAttribute('background');
        var textColor = this.getAttribute('color');
        var title = this.getAttribute('title');
        var body = this.getAttribute('body');
        var footer = this.getAttribute('footer')
        if(backgroundColor == null){
            backgroundColor = "white"
        }if(textColor == null){
            textColor == "black"
        }
        this._root = this.attachShadow({mode: 'open'});
        this._root.innerHTML = `
        <div class="shadow-nik-card">
        <div class="shadow-nik-card-title">${title}</div>
        <div class="shadow-nik-card-body">${body}</div>
        <div class="shadow-nik-card-footer">${footer}</div>
        </div>

        <style>

            .shadow-nik-card{
                position:absolute;
                background:blue;
            }
        </style>

        `;
    }
}


window.customElements.define('nik-card', nikCard);
window.customElements.define('nik-content', nikContent);
window.customElements.define('nik-header', nikHeader);

我在<nik-content></nik-content> 标签中放置的按钮没有显示在元素的边界内它只是在顶部没有任何影响它我还注意到实际元素没有任何大小或位置，除非我检查并向下滚动到谷歌浏览器的阴影元素部分影子 DOM 父级中是否可以有影子 DOM 子级？还是我只能将它们放在常规元素中？

【问题讨论】：

您是否尝试在样式定义中添加display:inline-block？
是的，结果还是一样 :(

标签： javascript html dom shadow-dom

【解决方案1】：

您忘记在容器 <nik-content> 的 Shadow DOM HTML 定义中使用 <slot> 元素。结果，里面没有插入任何东西。 Shadow DOM 隐藏了 light DOM。

this._root.innerHTML = `
    <div class="shadow-nik-content">
        <slot></slot>
    </div>
    ...
  `;

【讨论】：