CSS @property在声明式Shadow DOM中失效，寻求解决方案

方案1：改用手动构造Shadow DOM #

声明式Shadow DOM（shadowrootmode属性）目前在部分浏览器中对@property的支持存在兼容性问题，改用手动创建ShadowRoot的方式可以规避这个问题：

<some-element>
  <style>
    @property --bg-color {
      syntax: "*";
      inherits: false;
      initial-value: #10ded0;
    }

    div {
      background-color: var(--bg-color);
    }
  </style>
  <div>
    <p>Content</p>
  </div>
</some-element>

<script>
  const elem = document.querySelector('some-element');
  const shadowRoot = elem.attachShadow({ mode: 'open' });
  shadowRoot.append(...elem.children);
</script>

方案2：将@property定义移至主文档样式 #

如果必须使用声明式Shadow DOM，可以把@property的定义放在主文档的全局样式中，利用CSS自定义属性的继承特性（需将inherits设为true）：

<style>
  @property --bg-color {
    syntax: "*";
    inherits: true;
    initial-value: #10ded0;
  }
</style>

<some-element>
  <template shadowrootmode="open">
    <style>
      div {
        background-color: var(--bg-color);
      }
    </style>
    <div>
      <p>Content</p>
    </div>
  </template>
</some-element>

方案3：在Shadow DOM中显式设置变量初始值 #

作为临时 workaround，可以直接给Shadow DOM内的根元素或目标元素手动设置变量值，绕过@property的初始化异常：

<some-element>
  <template shadowrootmode="open">
    <style>
      @property --bg-color {
        syntax: "*";
        inherits: false;
        initial-value: #10ded0;
      }

      :host {
        --bg-color: #10ded0;
      }

      div {
        background-color: var(--bg-color);
      }
    </style>
    <div>
      <p>Content</p>
    </div>
  </template>
</some-element>

注：方案3本质是手动覆盖变量初始值，虽能生效，但会丢失@property提供的类型校验等特性，仅适合临时场景使用。

内容的提问来源于stack exchange，提问作者SUBHUMAN