Reflect Properties — Without setAttribute()

DEX475 - Fields, Properties, and Attributes

📄 第 133 页 🎬 视频课程

课程章节介绍

好,我们来看这张幻灯片,它讲了一个挺重要但容易被忽略的细节——在 Lightning Web Components 里,如果你不用 `setProperty` 会出什么问题。 你看啊,就算不在组件里调用 `setProperty`,JavaScript 那边的属性访问还是好好的,getter 和 setter 都正常工作,你照样可以在代码里用 `component.title` 去读或者写。但这只是 JavaScript 层面的。 关键问题出在,渲染出来的 HTML 输出上——你打开浏览器开发者工具,看 DOM 结构,会发现 `` 这个标签上完全没有 `title` 属性。明白这意味什么吗?这意味着,屏幕阅读器根本读不到这个标题,用户把鼠标悬停上去也不会看到任何提示,浏览器里检查不到,而且所有依赖属性选择器的那些 CSS 或者 JavaScript,也都找不到它。 所以,区别很明显了:属性在 JavaScript 这边存在,但辅助技术读的是 DOM,DOM 里只包含你明确“反射”过去的东西。而 `setProperty` 的作用,就是把 JavaScript 里的值同步映射到 DOM 属性上,让辅助工具能识别,让你的组件真正可访问。这张对比图,就是告诉大家,为了无障碍,你绝不能省略这一步。

关键词

LWC Lightning Web Components Salesforce