DOM Manipulation with JavaScript — lwc:dom="manual"

DEX475 - JavaScript

📄 第 149 页 🎬 视频课程

课程章节介绍

同学们,今天我们来看一个在Lightning Web Components里比较特殊,但也挺实用的指令——`lwc:dom="manual"`。 大家知道,LWC的引擎会自动帮我们管理DOM,还有样式封装,这样我们写的组件样式就不会影响到外面,外面的也不会跑进来。但是在某些情况下,比如你要集成一个第三方的图表库,像D3.js这种,它需要自己直接操作DOM来画图。这时候如果你直接用`appendChild`这类方法手动往组件里加元素,你就会发现样式不对劲,因为LWC的样式封装会阻止这些手动添加的元素拿到组件内的CSS。 那怎么办呢?就用`lwc:dom="manual"`这个指令。它的用法很简单,你在模板里放一个普通的HTML元素,比如一个`
`,然后给它加上`lwc:dom="manual"`。这样一来,这个元素就变成了一个“手动操作容器”。引擎知道这里面要搞手动操作了,就不会把样式封装作用在这个容器内部,于是你后面通过JavaScript手动塞进去的元素,就能正常应用组件的样式了。 不过要记住,这个指令只是在这个容器内部“解除”了样式封装的限制,组件其他部分还是受到保护的。也就是说,把需要第三方库操作的部分圈定在一个小范围内,既能让第三方库正常工作,又尽量不破坏整个组件的封装性。 但是这里有两个重要的提醒:第一,`lwc:dom="manual"`应该只在必要的时候用。大多数情况下,你完全不需要它,让LWC引擎自己管理DOM是最好的,既简单又安全。第二,Salesforce不会对任何第三方库提供官方支持,如果你选择使用,就要自己负责测试,确保在平台升级时这些库还能正常工作。 所以记住:当你需要手动操作DOM,而且发现样式丢失时,就想一想,用一个带`lwc:dom="manual"`的容器元素,就能解决问题。好了,这个概念很简单,但很实用,特别是在做可视化、集成某些复杂库的时候。大家明白了吗?

关键词

LWC Lightning Web Components Salesforce