LightningElement — Inherited Properties (2)

同学们，我们接着来看LWC组件继承的属性列表。这部分非常重要，因为它让我们理解LWC组件在底层其实就是一个标准的、功能齐全的DOM元素。 首先，你有一个，id，属性，用来标识元素。但要注意一点，LWC框架会自动转换你设置的id值，以防止在页面上出现重复，所以最终呈现的id可能和你在模板里写的不完全一样，这一点在调试时特别要留心。 然后是，isConnected，，一个布尔值，它告诉你组件当前是否已经连接到DOM树上。你可以在生命周期中用它来判断组件是不是真的在页面上可见，比如在做异步操作时防止更新一个已经移除的组件。 接下来是，lang，属性，它直接反映HTML里的语言设置，对辅助技术很重要。 说到DOM查询，我们有一对好用的方法：，querySelector， 和 ，querySelectorAll，。它们允许你在组件的内部DOM中查找子元素，注意，默认是在影子DOM里查找，除非你用的是轻型DOM模式。 属性管理方面，，setProperty， 和 ，removeProperty， 可以动态操作元素的CSS自定义属性，也就是CSS变量。这样我们就能在JavaScript里灵活控制样式。 ，shadowRoot，属性非常关键，它返回对组件影子DOM根节点的引用。如果你把组件配置为轻型DOM，那`shadowRoot`的值就是`null`。所以用它之前最好检查一下。 还有控制交互行为的属性，比如，spellcheck，开启拼写检查，，tabIndex，控制元素的可聚焦顺序。这些都能直接在组件上设置，就像普通HTML元素一样。 从API版本62.0开始，我们还能直接通过`style`属性来获取元素的样式对象，这给了我们更直接的样式操作能力。 别忘了，tagName，，它返回组件对应的自定义HTML标签名称，全部大写，比如`C-MY-COMPONENT`。 最后要强调，完整的，WAI-ARIA属性，也都被继承下来了。也就是说，你在组件上设置`aria-label`、`role`等无障碍属性，它们会直接作用在底层元素上，帮助我们构建无障碍的应用。 所以你看，所有这些继承来的属性让LWC组件完完全全就是一个一等公民的DOM元素，它可以无缝参与浏览器所有的标准操作，比如事件冒泡、DOM遍历、样式计算等等。理解了这一点，你就能更自信地把LWC当成原生HTML来使用了。