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

在我目前的angular 7应用程序中，我们正在努力处理库中的组件，这需要一些CSS资源。我们不希望将这些资源应用于所有其余的应用程序，而是应用于一个特定的组件，其子代和孙代。

在我们的研究中，我们发现了以下两个有趣的选择:

encapsulation: ViewEncapsulation.Native

和:

encapsulation: ViewEncapsulation.ShadowDom

结果，他们俩似乎都使用浏览器的影子dom实现。

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

最佳答案

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

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

     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: 所述