Angular 5：在'ng build'之后，浏览器如何理解<app-root>是什么？

Question

我刚刚构建了我的第一个大型Angular应用程序，我总是认为在构建过程中，Angular将选择器转换为传统的DOM元素，如：

<div>

但是，当我用Firebug检查我的应用程序时，我可以看到：

<app-root>

在其他标签中，仍然存在。

浏览器如何理解如何呈现自定义HTML元素，如：

<app-root>

更新

Angular App会通过HTML验证吗？

Answer 1

它应该通过验证。 HTML Standard将创建<app-root>之类的元素描述为custom elements。 MDN很好地概述了如何创建自己的custom elements。

从高层次上讲，您需要创建一个JavaScript类来定义元素（也许扩展现有的元素类型，例如<p>）：

class Foo extends HTMLParagraphElement {...}

然后将其注册到Custome Element Registry：

customElements.define('foo', Foo, {extends: 'p'});

这将创建一个新的<foo>元素，该元素使用<p>类的定义扩展Foo元素的行为。