Reflect JavaScript Properties to HTML Attributes

同学们，今天我们来聊一个虽然不大、但对用户体验影响非常大的知识点：怎么让我们组件里的 JavaScript 属性，真正出现在页面的 HTML 里面。 你可能已经习惯了用 `@api` 公开属性，让父组件传值进来。但有没有想过一个问题？当你在代码里通过 `@api` 定义一个属性时，比如 `labelText`，它在浏览器最终渲染出来的 DOM 元素上，其实是看不见的，不会自动变成一个 HTML 属性。这就好像你有一个名牌，但你把它放进了口袋里，别人看不到。 在大多数业务场景下，这确实没什么影响，因为数据在 JavaScript 里流转就够了。然而，一旦涉及到，无障碍访问，，情况就变了。屏幕阅读器和其他辅助技术，它们是靠读取 HTML 上的属性来理解页面内容的，比如 `aria-label`、`role` 这些，它们根本不知道你的 JavaScript 属性里存了什么。如果信息只停留在 JS 里，视障用户就听不到了。 所以，为了让这些辅助技术能“看见”我们的数据，我们必须主动把属性，反射，到 HTML 上。在 Lightning Web Components 里，这个操作是通过 `this.setProperty()` 来完成的。而且放心，这样反射出去的 HTML 属性也是，响应式，的，一旦值变了，组件会自动重新渲染，不需要你额外操心。 那具体怎么写呢？模式其实很简单。我们会定义一个私有的变量来真正存储值，然后用 `@api` 装饰 getter 方法，让它对外公开。关键的魔法在 setter 里：先把新值存到私有变量里，然后立刻调用 `this.setProperty()`，把同样的值推送到渲染出来的 HTML 属性上。 举个例子：假设我们要让组件支持无障碍，需要动态设置 `aria-label`。我们可以声明一个叫 `labelText` 的公开属性。在 setter 中，除了更新内部变量，我们调用 `this.setProperty('aria-label', value)`。这样一来，组件渲染出来的根元素上就会实实在在地多出一个 `aria-label` 属性，屏幕阅读器就能顺利读到它了。 你看，做法其实很优雅。记住这个口诀就行：私有藏值，getter 公开，setter 里存值并反射。这样一来，父组件传什么，HTML 上就出现什么，辅助技术再也不会错过你的信息。 好了，这个点就讲到这里。希望以后你设计组件时，能多想一步，让每一个用户都能顺畅地“看到”你写的东西。我们下节课见。