html - Angular 和 Shadow DOM 之间有什么关系

Question

在使用 <ng-content> 比较 Angular Content Projection 时使用 HTML 的 ShadowDOM ( ShadowDOM Visualizer )，我发现了细微的差别。

在上面提到的链接页面中，当我删除 select 时<content> 的属性在<header>标签，那么所有其他内容都附加到标题组件。

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

在查看上面的链接时，我在技术上怀旧了。于是，这个问题就出现在我的脑海里。

注意:我从 Google Developer's Web Fundamentals on Shadow DOM 重定向到该链接。

Answer 1

感谢您的提问!

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

你可以查看 this example与开发者工具。你会发现这些很奇怪 _ngcontent-pmu-c51属性。这是 Angular 模拟 ShadowDOM 的方式。

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

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

Code documentation

Good blog post about the view encapsulation

The similar question

更新:

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