Light DOM — Locker Considerations & Comparison

好，同学们，我们接着讲。今天聊一个在Lightning Web Components里做选择时，非常关键的一点——到底什么时候用，浅色多姆，，什么时候用，阴影多姆，。 首先，你必须把，安全性，放在第一位，这是首要考虑因素。 想象一下，你的组件如果放在整个结构的最顶层，而且是浅色多姆，那它就像一栋没有围墙的房子。其他命名空间的代码，可以轻而易举地“读”到它里面的内容，这就不安全了。所以，一个黄金法则是：，永远把你的浅色多姆组件，包裹在一个阴影多姆的祖先组件里面，。这样，外层的阴影多姆就像一道坚固的围墙，保护了里面的一切。 当然，这两种模式各有利弊，我们来口头“翻译”一下这个比较表格。 选择，阴影多姆，，你得到的是强大的封装性，你的组件就像一个个独立的黑盒，可以放心地到处移植，不用担心样式冲突或内部逻辑被干扰。但代价是，从外部给它定制样式会变得困难，一些需要深入组件内部DOM来工作的第三方工具，集成起来也更费劲。 反过来，选择，浅色多姆，，样式定制和第三方集成会变得非常容易，就像普通网页一样顺手。但代价呢？就是你放弃了宝贵的封装性和可移植性。 这里有个很常见的场景，比如你要集成一个分析工具之类的第三方库。很多人觉得，为了让工具能抓取到按钮，是不是必须得把整个组件搞成浅色多姆？，不一定！， 一个更好的思路是：你的阴影多姆组件只要向外部暴露正确的API就可以了。 举个例子，别让那个工具费劲地钻进你组件内部去找一个按钮。你可以在自定义元素本身这个层级，就直接添加一个点击处理器。工具只需要知道你的组件被点击了就行，完全不用关心内部是哪个按钮触发的。 记住这个原则：，只把你最少、最必要的东西暴露出去，给工具提供它真正需要的部分就可以了，核心内部结构最好还是保持封装。， 这样，你就在安全性和集成便利性之间，找到了最佳平衡点。