Accessibility Attribute as a Public Property

` 上。 这对普通用户来说可能没感觉，但对使用屏幕阅读器的用户就截然不同了，因为屏幕阅读器只认 DOM 里的属性，它不会去读你 JavaScript 里的变量。所以如果你的无障碍标签没落到 DOM 上，辅助技术就完全“看不见”它。 解决这个问题的常见模式，我们会用到三个东西：一个，私有的内部字段，、一个 `@api` 的 ，getter， 和一个 `@api` 的 ，setter，。 举个例子，假设我们要对外暴露一个叫 `buttonLabel` 的属性，但在内部我们还想做一些处理，比如转换成大写，再赋给真正的按钮的 `aria-label`。那么可以这样做： - 先定义一个私有变量，比如 `_label`，来存储原始数据。 - 写一个 `@api` 的 getter，直接返回 `_label` 就好了，这样父组件可以通过模板绑定读取它。 - 关键在 setter 里：它不光要更新 `_label`，还要把经过转换后的值“推”到真实的 DOM 元素上去。比如我们可以这样写： ```javascript @api get buttonLabel() { return this._label; } set buttonLabel(value) { this._label = value; // 假设我们将标签转为大写并设置给某个按钮元素 const transformed = value.toUpperCase(); const button = this.template.querySelector('button'); if (button) { button.setAttribute('aria-label', transformed); } } ``` 你看，setter 里面我们主动地调用了 `setAttribute`，这样就把转换后的值手动注入到了 DOM 中。这时候屏幕阅读器就能发现这个 `aria-label`，并且正确播报给用户了。 注意，我这里用的是 `this.template.querySelector` 去拿具体的元素，然后调它的 `setAttribute`。也有的做法是通过模板表达式，比如直接在 `