在我当前的 Angular 7 应用程序中，我们正在努力处理库中的一个组件，这需要一些 css 资源。我们不想将这些资源应用到应用程序的所有其余部分，而是应用到一个特定的组件，即它的子组件和孙子组件。
在我们的研究中，我们发现了以下两个有趣的选项：
encapsulation: ViewEncapsulation.Native
和：
encapsulation: ViewEncapsulation.ShadowDom
因此，它们似乎都使用了浏览器的 shadow dom 实现。
这些选项之间有什么区别？
【问题讨论】：
ViewEncapsulation.ShadowDom。另一方面，第二个没有ViewEncapsulation.Native 的文档（有提及，但没有描述）。
标签： angular shadow-dom angular7
几天前这一直让我感到困惑，然后我意识到它们有点收敛，但不是完全收敛。事实上，不同之处在于 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);
然后他们检查它是否是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 如所述here:
ViewEncapsulation.Shadow 作为新 API 添加，而不是更改 ViewEncapsulation.Native 选项的行为，这可能导致 给当前使用 v0 API 的开发人员带来意想不到的结果。这 应该（最终？）弃用 ViewEncapsulation.Native 选项。
【讨论】：
Angular 使用 ViewEncapsulation 将样式和视图限制在它们所提到的组件中，我想你已经知道这一点。 Native 没有太多细节，我所知道的是它对浏览器是有选择性的，并不是所有的浏览器都承认它。 对于 ShadowDom，Angular 文档有一个解释，但不是太详细，这个摘录虽然清除了一些部分：
“请注意，shadow DOM 无论如何都不是什么新鲜事物——浏览器长期以来一直使用它来封装元素的内部结构。以一个元素为例，它暴露了默认的浏览器控件。所有你在 DOM 中看到的是元素，但它在它的影子 DOM 中包含一系列按钮和其他控件。影子 DOM 规范已经做到了，这样你就可以实际操作你自己的自定义元素的影子 DOM。 在此处查看更多信息：MDN Docs
【讨论】：