在角度应用程序中，通过 chrome 开发工具检查元素时，为啥我看不到纯 html？

Posted 2023-03-07

【中文标题】在角度应用程序中，通过 chrome 开发工具检查元素时，为啥我看不到纯 html？

【英文标题】：In angular application, while inspecting an element via chrome dev tool, why do I not see pure html?在角度应用程序中，通过 chrome 开发工具检查元素时，为什么我看不到纯 html？

【发布时间】：2018-08-14 23:47:29

【问题描述】：

我的问题基本上就是标题所说的：

如果浏览器不理解角度，为什么我在检查元素时看到角度，尽管使用了 AOT（浏览器中没有角度编译器）？

有没有看到带有纯 html 元素的 DOM？

例如 为什么我看到<k-dialog> 元素，当使用角组件的剑道对话框时？这些元素是被简单地忽略了，还是在幕后div？

【问题讨论】：

当我检查我的 Angular 应用程序的元素时，我看到了属于 Angular 的类、cmets 和属性，但我看到的仍然是所有标准的 DOM 元素。例如，没有 *ngIf 或 *ngFor。你能给我们举个例子，说明你所看到的你认为不“纯”的东西吗？

@kshetline 更新问题。

在我看来像 HTML，你是说自定义标签/元素不是有效的 HTML？

@epascarello，好的，即使它是一个有效的 HTML，在渲染过程中会发生什么？它是包含“div”元素还是被忽略？

单击kendo-dialog-* 元素之一并查看“元素”选项卡的右窗格。您会看到样式选项卡在默认情况下处于选中状态，并且从中应该能够知道它的样式（如果有的话）。

【参考方案1】：

您看到的是标准 HTML，因为 HTML5 允许自定义元素：

https://www.html5rocks.com/en/tutorials/webcomponents/customelements/

【讨论】：

这些自定义元素是渲染还是被浏览器忽略？

我的印象（这只是我的印象）是它们的行为非常类似于 span 或 div，具体取决于您分配给它们的 CSS 属性。