Javascript HTML web组件不使用阴影DOM样式

我已经创建了一个普通的web组件或HTML元素。它只显示两个链接

为了封装这个东西，我使用了shadowdom。然而，它似乎没有被封装。在DOM树中，它位于#shadow root中，这很好

为什么web组件使用全局样式而不是我在web组件模板中提供的样式？

文本是红色的，我希望它是绿色的

类MyEl扩展HtmleElement{
构造函数（）{
超级（）；
this.shadow=this.attachShadow（{mode:“open”}）；
}
connectedCallback（）{
常量模板=`
a{
颜色：绿色；
}
`;
this.shadow.innerHTML=模板；
}
}
window.customElements.define（“MyEl”，MyEl）
a{
颜色：红色
}
遵守这一行，您必须将元素移动/复制到阴影中，例如：

this.shadow.innerHTML = this.innerHTML + template;

我添加这个是为了演示只有内联样式才会应用于阴影dom元素。。因此，SD中复制的链接正在使用您的样式：）

因此，红色将是
全局
，绿色将是
阴影
元素



类MyEl扩展HtmleElement{
构造函数（）{
超级（）；
}
connectedCallback（）{
this.shadow=this.attachShadow（{mode:“open”}）；
常量模板=`
a{
颜色：绿色；
}
`;
this.shadow.innerHTML=this.innerHTML+模板；
}
}
window.customElements.define（“MyEl”，MyEl）
a{
颜色：红色
}
完整、详细的解释见：

TL；博士
您的链接位于lightDOM中，因此由其DOM（在您的代码中是文档DOM）设置样式

将节点从lightDOM移动到shadowDOM是一个“解决方案”；但是你没有使用插槽

仅供参考，您的代码可以压缩为：

类MyEl扩展HtmleElement{
构造函数（）{
super（）.attachShadow（{mode:“open”}）
.innerHTML=`a{color:green}`；
}
}
window.customElements.define（“MyEl”，MyEl）；


通过StackOverflow Search可以找到更多与插槽相关的答案：
虽然这个问题已经有了公认的答案，但对于大多数用例来说，将插槽的子项移动到shadowRoot并不可取

您可能要做的是使用
：：slotting（）
选择器

请记住，通过
：：slotted（）
选择器应用于插槽子级的样式仅充当“默认”样式，并且仍然可以通过在light DOM中使用样式来覆盖

例如，检查代码段的编辑版本：

如您所见，这次
my el
尝试将颜色和文本装饰样式应用于锚定（
请参见有关内容的答案：