@propertyを使ったCSS変数の制限

@propertyは、CSS Houdiniの一種で、Custom Propertyに制約を追加するための機能。

CSSから使う

@property --color {
  syntax: '<color>';
  /* 子孫要素に影響を与えない。--color を変更した要素のみに適用される */
  inherits: false;
  initial-value: black;
}

@property --bg-color {
  syntax: '<color>';
  /* 子孫要素に影響がある。--bg-color を変更した要素の子孫要素すべてに適用される */
  inherits: true;
  initial-value: yellow;
}

p {
  color: var(--color);
  background-color: var(--bg-color);
}

<p>Outside</p>

<section style="--color: red; --bg-color: skyblue;">
  <!-- --color は inherits: false なので子孫要素には影響しない -->
  <!-- --bg-color は inherits: true なので子孫要素に影響する -->
  <p>Inside</p>
  <p style="--color: red;">inherites:falseでも自身の要素なら色が変わる</p>
</section>

JavaScriptから使う

window.CSS.registerProperty({
  name: '--color',
  syntax: '<color>',
  inherits: false,
  initialValue: 'black',
});

デモ