Enable Light DOM — renderMode & lwc:render-mode

同学们，今天我们来聊一个在Lightning Web Components里很实用的特性——启用Light DOM。简单说，Light DOM就是让我们的组件不使用影子DOM，而是直接渲染到主文档的DOM树里，这样全局CSS样式就能直接作用到组件内部，也更方便从外部访问组件里的元素。 那要怎么开启Light DOM呢？其实只需要做两个小改动，记住缺一不可。第一，在组件的JavaScript类里，添加一个静态属性 `static renderMode = 'light'`。第二，在组件的HTML模板文件里，找到最外层的根标签，给它加上 `lwc:render-mode="light"` 这个属性。这两步必须同时设置，如果只做了其中一个，组件就还是会按默认的影子DOM来渲染，所以千万别漏掉。而且这个`renderMode`属性是在组件创建的时候读取的，之后你再怎么改它都不会生效了，所以一开始就要配置好。 那Light DOM和Shadow DOM的组件能混用吗？当然可以。它们之间可以自由嵌套，不管是外面是Light DOM里面是Shadow DOM，还是反过来，都非常灵活。实际项目里，我推荐大家这样设计：在组件树的根节点用单个Shadow DOM组件，就像一个安全的外壳，把内部的子组件都做成Light DOM组件。这样既能在最外层保持封装边界，防止样式泄漏出去，又能在内部让子组件轻松使用全局样式，方便共享设计和快速访问DOM，是个很实用的最佳实践。 好了，这块内容很简单，记住两个强制改动和这个嵌套原则就好。有什么问题随时问。