我有一个由相同类型的Web组件的许多实例组成的页面。当我徘徊在一个组件实例上时，我想对同一类型的每个其他组件应用效果。为此，我认为也许我可以让每个组件都引用相同的样式表，然后我可以从悬停元素中编程删除公共类，然后加载样式表，提取相关的选择器并修改相关样式，从而假设影响使用相同样式表的所有其他自定义元素实例。不幸的是，样式表的每一个单独使用都是本地分离的，这意味着修改一个元素的规则对其他元素没有影响。
我可能做错了什么；如果我使用Chrome的开发人员工具取消选中"共享样式"中的规则，则实际上确实将其禁用了所有元素。我不确定这只是Chrome提供的特殊行为，还是我在DOM中找到样式表实例并修改的方法是错误的方法。
什么是一种有效的解决方案，可以使我能够将共享样式集应用于特定自定义元素类型的所有自定义元素/阴影根，然后能够进行影响所有这些样式的单一样式规则更改？/p>
不需要对较旧浏览器的支持。在这种情况下，我几乎可以专注于最新版本的Chrome。
通过我在CSSWG Spec中找到的: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文件中，您只需在<body>上设置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__some-css {
background-color: var(--my-el-background-color, white);
}