Lightning Web Components（LWC）基于使用HTML和JavaScript构建的标准Web Components。它们轻巧，易于构建，并且在现代浏览器中表现良好。当构建LWC时，您会熟悉composition的概念：将简单的建筑块组件拼凑在一起。
关于组成，LWC利用Shadow Document Object Model（DOM）Web标准，该标准封装了Web组件的内部结构，并且使其无法访问组件外的代码和组件。这种方法的替代方法是Light DOM，Salesforce在Beta中提供。
在这篇文章中，我们将详细探讨Salesforce开发中光DOM的概念。我们将以DOM概念的概述开始，然后是Shadow Dom和Light Dom之间的差异。最后，我们将查看LWC中的表现，以及如何实现LWC中的光DOM。
什么是DOM？
从MDN获取定义，dom是 上包含文档的结构和内容的对象的数据表示。作为节点和对象，用树状结构中表示网页的方法。这使开发人员更容易根据需要操纵和构建任何逻辑。
重要的是要注意DOM独立于任何编程语言。使用任何语言或框架构建的Web应用程序通常以一种或另一种方式提供对DOM及其组件的访问。
阴影dom
也许您会遇到Shadowdomâ，这基本上是DOM的扩展，它允许隐藏的DOM树作为常规DOM树中的元素连接为元素。 MDN使用此图形表示阴影DOM：
影子dom的目的是为DOM中的单个组件提供封装，并保留该组件的标记结构，样式和行为，并与页面上的其他代码隐藏并分离。开发人员可以将该组件作为完整的DOM树（阴影树）共享，以确保没有外部代码可以操纵该树。这有助于保持代码良好的隔离并避免冲突。
光DOM与阴影DOM
“光DOM”一词只是用于正常或常规DOM的另一个名称，可以将其与阴影DOM区分开。阴影边界将光DOM与阴影DOM分开。 LWC就像任何Web组件一样，都在每个组件上强制执行Abiaoqian13。通过使用Light DOM方法，该方法目前是Beta服务中的功能，通常仅适用于Salesforce体验构建器站点，将组件附加到主机元素而不是其阴影树。
让我们更详细地看一下这意味着什么。
成为Thedom的Kuncs的阴影
由于Salesforce支持的所有浏览器中未实现Shadow dom Web标准，因此LWC使用了名为Synthetic Shadow dom的阴影DOM Polyfill。以下标记显示了样本阴影树结构：
<c-my-app>
#shadow-root
<div>
<p>My Tasks</p>
</div>
<c-my-item>
#shadow-root
<div>
<p>Item 1</p>
</div>
</c-my-item>
</c-my-app>
Shadow Dom通过使用对document或document.body的引用来防止我们提取DOM元素。相反，LWC组件需要使用this.template.querySelector()访问树。
CSS还受影子DOM封装的影响。组件外部的样式只能影响组件的顶层，并且不能影响父，孩子或兄弟姐妹CSS。
LWC体系结构利用闪电储物柜来强制执行DOM访问控制。组件通过使用名称空间彼此隔离，每个组件只能在同一名称空间中穿越其DOM和访问元素。这是一个重要的限制（尽管是故意的），这使得组件无法访问编程代码。此度量可防止脚本注射和样式泄漏。 Light DOM允许开发人员规避此安全限制。
有一本关于这是stwccs的书
为了提高影子DOM施加的DOM访问限制，Salesforce引入了与LWC中的Light Dom合作的概念。即使该功能目前处于Beta中，LWCS的DOM操纵也很明显。
这个想法是：由于LWC位于阴影DOM之外，因此阴影DOM限制不适用于组件。
以下是阴影dom和Light dom如何影响LWC的简要比较。
| 功能 | 光DOM | 影子dom |
| 全球CSS主题具有主样式表 | 全力支持 | 没有支持，CSS是在组件级别定义的，并且不级联。 |
| 第三方工具 | 全面支持DOM遍历 | 有限的支持作为第三方工具只能访问其父组件。 |
| 编程DOM访问 | 不受名称空间的限制 | 受命名空间限制 |
| 可移植性 | 便携式但导致破裂的变化 | 可移植带安全访问的便携式 |
| 高度可定制的UI | 良好的适合 | 不合适 |
LWC中的Light Dom：一个例子
让我们查看一个简单的示例，说明光DOM如何与LWC组件一起工作。这是用于默认使用Shadow dom的MyApp LWC的简单模板指令。
<template>
<my-header>
<p>My Tasks</p>
</my-header>
</template>
要启用光DOM，我们只需要按以下方式设置renderMode属性：
import { LightningElement } from 'lwc';
export default class MyApp extends LightningElement {
static renderMode = 'light';
}
接下来，我们将模板指令更改为使用Light Dom而不是Shadow Dom：
<template lwc:render-mode='light'>
<my-header>
<p>My Tasks</p>
</my-header>
</template>
使用LWC中的光DOM访问元素
可以使用document.querySelector()方法在Light Dom中访问元素。这是开发人员根据需要访问和操纵元素的有力方法。
在Light Dom中，我们将使用this.querySelector。在Shadow Dom中，我们需要使用this.template.QuerySelector。
使用LWC中使用光DOM的事件传播
在事件传播方面，光DOM对开发人员来说是一个很大的振奋。 Shadow Dom重新定位任何跨越阴影边界的事件。在Light Dom中没有这样的事件重新定位，开发人员很容易识别触发事件的确切的UI元素，而不是获得对基础组件的引用。
LWC中使用光DOM的指南
Salesforce为使用Light DOM的开发人员提供了一组准则和限制，您可以找到here。
结论
LWC提供了一种简单而强大的方法来制作复杂的Web组件。到目前为止，尽管Salesforce为封装和安全访问而使用了LWC中的Shadow DOM标准，但开发人员可能会遇到许多场景，其中光DOM方法适合且适当。现在，Beta中提供了Light Dom，Salesforce开发人员现在可以根据其用例为自己做出选择。