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>

完全な例

これは単なる例です。外部コンポーネントの構造とスタイルを定義します。

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;
}

最初のアプローチ

これが最初の素朴なアプローチです。

いくつかの論理的な問題がありますが、私が何をしようとしているのか理解できると思います。

私の感じでは、これは純粋な css では不可能です。しかし、カスタム Javascript を作成する前に、何か不足していないか、問題を考えすぎていないかお尋ねしたいと思います。

Answer 1

コンポーネントの信頼できる期待される構造がある場合は、 > 直接の子セレクターを使用してみませんか?

[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>

Answer 2

BEM 規則に従うことができます。

.a {
  /* component A */
}
.a__red {
  /* element red child of component A */
  color: red;
}

.b {
  /* component B */
}
.b__black {
  /* element black child of component B */
  color: black;
}

<div class="a">
  <span class="a__red">Component A (red)</span>
  <div>
    <span class="a__red">Component A (red)</span>
  </div>
  <div class="b">
    <span class="b__black">Subcomponent B (black)</span>
    <div>
      <span class="b__black">Subcomponent B (black)</span>
    </div>
    <div class="a">
      <span class="a__red">Subcomponent A (red)</span>
    </div>
  </div>
  <span class="a__red">Component A (red)</span>
</div>

Answer 3