9、ShadowDom-Angular封装HTML模板和CSS的方式

Angular封装HTML模板和CSS的三种方式：
- ShadowDom模式：使用浏览器原生方式渲染组件，但是不同浏览器的原生渲染方式是不一样的，存在浏览器之间的兼容问题
- emulated模式：即模拟模式，Angular默认的组件渲染方式，通过js模拟浏览器的原生渲染方式（即模拟ShadowDom模式），这个是为了完善在不同浏览器上的兼容性问题，性能当然是比不上浏览器原生渲染的，所以如果确保只是在chrome浏览器或者很新的浏览器上使用的话，那直接使用shadowDom模式是最高效的。当然如果为了兼容性问题，保持Angular的默认emulated模式是合适的。
- none模式：不使用渲染模式，直接会将组件的样式应用到全局。会污染全局环境，将之前的相同的选择器的样式覆盖。

ShadowDom模式：

组件类的TS文件中声明使用这种模式：

实现组件类的模板：

和对应的样式：

最后查看这种渲染方式在浏览器中的渲染结果：

Emulated模式

组件类的TS文件中声明使用这种模式：

实现组件类的模板：

和对应的样式：

最后查看这种渲染方式在浏览器中的渲染结果：

none模式

组件类的TS文件中声明使用这种模式：

实现组件类的模板：

和对应的样式：

最后查看这种渲染方式在浏览器中的渲染结果：