Native 和 ShadowDom ViewEncapsulation 有什么区别？
What is the difference between Native and ShadowDom ViewEncapsulation?
在我当前的 angular 7 应用程序中，我们正在努力处理库中的一个组件，它需要一些 css 资源。我们不想将这些资源应用到我们应用程序的所有其余部分，而是应用到一个特定的组件，它的子组件和孙组件。
在我们的研究过程中，我们发现了以下两个有趣的选项：
encapsulation: ViewEncapsulation.Native
和：
encapsulation: ViewEncapsulation.ShadowDom
因此，它们似乎都使用了浏览器的影子 dom 实现。
这些选项有什么区别？
Angular 使用 ViewEncapsulation 将样式和视图限制在他们已经提到的组件中，我想你已经知道了。
Native 没有太多细节，我所知道的是它对浏览器有选择性，并不是所有的浏览器都承认它。
对于 ShadowDom，Angular 文档有解释，但不是太详细，但此摘录清除了一些部分：
"Note that the shadow DOM is not a new thing by any means — browsers have used it for a long time to encapsulate the inner structure of an element. Think for example of a element, with the default browser controls exposed. All you see in the DOM is the element, but it contains a series of buttons and other controls inside its shadow DOM. The shadow DOM spec has made it so that you are allowed to actually manipulate the shadow DOM of your own custom elements."
See more here: MDN Docs
几天前这一直让我感到困惑，然后我意识到它们收敛了一点但没有完全收敛。事实上，不同之处在于 the newer version of shadowDOM (v1). As you can see here 在 angular 的代码源中，他们为 ViewEncapsulation.ShadowDom[= 添加了另一个条件32=]:
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添加支持的一步，也许 按照 here:
的描述弃用 ViewEncapsulation.Native
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.
在我当前的 angular 7 应用程序中，我们正在努力处理库中的一个组件，它需要一些 css 资源。我们不想将这些资源应用到我们应用程序的所有其余部分，而是应用到一个特定的组件，它的子组件和孙组件。
在我们的研究过程中，我们发现了以下两个有趣的选项：
encapsulation: ViewEncapsulation.Native
和：
encapsulation: ViewEncapsulation.ShadowDom
因此，它们似乎都使用了浏览器的影子 dom 实现。
这些选项有什么区别？
Angular 使用 ViewEncapsulation 将样式和视图限制在他们已经提到的组件中，我想你已经知道了。 Native 没有太多细节，我所知道的是它对浏览器有选择性，并不是所有的浏览器都承认它。 对于 ShadowDom，Angular 文档有解释，但不是太详细，但此摘录清除了一些部分：
"Note that the shadow DOM is not a new thing by any means — browsers have used it for a long time to encapsulate the inner structure of an element. Think for example of a element, with the default browser controls exposed. All you see in the DOM is the element, but it contains a series of buttons and other controls inside its shadow DOM. The shadow DOM spec has made it so that you are allowed to actually manipulate the shadow DOM of your own custom elements." See more here: MDN Docs
几天前这一直让我感到困惑，然后我意识到它们收敛了一点但没有完全收敛。事实上，不同之处在于 the newer version of shadowDOM (v1). As you can see here 在 angular 的代码源中，他们为 ViewEncapsulation.ShadowDom[= 添加了另一个条件32=]:
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添加支持的一步，也许 按照 here:
ViewEncapsulation.Native
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.