影子DOM插槽内的继承

此处的规范 - https://drafts.csswg.org/css-scoping/#slots-in-shadow-tree有如下注释。影子DOM插槽内的继承

注意：将元素分配给插槽的非显而易见的结果是它们从它们分配给的插槽继承。他们的原始光树父亲和他们的插槽被分配到的任何更深的插槽不会影响继承。

所以我想，一旦一个元素被开槽，是可以获得样式应用于元素，可以继承像color或background-color不会继承它的光DOM父。

但是，在下面的例子中，这样做。

这里是我的代码。

class CustomTitle extends HTMLElement { 
 
    constructor() { 
 
    super(); 
 
    this.attachShadow({ mode: "open" }); 
 
    this.shadowRoot.innerHTML = "<slot name='title'></slot>"; 
 
    } 
 
} 
 
window.customElements.define("custom-title", CustomTitle);

custom-title { 
 
    border: 2px solid; 
 
    display: block; 
 
    color: red; 
 
}

<custom-title> 
 
    <h1 slot='title'>Hi There!</h1> 
 
</custom-title>

我的期望是，h1仍然是黑色的，但它显示为红色。很明显，我不是这个规范的意思，或者我正在做一些愚蠢的事情。

有人可以向我解释这个吗？

来源

2017-06-15 Praveen Puglia

对不起，该注解意味着该元素从其第一个插槽继承直接。继承将仍然正常工作，从更高的插槽，其他阴影元素，托管阴影树的轻元素等。

此示例不显示继承，tho。 h1得到了一个颜色分配给它，所以它会使用它，而不是使用继承。

来源

2017-06-15 10:04:49 Xanthir

是的。我的坏例子。我会在上面的问题中解决这个问题，所以不会造成混淆。 –

如何演示这种情况？ '和他们的槽被分配到的任何更深的槽。这可能超出了问题的范围，但是如果有时间的话，能否请你指点我可以找到例子的地方？ –

我对直接从它的第一个插槽'有什么'感到困惑。另外，我尝试通过将样式应用于阴影树内的'slot'来设置文本节点的样式，但没有在那里继承。 https://codepen.io/praveenpuglia/pen/jwMmWd –

影子DOM插槽内的继承

回答

相关问题