`,然后给它加上`lwc:dom="manual"`。这样一来,这个元素就变成了一个“手动操作容器”。引擎知道这里面要搞手动操作了,就不会把样式封装作用在这个容器内部,于是你后面通过JavaScript手动塞进去的元素,就能正常应用组件的样式了。
不过要记住,这个指令只是在这个容器内部“解除”了样式封装的限制,组件其他部分还是受到保护的。也就是说,把需要第三方库操作的部分圈定在一个小范围内,既能让第三方库正常工作,又尽量不破坏整个组件的封装性。
但是这里有两个重要的提醒:第一,`lwc:dom="manual"`应该只在必要的时候用。大多数情况下,你完全不需要它,让LWC引擎自己管理DOM是最好的,既简单又安全。第二,Salesforce不会对任何第三方库提供官方支持,如果你选择使用,就要自己负责测试,确保在平台升级时这些库还能正常工作。
所以记住:当你需要手动操作DOM,而且发现样式丢失时,就想一想,用一个带`lwc:dom="manual"`的容器元素,就能解决问题。好了,这个概念很简单,但很实用,特别是在做可视化、集成某些复杂库的时候。大家明白了吗?