如何在Binding.scala中使用ARIA属性？编译aria-checked报错求助

这个问题我之前也碰到过，本质是ScalaJS的DOM类型系统和HTML属性命名规则的冲突导致的：ARIA属性带连字符，但Scala的标识符不允许包含连字符，所以直接写<div role="option" aria-checked="false"/>会触发编译错误，提示value aria-checked is not a member of org.scalajs.dom.html.Div。

下面给你两种可行的解决办法：

方法一：使用Binding.scala的attr方法（推荐） #

Binding.scala提供了attr方法，可以直接传入带连字符的属性名，绕过ScalaJS的类型检查，直接设置HTML属性。

静态属性示例 #

<div role="option" attr("aria-checked") := "false"/>

动态绑定属性示例 #

如果需要绑定动态值（比如一个布尔变量），可以结合Var和map来转换：

import com.thoughtworks.binding.Binding.Var
import com.thoughtworks.binding.dom

@dom
def render = {
  val isChecked = Var(false)
  <div role="option" 
       attr("aria-checked") := isChecked.map(_.toString)
       onclick={() => isChecked.value = !isChecked.value}>
    点击切换选中状态
  </div>
}

方法二：调用原生DOM的setAttribute方法 #

你也可以先获取DOM元素的引用，再调用原生的setAttribute方法设置ARIA属性：

import com.thoughtworks.binding.bind
import com.thoughtworks.binding.dom

@dom
def render = {
  val divElement = <div role="option"/>.bind
  divElement.setAttribute("aria-checked", "false")
  divElement
}

这两种方法都能正确设置ARIA属性，解决编译错误的问题。

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