如何在Reagent/Hiccup中传递CSS自定义属性？附示例需求

要生成你需要的 <span style="--custom-property: value"></span>，其实有几种简单的写法，核心是处理好CSS自定义属性带连字符的命名在Reagent/Hiccup中的表达：

• 直接用字符串作为style属性值：

  [:span {:style "--custom-property: value"}]
  

  这种写法最直接，Reagent会把字符串原封不动作为style属性值输出，完全匹配目标HTML。

• 用map形式定义style（更符合Reagent常规写法）：
  Clojure 1.10+支持带连字符的关键字，也可以用字符串作为键，两种写法都可行：

  ; 带连字符的关键字写法
  [:span {:style {:--custom-property "value"}}]
  
  ; 字符串键写法
  [:span {:style {"--custom-property" "value"}}]
  

  Reagent会自动把map里的键值对转换为对应的CSS声明，保留自定义属性的命名格式。

官方文档没专门提这个操作，是因为它属于CSS特性和Clojure语法结合的边缘场景，本质只是利用了Reagent对style属性的基础处理规则——字符串直接输出，map则转换为CSS键值对。

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