Angular的<ng-content>和ShadowDOM有什么关系

Question

在将Angular Content Projection <ng-content>与HTML的ShadowDOM（ShadowDOM Visualizer）进行比较时，我发现了一个细微的区别。

在上述链接页面中，当我删除in 标记的select属性时，所有其他内容都将附加到标头组件。<content><header>

在Angular中，仅收集没有选择器的元素并将其附加到通配符 <ng-content></ng-content>

在查看以上链接时，我在技术上怀旧。因此，我想到了这个问题。

注意：我从Shadow DOM上的Google Developer的Web基础知识重定向到该链接。

Answer 1

谢谢你的问题！

我认为默认情况下 Angular 和 ShadowDOM 之间没有关系。如果你使用默认ViewEncapsulation.Emulated设置的Angular 将模拟 ShadowDOM。您可以使用 启用它，但仅限于支持此功能的浏览器。ViewEncapsulation.Native

您可以使用 DevTools 检查此示例。你会发现这些奇怪的_ngcontent-pmu-c51属性。这就是 Angular 模拟 ShadowDOM 的方式。

我希望我找到了你问题的答案。我期待您的反馈。

您可以在这里找到更多信息：

代码文档

关于视图封装的好博文

类似的问题

更新：

Angular 和 ShadowDOM 之间没有任何关系<ng-content>。也许，他们有一些相似的概念，但这是最多的。