Javascript 使用CSS引用web组件根属性

创建了具有阴影DOM的web组件。单击按钮时，它会将

打开

属性添加到web组件

当

open

添加CSS样式时，我想在CSS中显示隐藏的div。阴影DOM样式是否可以引用web组件根上的属性？否则，我必须在shadowdom中添加多余的类或属性

类CustomComponent扩展了HtmleElement{
构造函数（）{
超级（）；
this.element=this.attachShadow（{mode:'open'}）；
}
静态get ObservedAttribute（）{
返回[‘打开’]；
}
attributeChangedCallback（属性名称、旧值、新值）{
如果（新值！==旧值）{
this[attrName]=this.hasAttribute（attrName）；
}
}
connectedCallback（）{
const-template=document.getElementById（'custom-component'）；
const node=document.importNode（template.content，true）；
this.element.appendChild（节点）；
this.element.querySelector（'button'）.addEventListener（'click'，（）=>{
this.setAttribute（'open'，''）；
});
}
}
自定义元素。定义（'custom-component'，CustomComponent）

div{
显示：无；
}
[公开]分区{
显示：块；
}
打开
内容
看来
主机
CSS伪选择器是为处理这种精确情况而设计的


类CustomComponent扩展了HtmleElement{
构造函数（）{
超级（）；
this.element=this.attachShadow（{mode:'open'}）；
}
静态get ObservedAttribute（）{
返回[‘打开’]；
}
attributeChangedCallback（属性名称、旧值、新值）{
如果（新值！==旧值）{
this[attrName]=this.hasAttribute（attrName）；
}
}
connectedCallback（）{
const-template=document.getElementById（'custom-component'）；
const node=document.importNode（template.content，true）；
this.element.appendChild（节点）；
this.element.querySelector（'button'）.addEventListener（'click'，（）=>{
this.setAttribute（'open'，''）；
});
}
}
自定义元素。定义（'custom-component'，CustomComponent）

div{
显示：无；
}
：host（[open]）div{
显示：块；
}
打开
内容