Light DOM — Access Elements

同学们，今天我们来聊聊Light DOM在LWC中带来的一个核心变化：怎么在组件里获取元素。这在以前用Shadow DOM的时候，我们是通过 `this.template.querySelector` 来找元素的，模板被封装在影子根里。但现在启用了Light DOM，影子根也就不存在了，所以组件的 `template` 属性会直接返回 `null`。那该怎么办呢？ 很简单，所有元素查询都要改用 `this` 来直接操作了。像 `this.querySelector`、`this.querySelectorAll`，还有 `getElementById`、`getElementsByClassName` 这些标准的 DOM API，全都变得能用了。所以，从Shadow DOM迁移到Light DOM，你主要做的一件事就是把代码里的 `this.template.querySelector` 统统替换成 `this.querySelector`。 但是，这里有两个需要特别小心的点，也就是所谓的“警告”。 第一，`this.querySelectorAll` 可能会把别的轻量级组件里的元素也选出来，因为Light DOM下大家的标记都是平铺在宿主元素下的。所以你在写选择器的时候，一定要加一些特定的前缀或者类名，确保只拿到自己想要的元素。 第二，在Light DOM里，元素的 `id` 属性会被原样保留在运行时，不像以前合成阴影那样会被修改，这就意味着你可以直接用 `getElementById` 来获取元素，id选择器能正常工作。 尽管标准DOM API现在这么好用，但我们还是推荐大家优先使用 `this.refs`。为什么呢？因为无论你的组件采用Shadow DOM还是Light DOM，`this.refs` 的用法和访问方式都是一模一样的，这让你的代码更统一、更好维护。所以记住，`this.refs` 依然是最稳妥的推荐方法。 好，这个小节我们就讲到这儿，大家明白了吗？