调用hs-dialog时如何修改包裹React组件的Web组件CSS变量值

你在Base.tsx中定义的--test-border-radius是标准CSS自定义属性，支持从Web组件的宿主元素向下穿透Shadow DOM继承，调用组件时可以通过以下三种方式赋值：

• 内联样式直接赋值（最常用，单组件单独配置）
  原生HTML调用写法：

  <hs-dialog style="--test-border-radius: 8px;"></hs-dialog>
  

  React/TSX环境调用写法：

  <hs-dialog style={{ '--test-border-radius': '8px' } as React.CSSProperties} />
  

  赋值规则和原生border-radius属性完全一致，支持传单值、多角不同值、百分比单位等写法，比如传12px 12px 0 0就是仅顶部两个角设圆角。

• CSS选择器批量赋值（适合页面内多个同组件统一配置）
  在全局样式或父容器样式中添加以下规则即可：

  hs-dialog {
    --test-border-radius: 10px;
  }
  

• JS动态修改（适合交互触发后动态调整圆角的场景）
  拿到hs-dialog的DOM实例后，调用setProperty方法修改变量值：

  const dialog = document.querySelector('hs-dialog');
  dialog.style.setProperty('--test-border-radius', '16px');
  

注意：不需要写Shadow DOM穿透选择器（比如::part、::deep这类），CSS自定义属性天然可以跨越Shadow DOM边界向下传递，直接在宿主元素上赋值就能被内部id为test的div读取到。

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