课程章节介绍
好，我们来讲一个LWC里操作DOM时特别容易踩的坑，但是一旦搞懂了，你就能更清楚地掌握组件内部和外部的边界。
你看，咱们组件模板里如果用了``，这个``标签本身是待在组件自己的“影子树”里面的。所以如果你想找到这个slot元素，就要用 `this.template.querySelector`，这没问题，因为template指向的就是你的影子DOM。
但关键是，那些从父组件投递进来、落在slot位置上的内容——也就是我们说的“slotted元素”，它们并不属于你的组件。它们原本就是父组件的东西，只是暂时被投射到你这里来显示而已。所以这些元素的“家”还在父组件的DOM作用域里，我们叫它“轻量级DOM”。
那怎么在自己组件里安全地拿到这些投射进来的元素呢？这时候你就得用 `this.querySelector`，注意，这里，不要，加那个 `.template`。直接 this.querySelector 就能访问到这些轻量级DOM元素。
好，另一个常问的问题是：在哪里做这个查询最靠谱？答案是 `renderedCallback` 这个生命周期钩子。因为当你跑到 renderedCallback 里的时候，框架已经保证那些投射的内容已经被渲染到DOM里了，这个时候去查，肯定找得到，不会扑个空。
还有一个小提醒：无论是查哪种元素，都尽量别用 id 选择器。这是因为LWC框架会对id值进行转换，确保在全局唯一，你写的id最后可能会变成别的，所以直接用id定位容易失效。用类选择器或者其他属性的方式更稳妥。
所以总结一下——模板自身的slot，用 `this.template.querySelector`；投射进来的“客人”，用 `this.querySelector`；查询的最佳时机是 `renderedCallback`；避免用id选择器。这几个点记住了，以后处理slot相关的DOM访问就不会乱了。
关键词
LWC
Lightning Web Components
Salesforce