Javascript 如何在多个影子根之间共享单个样式表引用、css变量或css规则？

我有一个由许多相同类型的web组件实例组成的页面。当我将鼠标悬停在一个组件实例上时，我希望对相同类型的所有其他组件应用效果。为此，我想也许我可以让每个组件引用相同的样式表，然后我可以通过编程从悬停元素中删除一个公共类，然后加载样式表，提取相关选择器并修改相关样式，因此，假设会影响使用相同样式表的所有其他自定义元素实例。不幸的是，样式表的每次单独使用似乎都是局部隔离的，这意味着修改一个元素的规则对其他元素没有影响

有可能我做错了什么；如果我使用Chrome的开发者工具取消选中共享样式表中的一条规则，它实际上会对所有元素禁用它。我不确定这是否只是Chrome提供的特殊行为，或者我在DOM中查找样式表实例并对其进行修改的方法是否错误

有什么有效的解决方案可以让我将一组共享的样式应用于特定自定义元素类型的所有自定义元素/阴影根，然后能够进行影响所有这些元素的单个样式规则更改

---

不需要支持较旧的浏览器。在这种情况下，我可以非常关注最新版本的Chrome。

通过使用我找到的

：host-context（）

伪选择器解决了这个问题

在自定义元素构造函数中：

this.addEventListener('mouseenter', () => {
  this._containerEl.classList.remove('not-focused');
  this.parentElement.classList.add('has-focused-node');
});

this.addEventListener('mouseleave', () => {
  this._containerEl.classList.add('not-focused');
  this.parentElement.classList.remove('has-focused-node');
});

在共享样式表中：

:host-context(.layout-container.has-focused-node) .stream-node.not-focused {
  /* styles for all other elements */
}

---

如果您只支持最新的浏览器（没有internet Explorer），那么您也可以使用CSS变量

在JS文件中，您只需将CSS变量设置为

，它将用于所有元素的CSS中

this.addEventListener（'mouseenter'，（）=>{
document.body.style.setProperty（'--my el background color'，red'）；
});
this.addEventListener（'mouseleave'，（）=>{
document.body.style.setProperty（'--my el background color'，''）；
});
.my-el\u some-css{
背景色：var（--我的el背景色，白色）；
}
例如，您的页面上有10份
。当你将鼠标悬停在其中任何一个上面时，你想在所有的页面中更改一些css。。。对吗？是的，虽然现在没有意义，因为我改变了我的方法