代码之家 › 专栏 › 技术社区 › slartidan

原生视图封装和shadowdom视图封装有什么区别?

angular7 shadow-dom angular

4

slartidan · 技术社区 · 7 年前

在我当前的Angular7应用程序中,我们正在努力处理库中的一个组件,它需要一些CSS资源。我们不希望将这些资源应用到应用程序的所有其他部分,而是应用到一个特定的组件、其子组件和孙子。

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

encapsulation: ViewEncapsulation.Native

还有:

encapsulation: ViewEncapsulation.ShadowDom

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

这些选项之间的区别是什么?

2 回复 | 直到 7 年前

1

3

SeleM 7 年前

这几天前一直困扰着我,然后我意识到 它们有点会聚,但不完全会聚。 . 事实上,不同之处在于 the newer version of shadowDOM (v1) . 正如你所看到的 here 在Angular的代码源中,他们为 ViewEncapsulation.ShadowDom :

在这里他们共享返回

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

然后他们检查是否 视图封装.shadowdom 是否 (其他条件)

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

因此, 视图封装.shadowdom 是添加支持的步骤 幽灵V1 和 也许吧 贬低 ViewEncapsulation.Native 如上所述 here:

将viewEncapsulation.shadow添加为新的API,而不是更改viewEncapsulation.native选项的行为,这可能导致对于当前使用v0 API的开发人员来说,这是意外的结果。这个应该(最终?)取消预测view封装.native选项。

2

0

Benneee_ 7 年前

Angular使用视图封装将样式和视图限制为它们在中提到的组件,我想您已经知道这一点了。 native没有很多细节,我知道它对浏览器是选择性的,并不是所有的浏览器都承认它。对于shadow dom,angular docs有一个解释,但是它并不太详细,但是这个摘录清除了一些部分:“注意shadow dom不是一个新事物,无论如何”浏览器已经使用它很长时间来封装元素的内部结构。以一个元素为例,显示默认的浏览器控件。您在DOM中看到的只是元素,但它的阴影DOM中包含一系列按钮和其他控件。shadow dom规范使您可以实际操作自己自定义元素的shadow dom。” 在这里看到更多: MDN Docs