Angular 5：ng build后浏览器如何识别<app-root>？及HTML验证问题

嘿，恭喜你搞定第一个大型Angular应用！你的这两个问题其实挺典型的，我来给你细细说清楚：

首先得明确：<app-root>是Angular组件的宿主元素，它本质上属于自定义HTML标签，但和原生Web Components的自定义元素逻辑不太一样——Angular自己接管了它的渲染管控，而非完全依赖浏览器原生的自定义元素API（当然Angular也支持原生自定义元素，但默认组件并非如此）。

具体来说分两步：

• 浏览器的基础容错处理：现代浏览器（Chrome、Firefox、Edge等）对陌生标签有一套容错机制：它不会因为不认识这个标签就直接丢弃，而是会把它当作行内元素（默认display: inline）解析并保留在DOM树中。这就是你能在Firebug里看到<app-root>的原因，浏览器的这套机制保证了页面不会因为未知标签直接崩溃。
• Angular的渲染介入：当Angular应用启动时，它会扫描整个DOM树，找到所有匹配组件选择器的元素（比如<app-root>），然后把组件对应的模板内容挂载到这个宿主元素的内部。同时，Angular会全权负责这个宿主元素的生命周期管理、数据绑定、事件响应等操作。简单讲，<app-root>就是Angular组件的“外壳容器”，浏览器负责保留这个外壳，Angular负责填充和管理里面的内容。

另外补充一句：如果你的组件没给宿主元素设置样式，它会默认用行内元素的表现，所以有时候你需要在组件样式里用:host伪类来调整，比如写:host { display: block; }，让它表现得像块级元素。

这得看你用的验证标准和Angular的配置方式：

• 原生HTML验证（比如W3C校验工具）：默认情况下，Angular的自定义组件标签（像<app-root>、<app-header>这类）并不在HTML5的标准标签列表里，所以直接拿去校验的话，会被报“未知元素”的错误。
• 可行的解决办法：
  • 改用属性选择器：如果想让HTML完全符合标准，可以把组件的选择器改成属性形式，比如把selector: 'app-root'改成selector: '[app-root]'，然后在HTML里写<div app-root></div>。这样标签是标准的<div>，只是加了自定义属性，HTML验证就不会报错了。
  • 启用Angular Elements：把Angular组件打包成原生Web Components，这样你的自定义元素会被浏览器识别，自然也能通过HTML验证。不过这需要额外的配置，更适合需要跨框架复用组件的场景。
  • 忽略校验（内部项目可选）：如果是内部项目，其实不用太纠结这个——现代浏览器都能正常处理自定义标签，而且这种写法在Angular生态里是常规操作，完全不影响功能。

内容的提问来源于stack exchange，提问作者Charles Robertson