时间戳

首页 > 解决方案 > Angular 之间有什么关系和 ShadowDOM

html - Angular 之间有什么关系和 ShadowDOM

问题描述

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

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

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

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

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

标签： htmlangularshadow-dom

解决方案

谢谢你的问题！

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

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

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

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

代码文档

关于视图封装的好博文

类似的问题

更新：

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

推荐阅读