Reflect Properties — With setAttribute()

现在我们来看一个“反射图案”的完整小例子。别被名字吓到，“反射”其实就是让组件的一个公开属性，自动映射到它渲染出来的HTML元素属性上，这样就能同时被其他的HTML特性利用，比如title属性用来显示工具提示，或者ARIA的无障碍属性。 你看这段代码：组件通过一个@api装饰的getter，公开了一个叫title的属性。当父组件像这样用的时候：``，这个title值就会进来。 重点是setter里做了两件事。第一，它把接收到的值用某种方式转换一下——这里可能是转成了大写或者首字母大写（你把RST理解成某种格式转换就行），然后把转换后的新值存到一个私有的_privateTitle字段里，这样就保证了内部状态干净。第二，它主动调用了 `this.setProperty('title', this._privateTitle)`。这是关键一步：它告诉底层的HTML元素，“把转换后的title值设置为我的真实DOM属性”。 这样做的好处是什么？结果就是渲染出来的组件HTML里，根元素上会带上`title="HOPER Over THE COMPONENT TO SEE ME"`（假设是这种转换形式）。于是，屏幕阅读器能读出这个title，你把鼠标停在组件上，也会自动出现工具提示。而如果你忘了调用setProperty，这个title属性根本就不会出现在DOM里，这两个方便的特性也就失效了。 总结一下：反射图案通过主动调用setProperty，让一个逻辑上的公开属性同时转化为DOM的可访问属性，既保持了封装，又打通了原生HTML能力的桥梁。这是一个很常用也很优雅的设计模式。