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的shadow元素部分影子DOM父级中是否可能有影子DOM子级？还是只能将它们放在常规元素中？

Answer 1

您忘记在容器<slot>的Shadow DOM HTML定义中使用<nik-content>元素。结果，没有任何内容插入其中。影子DOM隐藏了轻型DOM。

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

在阴影DOM元素中具有阴影DOM子级

1 个答案: