在 shadow DOM 元素中有 shadow DOM 个子元素

Question

我想看看我是否可以建立一个主要脱离阴影 DOM 元素的网站一切正常，直到我尝试将阴影 DOM 元素放入另一个阴影 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> 标签中放置的按钮没有显示在元素的边界内它只是在顶部没有任何影响它我还注意到实际元素没有任何大小或位置，除非我检查并向下滚动到 google chrome 的阴影元素部分是否可以在影子 DOM 父级中包含影子 DOM 子级？或者我只能将它们放在常规元素中吗？

Answer 1

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

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

在 shadow DOM 元素中有 shadow DOM 个子元素

having shadow DOM children inside shadow DOM element

html

javascript

dom

shadow-dom