Question

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

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

什么是一个有效的解决方案，允许我将一组共享样式应用于特定自定义元素类型的所有自定义元素/影子根，然后能够进行影响所有自定义元素/影子根的单一样式规则更改他们？

不需要支持旧版浏览器。在这种情况下，我几乎可以专注于最新版本的Chrome。

Answer 1

通过使用我发现in the 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 */
}

Answer 2

如果您只支持最新的浏览器（无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);
}

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

2 个答案: