本文将探讨Native和ShadowDom ViewEncapsulation之间的区别。

Question

在我目前的 Angular 7 应用程序中，我们遇到了来自库中的组件问题，该组件需要一些 CSS 资源。我们不想将这些资源应用于我们应用程序的所有其他部分，而是应用于一个特定的组件、它的子组件和孙组件。

在研究过程中，我们发现了这两个有趣的选项:

encapsulation: ViewEncapsulation.Native

并且：

encapsulation: ViewEncapsulation.ShadowDom

因此，它们似乎都使用浏览器的影子DOM实现。

这些选项之间有什么区别？

- slartidan

---

https://blog.thoughtram.io/angular/2015/06/29/shadow-dom-strategies-in-angular2.html - SeleM

https://angular.io/api/core/ViewEncapsulation#members - SeleM

@selemmn 感谢提供的链接，但第一个似乎没有涵盖 ViewEncapsulation.ShadowDom。另一方面，第二个却没有关于 ViewEncapsulation.Native 的文档（虽然提到了，但没有描述）。 - slartidan

Answer 1

这让我感到困惑了好几天，后来我意识到它们有一点收敛但并不完全相同。事实上，它们之间的差异在于新版shadowDOM（v1）。正如您可以在angular的代码源这里看到的那样，他们为ViewEncapsulation.ShadowDom添加了另一个条件：新版shadowDOM（v1）。

在这里，它们共享相同的返回值

 case ViewEncapsulation.Native:
 case ViewEncapsulation.ShadowDom:
      return new ShadowDomRenderer(this.eventManager, this.sharedStylesHost, element, type);    

然后他们会检查它是否为 ViewEncapsulation.ShadowDom，否则执行另一个条件。

     if (component.encapsulation === ViewEncapsulation.ShadowDom) {
          this.shadowRoot = (hostEl as any).attachShadow({mode: 'open'});
        } else {
          this.shadowRoot = (hostEl as any).createShadowRoot();
        }

因此，ViewEncapsulation.ShadowDom 是支持 ShadowDOM V1 的一步，可能会 废弃 ViewEncapsulation.Native，如所描述的这里:

添加了 ViewEncapsulation.Shadow 作为新的 API，而不是更改 ViewEncapsulation.Native 选项的行为，这可能会对当前使用 v0 API 的开发人员产生意外结果。这应该（最终？）废除 ViewEncapsulation.Native 选项。

- SeleM

Answer 2

Angular使用ViewEncapsulation将样式和视图限制在它们所在的组件中，我想你已经知道这一点了。 Native没有太多细节，我知道的是它对浏览器有选择性，不是所有浏览器都承认它。 关于ShadowDom，Angular文档有解释，但并不是太详细，以下摘录澄清了一些部分：

“请注意，影子DOM并不是什么新鲜事物 - 浏览器长期以来一直在使用它来封装元素的内部结构。例如，考虑一个带有默认浏览器控件的视频元素。在DOM中，您只能看到视频元素，但它包含一系列按钮和其他控件在其影子DOM内部。影子DOM规范使您可以实际操作自己定制元素的影子DOM。” 更多信息请参见：MDN文档

- Benneee_