Access Elements the Component Owns — Overview

同学们，今天我们来聊聊LWC里怎么安全又高效地操作DOM元素。 首先记住一个铁律：永远别用window或document全局对象去查DOM，比如document.querySelector这种写法。在LWC里它会被直接拦截，而且这么做会打破组件边界，咱的组件是封装好的，别去偷看隔壁组件的内部元素。 那正确姿势是什么呢？LWC推荐我们用声明式的方式，也就是那些HTML指令，像 lwc:if、for:each 这些。能用指令控制显示、循环的，就别自己动手用JavaScript去增删节点，这样代码更干净，也更符合框架的设计。 如果确实需要拿到某个元素的引用，咱们有两种模式。第一种是 querySelector 这套，通过 this.template.querySelector 去用CSS选择器找元素。第二种更直接，就是 refs 模式，在模板里给元素加个 lwc:ref 属性，然后在JS里直接 this.refs.xxx 拿到引用，不用写选择器，更安全也更快。 用 querySelector 的时候还要注意影子DOM和轻型DOM的区别。如果你在组件自己的影子DOM里，就用 this.template.querySelector；如果实在需要用轻型DOM，也就是元素被投射进来那种情况，才用 this.querySelector。一般大部分场景下咱们都用前者，记住就行。 最后，要是你非得集成一个第三方库，库直接操作原生DOM怎么办？这时候给那个根元素加上 lwc:dom="manual" 属性，然后用 platformResourceLoader 加载库就行了。这样LWC就知道这块DOM交给你手动打理，不再报错。 好，关于LWC里DOM元素的访问规则，就讲清楚啦。下回见！