javascript - 带有属性的手动 css 模块以区分组件

Question

场景

我试图通过使用自定义属性 component 来区分组件。示例:

<div component="A">
  <span>Hello</span>
</div>

样式化很简单:

[component=A] span {
  color: red;
}

问题

这是棘手的部分。为确保组件不会产生副作用，它不应为子组件中的任何内容设置样式:

<div component="A">
  <span>This should be styled by component=A styles</span>
  <div component="B">
    <span>This should NOT be styled by component=A styles</span>
  </div>
</div>

完整示例

这是一个 bare example .它定义了外部组件的结构和样式。

HTML

<div component="A">
  <span>Component A (red)</span>
  <div>
    <span>Component A (red)</span>
  </div>
  <div component="B">
    <span>Subcomponent B (black)</span>
    <div>
      <span>Subcomponent B (black)</span>
    </div>
    <div component="A">
      <span>Subcomponent A (red)</span>
    </div>
  </div>
  <span>Component A (red)</span>
</div>

CSS

[component=A] :not([component]) span {
  color: red;
}

第一种方法

这是一个first naive approach .

它有几个逻辑问题，但我想你明白我想做什么。

我的感觉是纯 CSS 不可能做到这一点。但在编写自定义 Javascript 之前，我想问你我是否遗漏了一些东西或想多了这个问题。

Answer 1

如果您的组件具有可靠的预期结构，为什么不使用 > direct child selector ？

[component="A"] > span {
  color: red;
}

<div component="A">
  <span>This should be styled by component=A styles</span>
  <div component="B">
    <span>This should NOT be styled by component=A styles</span>
  </div>
</div>

编辑:

如果您想要在未指定组件网络的情况下嵌套继承父样式的组件，那么这样的方法可能会起作用——基于您的初始方法。为此，您需要为组件 B 和 A 指定样式。

https://codepen.io/anon/pen/wGyeMg

body {
  font-size: 20px;
}

[component=A] > span,
[component=A] div:not([component]) > span {
  color: red;
}

[component=B] > span,
[component=B] div:not([component]) > span {
  color: black;
}

<div component="A">
  <span>Component A (red)</span>
  <div>
    <span>Component A (red)</span>
  </div>
  <div component="B">
    <span>Subcomponent B (black)</span>
    <div>
      <span>Subcomponent B (black)</span>
    </div>
    <div component="A">
      <span>Subcomponent A (red)</span>
    </div>
  </div>
  <span>Component A (red)</span>
</div>