Css 阴影DOM插槽内的继承

Css 阴影DOM插槽内的继承,css,inheritance,web-component,shadow-dom,custom-element,Css,Inheritance,Web Component,Shadow Dom,Custom Element,此处的规范-有如下注释 注意:将元素指定给插槽的一个不明显的结果是,它们从指定给它们的插槽继承。它们的原始光树父级以及它们的插槽分配到的任何更深的插槽都不会影响继承 因此,我认为,一旦一个元素被开槽,应用于该元素的样式(如color或background color等)就不会从它的轻DOM父元素继承 但是,在下面的示例中,确实如此 这是我的密码 class CustomTitle扩展了HtmleElement{ 构造函数(){ 超级(); this.attachShadow({mode:“op

此处的规范-有如下注释

注意:将元素指定给插槽的一个不明显的结果是,它们从指定给它们的插槽继承。它们的原始光树父级以及它们的插槽分配到的任何更深的插槽都不会影响继承

因此,我认为,一旦一个元素被开槽,应用于该元素的样式(如
color
background color
等)就不会从它的轻DOM父元素继承

但是,在下面的示例中,确实如此

这是我的密码

class CustomTitle扩展了HtmleElement{
构造函数(){
超级();
this.attachShadow({mode:“open”});
this.shadowRoot.innerHTML=“”;
}
}
window.customElements.define(“自定义标题”,CustomTitle)
自定义标题{
边框:2倍实心;
显示:块;
颜色:红色;
}

你好!

对不起,这个注释意味着元素直接从它的第一个插槽继承。继承仍将正常工作,从较高的插槽、其他阴影元素、承载阴影树的灯光元素等


不过,这个例子并没有展示继承。h1有一个颜色分配给它,所以它只使用它,而不使用继承。

是的。我的坏榜样。我将在上面的问题中解决这个问题,这样就不会混淆。如何演示这种情况
及其插槽分配到的任何更深的插槽
。这可能超出了问题的范围,但是如果有时间的话,您能告诉我一个可以找到示例的地方吗?我仍然对直接从它的第一个插槽中找到的
有点困惑。此外,我还尝试通过将样式应用于阴影树中的
slot
来设置文本节点的样式,但没有继承。