angular - Native 和 ShadowDom ViewEncapsulation 有什么区别？

Question

在我当前的 Angular 7 应用程序中，我们正在努力处理来自库的组件，它需要一些 css 资源。我们不想将这些资源应用到我们应用程序的所有其余部分，而是应用到一个特定的组件，它的子组件和孙组件。

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

encapsulation: ViewEncapsulation.Native

和:

encapsulation: ViewEncapsulation.ShadowDom

因此，它们似乎都使用了浏览器的 shadow dom 实现。

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

Answer 1

这几天前一直困扰着我，然后我意识到它们收敛了一点但不完全。实际上的差异是关于 the newer version of shadowDOM (v1) 。如您所见 here 在 angular 的代码源中，他们为 ViewEncapsulation.ShadowDom 添加了另一个条件。 :

Here they share the same return

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

And then they check whether it is ViewEncapsulation.ShadowDom or not (else condition)

     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 描述 here:

ViewEncapsulation.Shadow is added as a new API, rather than changing the behavior of the ViewEncapsulation.Native option, which could lead to unexpected results for developers currently using the v0 API. This should (eventually?) deprecate the ViewEncapsulation.Native option.