Angular的<ng-content>与ShadowDOM

Question

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

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

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

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

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

Answer 1

谢谢您的提问！

我认为默认情况下，Angular和ShadowDOM之间没有关系。如果您使用ViewEncapsulation.Emulated（默认设置为 ），角度将模拟ShadowDOM。您可以使用ViewEncapsulation.Native启用它，但只能在支持该功能的浏览器中使用。

您可以使用DevTools检查this example。您会发现这些奇怪的_ngcontent-pmu-c51属性。 这就是角度模拟ShadowDOM的方式。

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

您可以在此处找到更多信息：

Code documentation

Good blog post about the view encapsulation

The similar question

更新：

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