在阴影DOM元素中有阴影DOM子元素
在阴影DOM元素中有阴影DOM子元素
提问于 2019-11-20 16:28:55
我试着看看我是否能建立一个网站，主要是用阴影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的阴影元素部分，是否可以在阴影DOM父元素中有影子DOM子元素？或者我只能把它们放在常规元素中吗？
回答 1
Stack Overflow用户
回答已采纳
发布于 2019-11-24 18:11:44
您忘了在容器<slot>的Shadow定义中使用<nik-content>元素。因此，里面没有插入任何东西。阴影DOM隐藏光DOM。
this._root.innerHTML = `
<div class="shadow-nik-content">
<slot></slot>
</div>
...
`;页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/58959091
复制相关文章
相似问题
腾讯云开发者
