Angular组件如何渲染到HTML？其模板在DOM中以什么形式存在？

1. DOM中组件标签的本质 #

你在元素检查器中看到的<app-root>、<fa-input>都是真实存在的DOM元素，但默认不属于Web Components规范定义的自定义元素，只是Angular根据你组件selector配置创建的普通宿主元素，浏览器不会对其做特殊处理，所有相关行为都由Angular框架管控。

2. Angular组件与Angular Elements、Web Components的关系 #

普通Angular组件只能在Angular项目环境内运行，而Angular Elements是Angular官方提供的转换工具，作用是把Angular组件转换成符合Web Components标准的自定义元素，转换后的组件可以脱离Angular环境，在任意前端框架、甚至纯HTML页面中直接使用。
简单来说：Web Components是浏览器原生支持的组件规范，Angular Elements是Angular对接该规范的适配层，你当前使用的普通Angular组件默认没有遵循Web Components规范。

3. Shadow DOM的使用规则 #

默认Angular组件不会开启Shadow DOM，使用的是Angular自研的模拟样式隔离机制（ViewEncapsulation.Emulated模式），如果需要开启原生Shadow DOM，需要在@Component配置中手动添加encapsulation: ViewEncapsulation.ShadowDom参数。
另外Shadow DOM和自定义元素是Web Components下的两个独立规范，自定义元素不强制要求使用Shadow DOM，开发者可以自由选择是否开启。

4. :host样式不生效的解决方法 #

你当前使用默认模拟隔离模式时，:host伪类选择的就是<fa-input>宿主元素本身，而非Shadow Root。样式不生效的原因是：自定义标签默认是行内元素（display: inline），行内元素的边框设置不会正常渲染，你只需要给:host添加块级属性即可：

:host {
  display: block; /* 或 inline-block 按需选择 */
  border: 1px solid grey;
}
input {
  border: none;
  outline: none;
}

1. 页面加载完成后，Angular运行时会首先定位到index.html中定义的<app-root>根宿主元素
2. 加载根模块对应的根组件，将根组件模板内容渲染到<app-root>内部
3. 运行过程中如果匹配到模板中注册的组件选择器（比如<fa-input>），就会实例化对应的组件，将组件模板内容插入到宿主标签内部，同时完成样式隔离、数据绑定、生命周期触发等逻辑

• 安装官方「Angular DevTools」扩展，可以直接在DevTools面板查看组件的属性、状态、依赖树，无需手动解析DOM
• Elements面板的设置中开启「Show user agent shadow DOM」选项，开启后可以直接查看Shadow DOM内部结构
• 选中DOM元素后，在控制台执行ng.getComponent($0)可以直接获取对应Angular组件实例，方便调试属性和方法
• 样式面板可以直接查看Angular生成的带属性前缀的隔离样式，快速定位样式冲突、不生效问题

内容的提问来源于stack exchange，提问作者Luobo Hu