Light DOM — Guidelines & Security Considerations

我们来看看这个关于“轻型 DOM”和“影子 DOM”的要点。 简单来说，Lightning Web Components 里，你可以选择两种封装模式：一种叫“影子 DOM”，另一种叫“轻型 DOM”。 影子 DOM 就像给你的组件加了一层保护罩，外面的代码无法随便看到或改动里面的结构，安全性很高。但缺点是不够灵活，有时你想让外面能控制一些样式，就得费点劲。 轻型 DOM 恰恰相反，它完全敞开，页面上任何地方的代码——哪怕是别的公司写的组件——都能读取甚至修改你组件的内部结构。这就带来了灵活性，但也牺牲了安全感。 所以，这里给了一个很实用的建议：别直接用轻型 DOM 来装敏感数据。推荐的架构是，在顶层用一个影子 DOM 做“安全外壳”，里面再放轻型 DOM 的子组件。这样既能在影子根内部共享全局样式，又能在边界处保证安全，一举两得。 不过要注意，轻型 DOM 里有些功能是用不了的。比如： - 不能限制命名空间 - 没办法在包之间分发组件 - 基础组件只能永远是影子 DOM - 不能嵌入 Aura 组件 - 没有插槽的生命周期钩子 - 也不支持在循环里用内部插槽 最后，如果你想从影子 DOM 把样式穿透到轻型 DOM 的子元素，正确的方式还是用 CSS 自定义属性，或者用 `::part` 伪元素，这两个是专门用来传递样式的扩展点，安全又规范。 好，这一页的重点就是这些，记住：用轻型 DOM 要谨慎，敏感数据一定要包在影子 DOM 里。