我正在尝试查看是否可以主要从影子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子级？还是只能将它们放在常规元素中？