Angular如何进行视图封装？
<p><a href="https://www.php.cn/course/list/20.html" target="_blank" style="margin: 0px; padding: 0px; color: rgb(61, 167, 13); font-family: Helvetica Neue, Helvetica, PingFang SC, 微软雅黑, Tahoma, Arial, sans-serif; font-size: 14px; white-space: normal; background-color: rgb(255, 255, 255); text-decoration-line: none !important;">Angular</a><span style="font-family: Helvetica Neue, Helvetica, PingFang SC, 微软雅黑, Tahoma, Arial, sans-serif; font-size: 14px; background-color: rgb(255, 255, 255);">如何进行视图封装？下面本篇文章给大家深入了解一下Angular Encapsulation的三种方式，希望对大家有所帮助！</span></p><p style="margin-top: 15px; margin-bottom: 15px; padding: 0px 0px 0px 10px; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); color: rgb(61, 70, 77); box-sizing: border-box; border-radius: 8px; font-family: Helvetica Neue, Helvetica, PingFang SC, 微软雅黑, Tahoma, Arial, sans-serif; white-space: normal; background-color: rgb(255, 255, 255);"><br/></p><p style="margin-top: 15px; margin-bottom: 15px; padding: 0px 0px 0px 10px; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); color: rgb(61, 70, 77); box-sizing: border-box; border-radius: 8px; font-family: Helvetica Neue, Helvetica, PingFang SC, 微软雅黑, Tahoma, Arial, sans-serif; white-space: normal; background-color: rgb(255, 255, 255);"></p><p style="margin-top: 15px; margin-bottom: 15px; padding: 0px 0px 0px 10px; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); color: rgb(61, 70, 77); box-sizing: border-box; border-radius: 8px; font-family: Helvetica Neue, Helvetica, PingFang SC, 微软雅黑, Tahoma, Arial, sans-serif; white-space: normal; background-color: rgb(255, 255, 255);">在日常工作中，当我们定义一个<strong style="margin: 0px; padding: 0px;">Component</strong>的时候，要考虑它的<strong style="margin: 0px; padding: 0px;">encapsulation</strong>封装性，也就是说你期望这个组件里定义的样式是只作用于这个组件，还是想作用于全局。在 Angular 中，组件的样式可以封装在组件的宿主元素中，这样它们就不会影响应用程序的其余部分。<a href="https://angular.cn/api/core/Component" target="_blank" textvalue="Component" style="margin: 0px; padding: 0px; color: rgb(61, 167, 13); text-decoration-line: none !important;">Component</a> 的装饰器提供了 <a href="https://angular.cn/api/core/Component#encapsulation" target="_blank" textvalue="encapsulation" style="margin: 0px; padding: 0px; color: rgb(61, 167, 13); text-decoration-line: none !important;">encapsulation</a> 选项，可用来控制如何基于每个组件应用视图封装。【相关教程推荐：《<a href="https://www.php.cn/course/list/20.html" target="_blank" style="margin: 0px; padding: 0px; color: rgb(61, 167, 13); text-decoration-line: none !important;">angular教程</a>》】</p><h2 data-id="heading-0" style="margin: 0px; padding: 0px 0px 0px 10px; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); font-family: Helvetica Neue, Helvetica, PingFang SC, 微软雅黑, Tahoma, Arial, sans-serif; white-space: normal; background-color: rgb(255, 255, 255);"><strong style="margin: 0px; padding: 0px;">ViewEncapsulation</strong></h2><p style="margin-top: 15px; margin-bottom: 15px; padding: 0px 0px 0px 10px; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); color: rgb(61, 70, 77); box-sizing: border-box; border-radius: 8px; font-family: Helvetica Neue, Helvetica, PingFang SC, 微软雅黑, Tahoma, Arial, sans-serif; white-space: normal; background-color: rgb(255, 255, 255);">Angular中有三种封装模式，分别是ViewEncapsulation.ShadowDom，ViewEncapsulation.Emulated，ViewEncapsulation.None。</p><table class="wcn_c_table" cellpadding="0" cellspacing="0" width="760"><tbody style="margin: 0px !important; padding: 0px !important; border-radius: 0px !important; background: none !important; border: 0px !important; inset: auto !important; float: none !important; line-height: 1.1em !important; outline: 0px !important; overflow: visible !important; position: static !important; vertical-align: baseline !important; width: auto !important; box-sizing: content-box !important; min-height: auto !important;"><tr style="margin: 0px !important; padding: 0px !important; border-radius: 0px !important; background: none !important; border: 0px !important; inset: auto !important; float: none !important; line-height: 1.1em !important; outline: 0px !important; overflow: visible !important; position: static !important; vertical-align: baseline !important; width: auto !important; box-sizing: content-box !important; min-height: auto !important;" class="firstRow"><td class="gutter" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); margin: 0px !important; border-radius: 4px 0px 0px 4px !important; background: none !important; inset: auto !important; float: none !important; line-height: 1.1em !important; outline: 0px !important; overflow: visible !important; position: static !important; vertical-align: baseline !important; box-sizing: content-box !important; min-height: auto !important; color: rgb(175, 175, 175) !important; user-select: none !important;" width="NaN"><p class="line number1 index0 alt2" style="margin-top: 15px; margin-bottom: 15px; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); line-height: 1.5em; border-radius: 8px; font-size: 16px; color: rgb(61, 70, 77); box-sizing: border-box; padding-right: 0.5em !important; padding-left: 1em !important; border-left: 3px solid rgb(67, 90, 95) !important; white-space: pre-wrap !important; text-align: right !important;">1</p><p class="line number2 index1 alt1" style="margin-top: 15px; margin-bottom: 15px; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); line-height: 1.5em; border-radius: 8px; font-size: 16px; color: rgb(61, 70, 77); box-sizing: border-box; padding-right: 0.5em !important; padding-left: 1em !important; border-left: 3px solid rgb(67, 90, 95) !important; white-space: pre-wrap !important; text-align: right !important;">2</p><p class="line number3 index2 alt2" style="margin-top: 15px; margin-bottom: 15px; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); line-height: 1.5em; border-radius: 8px; font-size: 16px; color: rgb(61, 70, 77); box-sizing: border-box; padding-right: 0.5em !important; padding-left: 1em !important; border-left: 3px solid rgb(67, 90, 95) !important; white-space: pre-wrap !important; text-align: right !important;">3</p><p class="line number4 index3 alt1" style="margin-top: 15px; margin-bottom: 15px; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); line-height: 1.5em; border-radius: 8px; font-size: 16px; color: rgb(61, 70, 77); box-sizing: border-box; padding-right: 0.5em !important; padding-left: 1em !important; border-left: 3px solid rgb(67, 90, 95) !important; white-space: pre-wrap !important; text-align: right !important;">4</p><p class="line number5 index4 alt2" style="margin-top: 15px; margin-bottom: 15px; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); line-height: 1.5em; border-radius: 8px; font-size: 16px; color: rgb(61, 70, 77); box-sizing: border-box; padding-right: 0.5em !important; padding-left: 1em !important; border-left: 3px solid rgb(67, 90, 95) !important; white-space: pre-wrap !important; text-align: right !important;">5</p><p class="line number6 index5 alt1" style="margin-top: 15px; margin-bottom: 15px; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); line-height: 1.5em; border-radius: 8px; font-size: 16px; color: rgb(61, 70, 77); box-sizing: border-box; padding-right: 0.5em !important; padding-left: 1em !important; border-left: 3px solid rgb(67, 90, 95) !important; white-space: pre-wrap !important; text-align: right !important;">6</p><p class="line number7 index6 alt2" style="margin-top: 15px; margin-bottom: 15px; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); line-height: 1.5em; border-radius: 8px; font-size: 16px; color: rgb(61, 70, 77); box-sizing: border-box; padding-right: 0.5em !important; padding-left: 1em !important; border-left: 3px solid rgb(67, 90, 95) !important; white-space: pre-wrap !important; text-align: right !important;">7</p><p class="line number8 index7 alt1" style="margin-top: 15px; margin-bottom: 15px; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); line-height: 1.5em; border-radius: 8px; font-size: 16px; color: rgb(61, 70, 77); box-sizing: border-box; padding-right: 0.5em !important; padding-left: 1em !important; border-left: 3px solid rgb(67, 90, 95) !important; white-space: pre-wrap !important; text-align: right !important;">8</p><p class="line number9 index8 alt2" style="margin-top: 15px; margin-bottom: 15px; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); line-height: 1.5em; border-radius: 8px; font-size: 16px; color: rgb(61, 70, 77); box-sizing: border-box; padding-right: 0.5em !important; padding-left: 1em !important; border-left: 3px solid rgb(67, 90, 95) !important; white-space: pre-wrap !important; text-align: right !important;">9</p><p class="line number10 index9 alt1" style="margin-top: 15px; margin-bottom: 15px; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); line-height: 1.5em; border-radius: 8px; font-size: 16px; color: rgb(61, 70, 77); box-sizing: border-box; padding-right: 0.5em !important; padding-left: 1em !important; border-left: 3px solid rgb(67, 90, 95) !important; white-space: pre-wrap !important; text-align: right !important;">10</p><p class="line number11 index10 alt2" style="margin-top: 15px; margin-bottom: 15px; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); line-height: 1.5em; border-radius: 8px; font-size: 16px; color: rgb(61, 70, 77); box-sizing: border-box; padding-right: 0.5em !important; padding-left: 1em !important; border-left: 3px solid rgb(67, 90, 95) !important; white-space: pre-wrap !important; text-align: right !important;">11</p><p class="line number12 index11 alt1" style="margin-top: 15px; margin-bottom: 15px; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); line-height: 1.5em; border-radius: 8px; font-size: 16px; color: rgb(61, 70, 77); box-sizing: border-box; padding-right: 0.5em !important; padding-left: 1em !important; border-left: 3px solid rgb(67, 90, 95) !important; white-space: pre-wrap !important; text-align: right !important;">12</p><p class="line number13 index12 alt2" style="margin-top: 15px; margin-bottom: 15px; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); line-height: 1.5em; border-radius: 8px; font-size: 16px; color: rgb(61, 70, 77); box-sizing: border-box; padding-right: 0.5em !important; padding-left: 1em !important; border-left: 3px solid rgb(67, 90, 95) !important; white-space: pre-wrap !important; text-align: right !important;">13</p><p class="line number14 index13 alt1" style="margin-top: 15px; margin-bottom: 15px; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); line-height: 1.5em; border-radius: 8px; font-size: 16px; color: rgb(61, 70, 77); box-sizing: border-box; padding-right: 0.5em !important; padding-left: 1em !important; border-left: 3px solid rgb(67, 90, 95) !important; white-space: pre-wrap !important; text-align: right !important;">14</p><p class="line number15 index14 alt2" style="margin-top: 15px; margin-bottom: 15px; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); line-height: 1.5em; border-radius: 8px; font-size: 16px; color: rgb(61, 70, 77); box-sizing: border-box; padding-right: 0.5em !important; padding-left: 1em !important; border-left: 3px solid rgb(67, 90, 95) !important; white-space: pre-wrap !important; text-align: right !important;">15</p><p class="line number16 index15 alt1" style="margin-top: 15px; margin-bottom: 15px; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); line-height: 1.5em; border-radius: 8px; font-size: 16px; color: rgb(61, 70, 77); box-sizing: border-box; padding-right: 0.5em !important; padding-left: 1em !important; border-left: 3px solid rgb(67, 90, 95) !important; white-space: pre-wrap !important; text-align: right !important;">16</p><p class="line number17 index16 alt2" style="margin-top: 15px; margin-bottom: 15px; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); line-height: 1.5em; border-radius: 8px; font-size: 16px; color: rgb(61, 70, 77); box-sizing: border-box; padding-right: 0.5em !important; padding-left: 1em !important; border-left: 3px solid rgb(67, 90, 95) !important; white-space: pre-wrap !important; text-align: right !important;">17</p><p class="line number18 index17 alt1" style="margin-top: 15px; margin-bottom: 15px; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); line-height: 1.5em; border-radius: 8px; font-size: 16px; color: rgb(61, 70, 77); box-sizing: border-box; padding-right: 0.5em !important; padding-left: 1em !important; border-left: 3px solid rgb(67, 90, 95) !important; white-space: pre-wrap !important; text-align: right !important;">18</p><p class="line number19 index18 alt2" style="margin-top: 15px; margin-bottom: 15px; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); line-height: 1.5em; border-radius: 8px; font-size: 16px; color: rgb(61, 70, 77); box-sizing: border-box; padding-right: 0.5em !important; padding-left: 1em !important; border-left: 3px solid rgb(67, 90, 95) !important; white-space: pre-wrap !important; text-align: right !important;">19</p><p class="line number20 index19 alt1" style="margin-top: 15px; margin-bottom: 15px; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); line-height: 1.5em; border-radius: 8px; font-size: 16px; color: rgb(61, 70, 77); box-sizing: border-box; padding-right: 0.5em !important; padding-left: 1em !important; border-left: 3px solid rgb(67, 90, 95) !important; white-space: pre-wrap !important; text-align: right !important;">20</p><p class="line number21 index20 alt2" style="margin-top: 15px; margin-bottom: 15px; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); line-height: 1.5em; border-radius: 8px; font-size: 16px; color: rgb(61, 70, 77); box-sizing: border-box; padding-right: 0.5em !important; padding-left: 1em !important; border-left: 3px solid rgb(67, 90, 95) !important; white-space: pre-wrap !important; text-align: right !important;">21</p><p class="line number22 index21 alt1" style="margin-top: 15px; margin-bottom: 15px; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); line-height: 1.5em; border-radius: 8px; font-size: 16px; color: rgb(61, 70, 77); box-sizing: border-box; padding-right: 0.5em !important; padding-left: 1em !important; border-left: 3px solid rgb(67, 90, 95) !important; white-space: pre-wrap !important; text-align: right !important;">22</p></td><td class="code" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); word-break: break-all; margin: 0px !important; border-radius: 0px !important; background: none !important; inset: auto !important; float: none !important; line-height: 1.1em !important; outline: 0px !important; overflow: visible !important; position: static !important; vertical-align: baseline !important; box-sizing: content-box !important; min-height: auto !important;" width="712"><p class="line number1 index0 alt2" style="margin-top: 15px; margin-bottom: 15px; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); line-height: 1.5em; border-radius: 8px; font-size: 16px; color: rgb(61, 70, 77); box-sizing: border-box; padding-right: 1em !important; padding-left: 1em !important; border-left: 3px solid rgb(67, 90, 95) !important; white-space: pre-wrap !important;"><code class="js plain" style="padding: 2px 4px; font-size: 13px; color: rgb(199, 37, 78); background-color: rgb(249, 242, 244); border-radius: 4px; font-family: Monaco, Menlo, Consolas, Courier New, monospace; margin: 0px !important; background-image: none !important; background-position: initial !important; background-size: initial !important; background-repeat: initial !important; background-attachment: initial !important; background-origin: initial !important; background-clip: initial !important; border: 0px !important; inset: auto !important; float: none !important; line-height: 1.5em !important; outline: 0px !important; overflow: visible !important; position: static !important; vertical-align: baseline !important; width: auto !important; box-sizing: content-box !important; min-height: auto !important;">export enum ViewEncapsulation {</code></p><p class="line number2 index1 alt1" style="margin-top: 15px; margin-bottom: 15px; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); line-height: 1.5em; border-radius: 8px; font-size: 16px; color: rgb(61, 70, 77); box-sizing: border-box; padding-right: 1em !important; padding-left: 1em !important; border-left: 3px solid rgb(67, 90, 95) !important; white-space: pre-wrap !important;"><code class="js spaces" style="padding: 2px 4px; font-size: 13px; color: rgb(199, 37, 78); background-color: rgb(249, 242, 244); border-radius: 4px; font-family: Monaco, Menlo, Consolas, Courier New, monospace; margin: 0px !important; background-image: none !important; background-position: initial !important; background-size: initial !important; background-repeat: initial !important; background-attachment: initial !important; background-origin: initial !important; background-clip: initial !important; border: 0px !important; inset: auto !important; float: none !important; line-height: 1.5em !important; outline: 0px !important; overflow: visible !important; position: static !important; vertical-align: baseline !important; width: auto !important; box-sizing: content-box !important; min-height: auto !important;"> </code><code class="js comments" style="padding: 2px 4px; font-size: 13px; color: rgb(199, 37, 78); background-color: rgb(249, 242, 244); border-radius: 4px; font-family: Monaco, Menlo, Consolas, Courier New, monospace; margin: 0px !important; background-image: none !important; background-position: initial !important; background-size: initial !important; background-repeat: initial !important; background-attachment: initial !important; background-origin: initial !important; background-clip: initial !important; border: 0px !important; inset: auto !important; float: none !important; line-height: 1.5em !important; outline: 0px !important; overflow: visible !important; position: static !important; vertical-align: baseline !important; width: auto !important; box-sizing: content-box !important; min-height: auto !important;">/**</code></p><p class="line number3 index2 alt2" style="margin-top: 15px; margin-bottom: 15px; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); line-height: 1.5em; border-radius: 8px; font-size: 16px; color: rgb(61, 70, 77); box-sizing: border-box; padding-right: 1em !important; padding-left: 1em !important; border-left: 3px solid rgb(67, 90, 95) !important; white-space: pre-wrap !important;"><code class="js spaces" style="padding: 2px 4px; font-size: 13px; color: rgb(199, 37, 78); background-color: rgb(249, 242, 244); border-radius: 4px; font-family: Monaco, Menlo, Consolas, Courier New, monospace; margin: 0px !important; background-image: none !important; background-position: initial !important; background-size: initial !important; background-repeat: initial !important; background-attachment: initial !important; background-origin: initial !important; background-clip: initial !important; border: 0px !important; inset: auto !important; float: none !important; line-height: 1.5em !important; outline: 0px !important; overflow: visible !important; position: static !important; vertical-align: baseline !important; width: auto !important; box-sizing: content-box !important; min-height: auto !important;"> </code><code class="js comments" style="padding: 2px 4px; font-size: 13px; color: rgb(199, 37, 78); background-color: rgb(249, 242, 244); border-radius: 4px; font-family: Monaco, Menlo, Consolas, Courier New, monospace; margin: 0px !important; background-image: none !important; background-position: initial !important; background-size: initial !important; background-repeat: initial !important; background-attachment: initial !important; background-origin: initial !important; background-clip: initial !important; border: 0px !important; inset: auto !important; float: none !important; line-height: 1.5em !important; outline: 0px !important; overflow: visible !important; position: static !important; vertical-align: baseline !important; width: auto !important; box-sizing: content-box !important; min-height: auto !important;">* Emulates a native Shadow DOM encapsulation behavior by adding a specific attribute to the</code></p><p class="line number4 index3 alt1" style="margin-top: 15px; margin-bottom: 15px; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); line-height: 1.5em; border-radius: 8px; font-size: 16px; color: rgb(61, 70, 77); box-sizing: border-box; padding-right: 1em !important; padding-left: 1em !important; border-left: 3px solid rgb(67, 90, 95) !important; white-space: pre-wrap !important;"><code class="js spaces" style="padding: 2px 4px; font-size: 13px; color: rgb(199, 37, 78); background-color: rgb(249, 242, 244); border-radius: 4px; font-family: Monaco, Menlo, Consolas, Courier New, monospace; margin: 0px !important; background-image: none !important; background-position: initial !important; background-size: initial !important; background-repeat: initial !important; background-attachment: initial !important; background-origin: initial !important; background-clip: initial !important; border: 0px !important; inset: auto !important; float: none !important; line-height: 1.5em !important; outline: 0px !important; overflow: visible !important; position: static !important; vertical-align: baseline !important; width: auto !important; box-sizing: content-box !important; min-height: auto !important;"> </code><code class="js comments" style="padding: 2px 4px; font-size: 13px; color: rgb(199, 37, 78); background-color: rgb(249, 242, 244); border-radius: 4px; font-family: Monaco, Menlo, Consolas, Courier New, monospace; margin: 0px !important; background-image: none !important; background-position: initial !important; background-size: initial !important; background-repeat: initial !important; background-attachment: initial !important; background-origin: initial !important; background-clip: initial !important; border: 0px !important; inset: auto !important; float: none !important; line-height: 1.5em !important; outline: 0px !important; overflow: visible !important; position: static !important; vertical-align: baseline !important; width: auto !important; box-sizing: content-box !important; min-height: auto !important;">* components host element and applying the same attribute to all the CSS selectors provided</code></p><p class="line number5 index4 alt2" style="margin-top: 15px; margin-bottom: 15px; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); line-height: 1.5em; border-radius: 8px; font-size: 16px; color: rgb(61, 70, 77); box-sizing: border-box; padding-right: 1em !important; padding-left: 1em !important; border-left: 3px solid rgb(67, 90, 95) !important; white-space: pre-wrap !important;"><code class="js spaces" style="padding: 2px 4px; font-size: 13px; color: rgb(199, 37, 78); background-color: rgb(249, 242, 244); border-radius: 4px; font-family: Monaco, Menlo, Consolas, Courier New, monospace; margin: 0px !important; background-image: none !important; background-position: initial !important; background-size: initial !important; background-repeat: initial !important; background-attachment: initial !important; background-origin: initial !important; background-clip: initial !important; border: 0px !important; inset: auto !important; float: none !important; line-height: 1.5em !important; outline: 0px !important; overflow: visible !important; position: static !important; vertical-align: baseline !important; width: auto !important; box-sizing: content-box !important; min-height: auto !important;"> </code><code class="js comments" style="padding: 2px 4px; font-size: 13px; color: rgb(199, 37, 78); background-color: rgb(249, 242, 244); border-radius: 4px; font-family: Monaco, Menlo, Consolas, Courier New, monospace; margin: 0px !important; background-image: none !important; background-position: initial !important; background-size: initial !important; background-repeat: initial !important; background-attachment: initial !important; background-origin: initial !important; background-clip: initial !important; border: 0px !important; inset: auto !important; float: none !important; line-height: 1.5em !important; outline: 0px !important; overflow: visible !important; position: static !important; vertical-align: baseline !important; width: auto !important; box-sizing: content-box !important; min-height: auto !important;">* via {@link Component#styles styles} or {@link Component#styleUrls styleUrls}.</code></p><p class="line number6 index5 alt1" style="margin-top: 15px; margin-bottom: 15px; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); line-height: 1.5em; border-radius: 8px; font-size: 16px; color: rgb(61, 70, 77); box-sizing: border-box; padding-right: 1em !important; padding-left: 1em !important; border-left: 3px solid rgb(67, 90, 95) !important; white-space: pre-wrap !important;"><code class="js spaces" style="padding: 2px 4px; font-size: 13px; color: rgb(199, 37, 78); background-color: rgb(249, 242, 244); border-radius: 4px; font-family: Monaco, Menlo, Consolas, Courier New, monospace; margin: 0px !important; background-image: none !important; background-position: initial !important; background-size: initial !important; background-repeat: initial !important; background-attachment: initial !important; background-origin: initial !important; background-clip: initial !important; border: 0px !important; inset: auto !important; float: none !important; line-height: 1.5em !important; outline: 0px !important; overflow: visible !important; position: static !important; vertical-align: baseline !important; width: auto !important; box-sizing: content-box !important; min-height: auto !important;"> </code><code class="js comments" style="padding: 2px 4px; font-size: 13px; color: rgb(199, 37, 78); background-color: rgb(249, 242, 244); border-radius: 4px; font-family: Monaco, Menlo, Consolas, Courier New, monospace; margin: 0px !important; background-image: none !important; background-position: initial !important; background-size: initial !important; background-repeat: initial !important; background-attachment: initial !important; background-origin: initial !important; background-clip: initial !important; border: 0px !important; inset: auto !important; float: none !important; line-height: 1.5em !important; outline: 0px !important; overflow: visible !important; position: static !important; vertical-align: baseline !important; width: auto !important; box-sizing: content-box !important; min-height: auto !important;">*</code></p><p class="line number7 index6 alt2" style="margin-top: 15px; margin-bottom: 15px; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); line-height: 1.5em; border-radius: 8px; font-size: 16px; color: rgb(61, 70, 77); box-sizing: border-box; padding-right: 1em !important; padding-left: 1em !important; border-left: 3px solid rgb(67, 90, 95) !important; white-space: pre-wrap !important;"><code class="js spaces" style="padding: 2px 4px; font-size: 13px; color: rgb(199, 37, 78); background-color: rgb(249, 242, 244); border-radius: 4px; font-family: Monaco, Menlo, Consolas, Courier New, monospace; margin: 0px !important; background-image: none !important; background-position: initial !important; background-size: initial !important; background-repeat: initial !important; background-attachment: initial !important; background-origin: initial !important; background-clip: initial !important; border: 0px !important; inset: auto !important; float: none !important; line-height: 1.5em !important; outline: 0px !important; overflow: visible !important; position: static !important; vertical-align: baseline !important; width: auto !important; box-sizing: content-box !important; min-height: auto !important;"> </code><code class="js comments" style="padding: 2px 4px; font-size: 13px; color: rgb(199, 37, 78); background-color: rgb(249, 242, 244); border-radius: 4px; font-family: Monaco, Menlo, Consolas, Courier New, monospace; margin: 0px !important; background-image: none !important; background-position: initial !important; background-size: initial !important; background-repeat: initial !important; background-attachment: initial !important; background-origin: initial !important; background-clip: initial !important; border: 0px !important; inset: auto !important; float: none !important; line-height: 1.5em !important; outline: 0px !important; overflow: visible !important; position: static !important; vertical-align: baseline !important; width: auto !important; box-sizing: content-box !important; min-height: auto !important;">* This is the default option.</code></p><p class="line number8 index7 alt1" style="margin-top: 15px; margin-bottom: 15px; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); line-height: 1.5em; border-radius: 8px; font-size: 16px; color: rgb(61, 70, 77); box-sizing: border-box; padding-right: 1em !important; padding-left: 1em !important; border-left: 3px solid rgb(67, 90, 95) !important; white-space: pre-wrap !important;"><code class="js spaces" style="padding: 2px 4px; font-size: 13px; color: rgb(199, 37, 78); background-color: rgb(249, 242, 244); border-radius: 4px; font-family: Monaco, Menlo, Consolas, Courier New, monospace; margin: 0px !important; background-image: none !important; background-position: initial !important; background-size: initial !important; background-repeat: initial !important; background-attachment: initial !important; background-origin: initial !important; background-clip: initial !important; border: 0px !important; inset: auto !important; float: none !important; line-height: 1.5em !important; outline: 0px !important; overflow: visible !important; position: static !important; vertical-align: baseline !important; width: auto !important; box-sizing: content-box !important; min-height: auto !important;"> </code><code class="js comments" style="padding: 2px 4px; font-size: 13px; color: rgb(199, 37, 78); background-color: rgb(249, 242, 244); border-radius: 4px; font-family: Monaco, Menlo, Consolas, Courier New, monospace; margin: 0px !important; background-image: none !important; background-position: initial !important; background-size: initial !important; background-repeat: initial !important; background-attachment: initial !important; background-origin: initial !important; background-clip: initial !important; border: 0px !important; inset: auto !important; float: none !important; line-height: 1.5em !important; outline: 0px !important; overflow: visible !important; position: static !important; vertical-align: baseline !important; width: auto !important; box-sizing: content-box !important; min-height: auto !important;">*/</code></p><p class="line number9 index8 alt2" style="margin-top: 15px; margin-bottom: 15px; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); line-height: 1.5em; border-radius: 8px; font-size: 16px; color: rgb(61, 70, 77); box-sizing: border-box; padding-right: 1em !important; padding-left: 1em !important; border-left: 3px solid rgb(67, 90, 95) !important; white-space: pre-wrap !important;"><code class="js spaces" style="padding: 2px 4px; font-size: 13px; color: rgb(199, 37, 78); background-color: rgb(249, 242, 244); border-radius: 4px; font-family: Monaco, Menlo, Consolas, Courier New, monospace; margin: 0px !important; background-image: none !important; background-position: initial !important; background-size: initial !important; background-repeat: initial !important; background-attachment: initial !important; background-origin: initial !important; background-clip: initial !important; border: 0px !important; inset: auto !important; float: none !important; line-height: 1.5em !important; outline: 0px !important; overflow: visible !important; position: static !important; vertical-align: baseline !important; width: auto !important; box-sizing: content-box !important; min-height: auto !important;"> </code><code class="js plain" style="padding: 2px 4px; font-size: 13px; color: rgb(199, 37, 78); background-color: rgb(249, 242, 244); border-radius: 4px; font-family: Monaco, Menlo, Consolas, Courier New, monospace; margin: 0px !important; background-image: none !important; background-position: initial !important; background-size: initial !important; background-repeat: initial !important; background-attachment: initial !important; background-origin: initial !important; background-clip: initial !important; border: 0px !important; inset: auto !important; float: none !important; line-height: 1.5em !important; outline: 0px !important; overflow: visible !important; position: static !important; vertical-align: baseline !important; width: auto !important; box-sizing: content-box !important; min-height: auto !important;">Emulated = 0,</code></p><p class="line number10 index9 alt1" style="margin-top: 15px; margin-bottom: 15px; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); line-height: 1.5em; border-radius: 8px; font-size: 16px; color: rgb(61, 70, 77); box-sizing: border-box; padding-right: 1em !important; padding-left: 1em !important; border-left: 3px solid rgb(67, 90, 95) !important; white-space: pre-wrap !important;"><code class="js spaces" style="padding: 2px 4px; font-size: 13px; color: rgb(199, 37, 78); background-color: rgb(249, 242, 244); border-radius: 4px; font-family: Monaco, Menlo, Consolas, Courier New, monospace; margin: 0px !important; background-image: none !important; background-position: initial !important; background-size: initial !important; background-repeat: initial !important; background-attachment: initial !important; background-origin: initial !important; background-clip: initial !important; border: 0px !important; inset: auto !important; float: none !important; line-height: 1.5em !important; outline: 0px !important; overflow: visible !important; position: static !important; vertical-align: baseline !important; width: auto !important; box-sizing: content-box !important; min-height: auto !important;"> </code><code class="js comments" style="padding: 2px 4px; font-size: 13px; color: rgb(199, 37, 78); background-color: rgb(249, 242, 244); border-radius: 4px; font-family: Monaco, Menlo, Consolas, Courier New, monospace; margin: 0px !important; background-image: none !important; background-position: initial !important; background-size: initial !important; background-repeat: initial !important; background-attachment: initial !important; background-origin: initial !important; background-clip: initial !important; border: 0px !important; inset: auto !important; float: none !important; line-height: 1.5em !important; outline: 0px !important; overflow: visible !important; position: static !important; vertical-align: baseline !important; width: auto !important; box-sizing: content-box !important; min-height: auto !important;">/**</code></p><p class="line number11 index10 alt2" style="margin-top: 15px; margin-bottom: 15px; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); line-height: 1.5em; border-radius: 8px; font-size: 16px; color: rgb(61, 70, 77); box-sizing: border-box; padding-right: 1em !important; padding-left: 1em !important; border-left: 3px solid rgb(67, 90, 95) !important; white-space: pre-wrap !important;"><code class="js spaces" style="padding: 2px 4px; font-size: 13px; color: rgb(199, 37, 78); background-color: rgb(249, 242, 244); border-radius: 4px; font-family: Monaco, Menlo, Consolas, Courier New, monospace; margin: 0px !important; background-image: none !important; background-position: initial !important; background-size: initial !important; background-repeat: initial !important; background-attachment: initial !important; background-origin: initial !important; background-clip: initial !important; border: 0px !important; inset: auto !important; float: none !important; line-height: 1.5em !important; outline: 0px !important; overflow: visible !important; position: static !important; vertical-align: baseline !important; width: auto !important; box-sizing: content-box !important; min-height: auto !important;"> </code><code class="js comments" style="padding: 2px 4px; font-size: 13px; color: rgb(199, 37, 78); background-color: rgb(249, 242, 244); border-radius: 4px; font-family: Monaco, Menlo, Consolas, Courier New, monospace; margin: 0px !important; background-image: none !important; background-position: initial !important; background-size: initial !important; background-repeat: initial !important; background-attachment: initial !important; background-origin: initial !important; background-clip: initial !important; border: 0px !important; inset: auto !important; float: none !important; line-height: 1.5em !important; outline: 0px !important; overflow: visible !important; position: static !important; vertical-align: baseline !important; width: auto !important; box-sizing: content-box !important; min-height: auto !important;">* Doesnt provide any sort of CSS style encapsulation, meaning that all the styles provided</code></p><p class="line number12 index11 alt1" style="margin-top: 15px; margin-bottom: 15px; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); line-height: 1.5em; border-radius: 8px; font-size: 16px; color: rgb(61, 70, 77); box-sizing: border-box; padding-right: 1em !important; padding-left: 1em !important; border-left: 3px solid rgb(67, 90, 95) !important; white-space: pre-wrap !important;"><code class="js spaces" style="padding: 2px 4px; font-size: 13px; color: rgb(199, 37, 78); background-color: rgb(249, 242, 244); border-radius: 4px; font-family: Monaco, Menlo, Consolas, Courier New, monospace; margin: 0px !important; background-image: none !important; background-position: initial !important; background-size: initial !important; background-repeat: initial !important; background-attachment: initial !important; background-origin: initial !important; background-clip: initial !important; border: 0px !important; inset: auto !important; float: none !important; line-height: 1.5em !important; outline: 0px !important; overflow: visible !important; position: static !important; vertical-align: baseline !important; width: auto !important; box-sizing: content-box !important; min-height: auto !important;"> </code><code class="js comments" style="padding: 2px 4px; font-size: 13px; color: rgb(199, 37, 78); background-color: rgb(249, 242, 244); border-radius: 4px; font-family: Monaco, Menlo, Consolas, Courier New, monospace; margin: 0px !important; background-image: none !important; background-position: initial !important; background-size: initial !important; background-repeat: initial !important; background-attachment: initial !important; background-origin: initial !important; background-clip: initial !important; border: 0px !important; inset: auto !important; float: none !important; line-height: 1.5em !important; outline: 0px !important; overflow: visible !important; position: static !important; vertical-align: baseline !important; width: auto !important; box-sizing: content-box !important; min-height: auto !important;">* via {@link Component#styles styles} or {@link Component#styleUrls styleUrls} are applicable</code></p><p class="line number13 index12 alt2" style="margin-top: 15px; margin-bottom: 15px; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); line-height: 1.5em; border-radius: 8px; font-size: 16px; color: rgb(61, 70, 77); box-sizing: border-box; padding-right: 1em !important; padding-left: 1em !important; border-left: 3px solid rgb(67, 90, 95) !important; white-space: pre-wrap !important;"><code class="js spaces" style="padding: 2px 4px; font-size: 13px; color: rgb(199, 37, 78); background-color: rgb(249, 242, 244); border-radius: 4px; font-family: Monaco, Menlo, Consolas, Courier New, monospace; margin: 0px !important; background-image: none !important; background-position: initial !important; background-size: initial !important; background-repeat: initial !important; background-attachment: initial !important; background-origin: initial !important; background-clip: initial !important; border: 0px !important; inset: auto !important; float: none !important; line-height: 1.5em !important; outline: 0px !important; overflow: visible !important; position: static !important; vertical-align: baseline !important; width: auto !important; box-sizing: content-box !important; min-height: auto !important;"> </code><code class="js comments" style="padding: 2px 4px; font-size: 13px; color: rgb(199, 37, 78); background-color: rgb(249, 242, 244); border-radius: 4px; font-family: Monaco, Menlo, Consolas, Courier New, monospace; margin: 0px !important; background-image: none !important; background-position: initial !important; background-size: initial !important; background-repeat: initial !important; background-attachment: initial !important; background-origin: initial !important; background-clip: initial !important; border: 0px !important; inset: auto !important; float: none !important; line-height: 1.5em !important; outline: 0px !important; overflow: visible !important; position: static !important; vertical-align: baseline !important; width: auto !important; box-sizing: content-box !important; min-height: auto !important;">* to any HTML element of the application regardless of their host Component.</code></p><p class="line number14 index13 alt1" style="margin-top: 15px; margin-bottom: 15px; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); line-height: 1.5em; border-radius: 8px; font-size: 16px; color: rgb(61, 70, 77); box-sizing: border-box; padding-right: 1em !important; padding-left: 1em !important; border-left: 3px solid rgb(67, 90, 95) !important; white-space: pre-wrap !important;"><code class="js spaces" style="padding: 2px 4px; font-size: 13px; color: rgb(199, 37, 78); background-color: rgb(249, 242, 244); border-radius: 4px; font-family: Monaco, Menlo, Consolas, Courier New, monospace; margin: 0px !important; background-image: none !important; background-position: initial !important; background-size: initial !important; background-repeat: initial !important; background-attachment: initial !important; background-origin: initial !important; background-clip: initial !important; border: 0px !important; inset: auto !important; float: none !important; line-height: 1.5em !important; outline: 0px !important; overflow: visible !important; position: static !important; vertical-align: baseline !important; width: auto !important; box-sizing: content-box !important; min-height: auto !important;"> </code><code class="js comments" style="padding: 2px 4px; font-size: 13px; color: rgb(199, 37, 78); background-color: rgb(249, 242, 244); border-radius: 4px; font-family: Monaco, Menlo, Consolas, Courier New, monospace; margin: 0px !important; background-image: none !important; background-position: initial !important; background-size: initial !important; background-repeat: initial !important; background-attachment: initial !important; background-origin: initial !important; background-clip: initial !important; border: 0px !important; inset: auto !important; float: none !important; line-height: 1.5em !important; outline: 0px !important; overflow: visible !important; position: static !important; vertical-align: baseline !important; width: auto !important; box-sizing: content-box !important; min-height: auto !important;">*/</code></p><p class="line number15 index14 alt2" style="margin-top: 15px; margin-bottom: 15px; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); line-height: 1.5em; border-radius: 8px; font-size: 16px; color: rgb(61, 70, 77); box-sizing: border-box; padding-right: 1em !important; padding-left: 1em !important; border-left: 3px solid rgb(67, 90, 95) !important; white-space: pre-wrap !important;"><code class="js spaces" style="padding: 2px 4px; font-size: 13px; color: rgb(199, 37, 78); background-color: rgb(249, 242, 244); border-radius: 4px; font-family: Monaco, Menlo, Consolas, Courier New, monospace; margin: 0px !important; background-image: none !important; background-position: initial !important; background-size: initial !important; background-repeat: initial !important; background-attachment: initial !important; background-origin: initial !important; background-clip: initial !important; border: 0px !important; inset: auto !important; float: none !important; line-height: 1.5em !important; outline: 0px !important; overflow: visible !important; position: static !important; vertical-align: baseline !important; width: auto !important; box-sizing: content-box !important; min-height: auto !important;"> </code><code class="js plain" style="padding: 2px 4px; font-size: 13px; color: rgb(199, 37, 78); background-color: rgb(249, 242, 244); border-radius: 4px; font-family: Monaco, Menlo, Consolas, Courier New, monospace; margin: 0px !important; background-image: none !important; background-position: initial !important; background-size: initial !important; background-repeat: initial !important; background-attachment: initial !important; background-origin: initial !important; background-clip: initial !important; border: 0px !important; inset: auto !important; float: none !important; line-height: 1.5em !important; outline: 0px !important; overflow: visible !important; position: static !important; vertical-align: baseline !important; width: auto !important; box-sizing: content-box !important; min-height: auto !important;">None = 2,</code></p><p class="line number16 index15 alt1" style="margin-top: 15px; margin-bottom: 15px; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); line-height: 1.5em; border-radius: 8px; font-size: 16px; color: rgb(61, 70, 77); box-sizing: border-box; padding-right: 1em !important; padding-left: 1em !important; border-left: 3px solid rgb(67, 90, 95) !important; white-space: pre-wrap !important;"><code class="js spaces" style="padding: 2px 4px; font-size: 13px; color: rgb(199, 37, 78); background-color: rgb(249, 242, 244); border-radius: 4px; font-family: Monaco, Menlo, Consolas, Courier New, monospace; margin: 0px !important; background-image: none !important; background-position: initial !important; background-size: initial !important; background-repeat: initial !important; background-attachment: initial !important; background-origin: initial !important; background-clip: initial !important; border: 0px !important; inset: auto !important; float: none !important; line-height: 1.5em !important; outline: 0px !important; overflow: visible !important; position: static !important; vertical-align: baseline !important; width: auto !important; box-sizing: content-box !important; min-height: auto !important;"> </code><code class="js comments" style="padding: 2px 4px; font-size: 13px; color: rgb(199, 37, 78); background-color: rgb(249, 242, 244); border-radius: 4px; font-family: Monaco, Menlo, Consolas, Courier New, monospace; margin: 0px !important; background-image: none !important; background-position: initial !important; background-size: initial !important; background-repeat: initial !important; background-attachment: initial !important; background-origin: initial !important; background-clip: initial !important; border: 0px !important; inset: auto !important; float: none !important; line-height: 1.5em !important; outline: 0px !important; overflow: visible !important; position: static !important; vertical-align: baseline !important; width: auto !important; box-sizing: content-box !important; min-height: auto !important;">/**</code></p><p class="line number17 index16 alt2" style="margin-top: 15px; margin-bottom: 15px; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); line-height: 1.5em; border-radius: 8px; font-size: 16px; color: rgb(61, 70, 77); box-sizing: border-box; padding-right: 1em !important; padding-left: 1em !important; border-left: 3px solid rgb(67, 90, 95) !important; white-space: pre-wrap !important;"><code class="js spaces" style="padding: 2px 4px; font-size: 13px; color: rgb(199, 37, 78); background-color: rgb(249, 242, 244); border-radius: 4px; font-family: Monaco, Menlo, Consolas, Courier New, monospace; margin: 0px !important; background-image: none !important; background-position: initial !important; background-size: initial !important; background-repeat: initial !important; background-attachment: initial !important; background-origin: initial !important; background-clip: initial !important; border: 0px !important; inset: auto !important; float: none !important; line-height: 1.5em !important; outline: 0px !important; overflow: visible !important; position: static !important; vertical-align: baseline !important; width: auto !important; box-sizing: content-box !important; min-height: auto !important;"> </code><code class="js comments" style="padding: 2px 4px; font-size: 13px; color: rgb(199, 37, 78); background-color: rgb(249, 242, 244); border-radius: 4px; font-family: Monaco, Menlo, Consolas, Courier New, monospace; margin: 0px !important; background-image: none !important; background-position: initial !important; background-size: initial !important; background-repeat: initial !important; background-attachment: initial !important; background-origin: initial !important; background-clip: initial !important; border: 0px !important; inset: auto !important; float: none !important; line-height: 1.5em !important; outline: 0px !important; overflow: visible !important; position: static !important; vertical-align: baseline !important; width: auto !important; box-sizing: content-box !important; min-height: auto !important;">* Uses the browsers native Shadow DOM API to encapsulate CSS styles, meaning that it creates</code></p><p class="line number18 index17 alt1" style="margin-top: 15px; margin-bottom: 15px; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); line-height: 1.5em; border-radius: 8px; font-size: 16px; color: rgb(61, 70, 77); box-sizing: border-box; padding-right: 1em !important; padding-left: 1em !important; border-left: 3px solid rgb(67, 90, 95) !important; white-space: pre-wrap !important;"><code class="js spaces" style="padding: 2px 4px; font-size: 13px; color: rgb(199, 37, 78); background-color: rgb(249, 242, 244); border-radius: 4px; font-family: Monaco, Menlo, Consolas, Courier New, monospace; margin: 0px !important; background-image: none !important; background-position: initial !important; background-size: initial !important; background-repeat: initial !important; background-attachment: initial !important; background-origin: initial !important; background-clip: initial !important; border: 0px !important; inset: auto !important; float: none !important; line-height: 1.5em !important; outline: 0px !important; overflow: visible !important; position: static !important; vertical-align: baseline !important; width: auto !important; box-sizing: content-box !important; min-height: auto !important;"> </code><code class="js comments" style="padding: 2px 4px; font-size: 13px; color: rgb(199, 37, 78); background-color: rgb(249, 242, 244); border-radius: 4px; font-family: Monaco, Menlo, Consolas, Courier New, monospace; margin: 0px !important; background-image: none !important; background-position: initial !important; background-size: initial !important; background-repeat: initial !important; background-attachment: initial !important; background-origin: initial !important; background-clip: initial !important; border: 0px !important; inset: auto !important; float: none !important; line-height: 1.5em !important; outline: 0px !important; overflow: visible !important; position: static !important; vertical-align: baseline !important; width: auto !important; box-sizing: content-box !important; min-height: auto !important;">* a ShadowRoot for the components host element which is then used to encapsulate</code></p><p class="line number19 index18 alt2" style="margin-top: 15px; margin-bottom: 15px; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); line-height: 1.5em; border-radius: 8px; font-size: 16px; color: rgb(61, 70, 77); box-sizing: border-box; padding-right: 1em !important; padding-left: 1em !important; border-left: 3px solid rgb(67, 90, 95) !important; white-space: pre-wrap !important;"><code class="js spaces" style="padding: 2px 4px; font-size: 13px; color: rgb(199, 37, 78); background-color: rgb(249, 242, 244); border-radius: 4px; font-family: Monaco, Menlo, Consolas, Courier New, monospace; margin: 0px !important; background-image: none !important; background-position: initial !important; background-size: initial !important; background-repeat: initial !important; background-attachment: initial !important; background-origin: initial !important; background-clip: initial !important; border: 0px !important; inset: auto !important; float: none !important; line-height: 1.5em !important; outline: 0px !important; overflow: visible !important; position: static !important; vertical-align: baseline !important; width: auto !important; box-sizing: content-box !important; min-height: auto !important;"> </code><code class="js comments" style="padding: 2px 4px; font-size: 13px; color: rgb(199, 37, 78); background-color: rgb(249, 242, 244); border-radius: 4px; font-family: Monaco, Menlo, Consolas, Courier New, monospace; margin: 0px !important; background-image: none !important; background-position: initial !important; background-size: initial !important; background-repeat: initial !important; background-attachment: initial !important; background-origin: initial !important; background-clip: initial !important; border: 0px !important; inset: auto !important; float: none !important; line-height: 1.5em !important; outline: 0px !important; overflow: visible !important; position: static !important; vertical-align: baseline !important; width: auto !important; box-sizing: content-box !important; min-height: auto !important;">* all the Components styling.</code></p><p class="line number20 index19 alt1" style="margin-top: 15px; margin-bottom: 15px; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); line-height: 1.5em; border-radius: 8px; font-size: 16px; color: rgb(61, 70, 77); box-sizing: border-box; padding-right: 1em !important; padding-left: 1em !important; border-left: 3px solid rgb(67, 90, 95) !important; white-space: pre-wrap !important;"><code class="js spaces" style="padding: 2px 4px; font-size: 13px; color: rgb(199, 37, 78); background-color: rgb(249, 242, 244); border-radius: 4px; font-family: Monaco, Menlo, Consolas, Courier New, monospace; margin: 0px !important; background-image: none !important; background-position: initial !important; background-size: initial !important; background-repeat: initial !important; background-attachment: initial !important; background-origin: initial !important; background-clip: initial !important; border: 0px !important; inset: auto !important; float: none !important; line-height: 1.5em !important; outline: 0px !important; overflow: visible !important; position: static !important; vertical-align: baseline !important; width: auto !important; box-sizing: content-box !important; min-height: auto !important;"> </code><code class="js comments" style="padding: 2px 4px; font-size: 13px; color: rgb(199, 37, 78); background-color: rgb(249, 242, 244); border-radius: 4px; font-family: Monaco, Menlo, Consolas, Courier New, monospace; margin: 0px !important; background-image: none !important; background-position: initial !important; background-size: initial !important; background-repeat: initial !important; background-attachment: initial !important; background-origin: initial !important; background-clip: initial !important; border: 0px !important; inset: auto !important; float: none !important; line-height: 1.5em !important; outline: 0px !important; overflow: visible !important; position: static !important; vertical-align: baseline !important; width: auto !important; box-sizing: content-box !important; min-height: auto !important;">*/</code></p><p class="line number21 index20 alt2" style="margin-top: 15px; margin-bottom: 15px; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); line-height: 1.5em; border-radius: 8px; font-size: 16px; color: rgb(61, 70, 77); box-sizing: border-box; padding-right: 1em !important; padding-left: 1em !important; border-left: 3px solid rgb(67, 90, 95) !important; white-space: pre-wrap !important;"><code class="js spaces" style="padding: 2px 4px; font-size: 13px; color: rgb(199, 37, 78); background-color: rgb(249, 242, 244); border-radius: 4px; font-family: Monaco, Menlo, Consolas, Courier New, monospace; margin: 0px !important; background-image: none !important; background-position: initial !important; background-size: initial !important; background-repeat: initial !important; background-attachment: initial !important; background-origin: initial !important; background-clip: initial !important; border: 0px !important; inset: auto !important; float: none !important; line-height: 1.5em !important; outline: 0px !important; overflow: visible !important; position: static !important; vertical-align: baseline !important; width: auto !important; box-sizing: content-box !important; min-height: auto !important;"> </code><code class="js plain" style="padding: 2px 4px; font-size: 13px; color: rgb(199, 37, 78); background-color: rgb(249, 242, 244); border-radius: 4px; font-family: Monaco, Menlo, Consolas, Courier New, monospace; margin: 0px !important; background-image: none !important; background-position: initial !important; background-size: initial !important; background-repeat: initial !important; background-attachment: initial !important; background-origin: initial !important; background-clip: initial !important; border: 0px !important; inset: auto !important; float: none !important; line-height: 1.5em !important; outline: 0px !important; overflow: visible !important; position: static !important; vertical-align: baseline !important; width: auto !important; box-sizing: content-box !important; min-height: auto !important;">ShadowDom = 3</code></p><p class="line number22 index21 alt1" style="margin-top: 15px; margin-bottom: 15px; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); line-height: 1.5em; border-radius: 8px; font-size: 16px; color: rgb(61, 70, 77); box-sizing: border-box; padding-right: 1em !important; padding-left: 1em !important; border-left: 3px solid rgb(67, 90, 95) !important; white-space: pre-wrap !important;"><code class="js plain" style="padding: 2px 4px; font-size: 13px; color: rgb(199, 37, 78); background-color: rgb(249, 242, 244); border-radius: 4px; font-family: Monaco, Menlo, Consolas, Courier New, monospace; margin: 0px !important; background-image: none !important; background-position: initial !important; background-size: initial !important; background-repeat: initial !important; background-attachment: initial !important; background-origin: initial !important; background-clip: initial !important; border: 0px !important; inset: auto !important; float: none !important; line-height: 1.5em !important; outline: 0px !important; overflow: visible !important; position: static !important; vertical-align: baseline !important; width: auto !important; box-sizing: content-box !important; min-height: auto !important;">}</code></p></td></tr></tbody></table><ul style="padding: 0px; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); font-family: Helvetica Neue, Helvetica, PingFang SC, 微软雅黑, Tahoma, Arial, sans-serif; font-size: 14px; white-space: normal; background-color: rgb(255, 255, 255);" class=" list-paddingleft-2"><li><p>ViewEncapsulation.Emulated：使用垫片（shimmed) CSS 来模拟原生行为。</p></li><li><p>ViewEncapsulation.None ：使用不带任何封装的全局 CSS。</p></li><li><p>ViewEncapsulation.ShadowDom：使用 Shadow DOM v1，封装样式。</p></li></ul><p style="margin-top: 15px; margin-bottom: 15px; padding: 0px 0px 0px 10px; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); color: rgb(61, 70, 77); box-sizing: border-box; border-radius: 8px; font-family: Helvetica Neue, Helvetica, PingFang SC, 微软雅黑, Tahoma, Arial, sans-serif; white-space: normal; background-color: rgb(255, 255, 255);">如果没有提供，该值就会从 <a href="https://angular.cn/api/core/CompilerOptions" target="_blank" textvalue="CompilerOptions" style="margin: 0px; padding: 0px; color: rgb(61, 167, 13); text-decoration-line: none !important;">CompilerOptions</a> 中获取它。默认的编译器选项是 ViewEncapsulation.Emulated。</p><p style="margin-top: 15px; margin-bottom: 15px; padding: 0px 0px 0px 10px; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); color: rgb(61, 70, 77); box-sizing: border-box; border-radius: 8px; font-family: Helvetica Neue, Helvetica, PingFang SC, 微软雅黑, Tahoma, Arial, sans-serif; white-space: normal; background-color: rgb(255, 255, 255);">如果该策略设置为 ViewEncapsulation.Emulated，并且该组件没有指定 styles 或 styleUrls，就会自动切换到 ViewEncapsulation.None。</p><p style="margin-top: 15px; margin-bottom: 15px; padding: 0px 0px 0px 10px; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); color: rgb(61, 70, 77); box-sizing: border-box; border-radius: 8px; font-family: Helvetica Neue, Helvetica, PingFang SC, 微软雅黑, Tahoma, Arial, sans-serif; white-space: normal; background-color: rgb(255, 255, 255);"><strong style="margin: 0px; padding: 0px;">有没有发现枚举类型了为什么没有1</strong>？这个待会再说。</p><h3 data-id="heading-1" style="margin: 0px; padding: 0px; font-weight: 400; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); font-family: Helvetica Neue, Helvetica, PingFang SC, 微软雅黑, Tahoma, Arial, sans-serif; white-space: normal; background-color: rgb(255, 255, 255);"><strong style="margin: 0px; padding: 0px;">ViewEncapsulation.ShadowDom</strong></h3><p style="margin-top: 15px; margin-bottom: 15px; padding: 0px 0px 0px 10px; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); color: rgb(61, 70, 77); box-sizing: border-box; border-radius: 8px; font-family: Helvetica Neue, Helvetica, PingFang SC, 微软雅黑, Tahoma, Arial, sans-serif; white-space: normal; background-color: rgb(255, 255, 255);">抛开Angular中的ShadowDom的封装，先来看一下什么是ShadowDOM吧。</p><h4 data-id="heading-2" style="margin: 0px; padding: 0px; font-weight: 400; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); font-size: 14px; font-family: Helvetica Neue, Helvetica, PingFang SC, 微软雅黑, Tahoma, Arial, sans-serif; white-space: normal; background-color: rgb(255, 255, 255);"><strong style="margin: 0px; padding: 0px;">Shadow DOM</strong></h4><p style="margin-top: 15px; margin-bottom: 15px; padding: 0px 0px 0px 10px; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); color: rgb(61, 70, 77); box-sizing: border-box; border-radius: 8px; font-family: Helvetica Neue, Helvetica, PingFang SC, 微软雅黑, Tahoma, Arial, sans-serif; white-space: normal; background-color: rgb(255, 255, 255);">Shadow DOM 允许将隐藏的 DOM 树附加到常规的 DOM 树中——它以 shadow root 节点为起始根节点，在这个根节点的下方，可以是任意元素，和普通的 DOM 元素一样。</p><p style="margin-top: 15px; margin-bottom: 15px; padding: 0px 0px 0px 10px; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); color: rgb(61, 70, 77); box-sizing: border-box; border-radius: 8px; font-family: Helvetica Neue, Helvetica, PingFang SC, 微软雅黑, Tahoma, Arial, sans-serif; white-space: normal; background-color: rgb(255, 255, 255);"></p><p style="margin-top: 15px; margin-bottom: 15px; padding: 0px 0px 0px 10px; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); color: rgb(61, 70, 77); box-sizing: border-box; border-radius: 8px; font-family: Helvetica Neue, Helvetica, PingFang SC, 微软雅黑, Tahoma, Arial, sans-serif; white-space: normal; background-color: rgb(255, 255, 255);">这里，有一些 Shadow DOM 特有的术语需要我们了解：</p><ul style="padding: 0px; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); font-family: Helvetica Neue, Helvetica, PingFang SC, 微软雅黑, Tahoma, Arial, sans-serif; font-size: 14px; white-space: normal; background-color: rgb(255, 255, 255);" class=" list-paddingleft-2"><li><p>Shadow host：一个常规 DOM 节点，Shadow DOM 会被附加到这个节点上。</p></li><li><p>Shadow tree：Shadow DOM 内部的 DOM 树。</p></li><li><p>Shadow boundary：Shadow DOM 结束的地方，也是常规 DOM 开始的地方。</p></li><li><p>Shadow root: Shadow tree 的根节点。</p></li></ul><p style="margin-top: 15px; margin-bottom: 15px; padding: 0px 0px 0px 10px; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); color: rgb(61, 70, 77); box-sizing: border-box; border-radius: 8px; font-family: Helvetica Neue, Helvetica, PingFang SC, 微软雅黑, Tahoma, Arial, sans-serif; white-space: normal; background-color: rgb(255, 255, 255);">你可以使用同样的方式来操作 Shadow DOM，就和操作常规 DOM 一样——例如添加子节点、设置属性，以及为节点添加自己的样式（例如通过 element.style 属性），或者为整个 Shadow DOM 添加样式（例如在 <a href="https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/style" target="_blank" textvalue=" 元素内添加样式）。不同的是，Shadow DOM 内部的元素始终不会影响到它外部的元素（除了 " style="margin: 0px; padding: 0px; color: rgb(61, 167, 13); text-decoration-line: none !important;">元素内添加样式）。不同的是，Shadow DOM 内部的元素始终不会影响到它外部的元素（除了 </a><a href="https://link.juejin.cn/?target=https%3A%2F%2Fdeveloper.mozilla.org%2Fzh-CN%2Fdocs%2FWeb%2FCSS%2F%3Afocus-within" target="_blank" rel="nofollow noopener noreferrer" title="https://developer.mozilla.org/zh-CN/docs/Web/CSS/:focus-within" ref="nofollow noopener noreferrer" style="margin: 0px; padding: 0px; color: rgb(61, 167, 13); text-decoration-line: none !important;">:focus-within</a>），这为封装提供了便利。</p><p style="margin-top: 15px; margin-bottom: 15px; padding: 0px 0px 0px 10px; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); color: rgb(61, 70, 77); box-sizing: border-box; border-radius: 8px; font-family: Helvetica Neue, Helvetica, PingFang SC, 微软雅黑, Tahoma, Arial, sans-serif; white-space: normal; background-color: rgb(255, 255, 255);">我们来看一个简单的例子吧。</p><table class="wcn_c_table" cellpadding="0" cellspacing="0" width="760"><tbody style="margin: 0px !important; padding: 0px !important; border-radius: 0px !important; background: none !important; border: 0px !important; inset: auto !important; float: none !important; line-height: 1.1em !important; outline: 0px !important; overflow: visible !important; position: static !important; vertical-align: baseline !important; width: auto !important; box-sizing: content-box !important; min-height: auto !important;"><tr style="margin: 0px !important; padding: 0px !important; border-radius: 0px !important; background: none !important; border: 0px !important; inset: auto !important; float: none !important; line-height: 1.1em !important; outline: 0px !important; overflow: visible !important; position: static !important; vertical-align: baseline !important; width: auto !important; box-sizing: content-box !important; min-height: auto !important;" class="firstRow"><td class="gutter" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); margin: 0px !important; border-radius: 4px 0px 0px 4px !important; background: none !important; inset: auto !important; float: none !important; line-height: 1.1em !important; outline: 0px !important; overflow: visible !important; position: static !important; vertical-align: baseline !important; box-sizing: content-box !important; min-height: auto !important; color: rgb(175, 175, 175) !important; user-select: none !important;" width="NaN"><p class="line number1 index0 alt2" style="margin-top: 15px; margin-bottom: 15px; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); line-height: 1.5em; border-radius: 8px; font-size: 16px; color: rgb(61, 70, 77); box-sizing: border-box; padding-right: 0.5em !important; padding-left: 1em !important; border-left: 3px solid rgb(67, 90, 95) !important; white-space: pre-wrap !important; text-align: right !important;">1</p><p class="line number2 index1 alt1" style="margin-top: 15px; margin-bottom: 15px; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); line-height: 1.5em; border-radius: 8px; font-size: 16px; color: rgb(61, 70, 77); box-sizing: border-box; padding-right: 0.5em !important; padding-left: 1em !important; border-left: 3px solid rgb(67, 90, 95) !important; white-space: pre-wrap !important; text-align: right !important;">2</p><p class="line number3 index2 alt2" style="margin-top: 15px; margin-bottom: 15px; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); line-height: 1.5em; border-radius: 8px; font-size: 16px; color: rgb(61, 70, 77); box-sizing: border-box; padding-right: 0.5em !important; padding-left: 1em !important; border-left: 3px solid rgb(67, 90, 95) !important; white-space: pre-wrap !important; text-align: right !important;">3</p><p class="line number4 index3 alt1" style="margin-top: 15px; margin-bottom: 15px; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); line-height: 1.5em; border-radius: 8px; font-size: 16px; color: rgb(61, 70, 77); box-sizing: border-box; padding-right: 0.5em !important; padding-left: 1em !important; border-left: 3px solid rgb(67, 90, 95) !important; white-space: pre-wrap !important; text-align: right !important;">4</p><p class="line number5 index4 alt2" style="margin-top: 15px; margin-bottom: 15px; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); line-height: 1.5em; border-radius: 8px; font-size: 16px; color: rgb(61, 70, 77); box-sizing: border-box; padding-right: 0.5em !important; padding-left: 1em !important; border-left: 3px solid rgb(67, 90, 95) !important; white-space: pre-wrap !important; text-align: right !important;">5</p><p class="line number6 index5 alt1" style="margin-top: 15px; margin-bottom: 15px; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); line-height: 1.5em; border-radius: 8px; font-size: 16px; color: rgb(61, 70, 77); box-sizing: border-box; padding-right: 0.5em !important; padding-left: 1em !important; border-left: 3px solid rgb(67, 90, 95) !important; white-space: pre-wrap !important; text-align: right !important;">6</p><p class="line number7 index6 alt2" style="margin-top: 15px; margin-bottom: 15px; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); line-height: 1.5em; border-radius: 8px; font-size: 16px; color: rgb(61, 70, 77); box-sizing: border-box; padding-right: 0.5em !important; padding-left: 1em !important; border-left: 3px solid rgb(67, 90, 95) !important; white-space: pre-wrap !important; text-align: right !important;">7</p><p class="line number8 index7 alt1" style="margin-top: 15px; margin-bottom: 15px; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); line-height: 1.5em; border-radius: 8px; font-size: 16px; color: rgb(61, 70, 77); box-sizing: border-box; padding-right: 0.5em !important; padding-left: 1em !important; border-left: 3px solid rgb(67, 90, 95) !important; white-space: pre-wrap !important; text-align: right !important;">8</p><p class="line number9 index8 alt2" style="margin-top: 15px; margin-bottom: 15px; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); line-height: 1.5em; border-radius: 8px; font-size: 16px; color: rgb(61, 70, 77); box-sizing: border-box; padding-right: 0.5em !important; padding-left: 1em !important; border-left: 3px solid rgb(67, 90, 95) !important; white-space: pre-wrap !important; text-align: right !important;">9</p><p class="line number10 index9 alt1" style="margin-top: 15px; margin-bottom: 15px; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); line-height: 1.5em; border-radius: 8px; font-size: 16px; color: rgb(61, 70, 77); box-sizing: border-box; padding-right: 0.5em !important; padding-left: 1em !important; border-left: 3px solid rgb(67, 90, 95) !important; white-space: pre-wrap !important; text-align: right !important;">10</p><p class="line number11 index10 alt2" style="margin-top: 15px; margin-bottom: 15px; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); line-height: 1.5em; border-radius: 8px; font-size: 16px; color: rgb(61, 70, 77); box-sizing: border-box; padding-right: 0.5em !important; padding-left: 1em !important; border-left: 3px solid rgb(67, 90, 95) !important; white-space: pre-wrap !important; text-align: right !important;">11</p><p class="line number12 index11 alt1" style="margin-top: 15px; margin-bottom: 15px; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); line-height: 1.5em; border-radius: 8px; font-size: 16px; color: rgb(61, 70, 77); box-sizing: border-box; padding-right: 0.5em !important; padding-left: 1em !important; border-left: 3px solid rgb(67, 90, 95) !important; white-space: pre-wrap !important; text-align: right !important;">12</p><p class="line number13 index12 alt2" style="margin-top: 15px; margin-bottom: 15px; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); line-height: 1.5em; border-radius: 8px; font-size: 16px; color: rgb(61, 70, 77); box-sizing: border-box; padding-right: 0.5em !important; padding-left: 1em !important; border-left: 3px solid rgb(67, 90, 95) !important; white-space: pre-wrap !important; text-align: right !important;">13</p><p class="line number14 index13 alt1" style="margin-top: 15px; margin-bottom: 15px; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); line-height: 1.5em; border-radius: 8px; font-size: 16px; color: rgb(61, 70, 77); box-sizing: border-box; padding-right: 0.5em !important; padding-left: 1em !important; border-left: 3px solid rgb(67, 90, 95) !important; white-space: pre-wrap !important; text-align: right !important;">14</p><p class="line number15 index14 alt2" style="margin-top: 15px; margin-bottom: 15px; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); line-height: 1.5em; border-radius: 8px; font-size: 16px; color: rgb(61, 70, 77); box-sizing: border-box; padding-right: 0.5em !important; padding-left: 1em !important; border-left: 3px solid rgb(67, 90, 95) !important; white-space: pre-wrap !important; text-align: right !important;">15</p><p class="line number16 index15 alt1" style="margin-top: 15px; margin-bottom: 15px; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); line-height: 1.5em; border-radius: 8px; font-size: 16px; color: rgb(61, 70, 77); box-sizing: border-box; padding-right: 0.5em !important; padding-left: 1em !important; border-left: 3px solid rgb(67, 90, 95) !important; white-space: pre-wrap !important; text-align: right !important;">16</p><p class="line number17 index16 alt2" style="margin-top: 15px; margin-bottom: 15px; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); line-height: 1.5em; border-radius: 8px; font-size: 16px; color: rgb(61, 70, 77); box-sizing: border-box; padding-right: 0.5em !important; padding-left: 1em !important; border-left: 3px solid rgb(67, 90, 95) !important; white-space: pre-wrap !important; text-align: right !important;">17</p><p class="line number18 index17 alt1" style="margin-top: 15px; margin-bottom: 15px; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); line-height: 1.5em; border-radius: 8px; font-size: 16px; color: rgb(61, 70, 77); box-sizing: border-box; padding-right: 0.5em !important; padding-left: 1em !important; border-left: 3px solid rgb(67, 90, 95) !important; white-space: pre-wrap !important; text-align: right !important;">18</p><p class="line number19 index18 alt2" style="margin-top: 15px; margin-bottom: 15px; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); line-height: 1.5em; border-radius: 8px; font-size: 16px; color: rgb(61, 70, 77); box-sizing: border-box; padding-right: 0.5em !important; padding-left: 1em !important; border-left: 3px solid rgb(67, 90, 95) !important; white-space: pre-wrap !important; text-align: right !important;">19</p><p class="line number20 index19 alt1" style="margin-top: 15px; margin-bottom: 15px; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); line-height: 1.5em; border-radius: 8px; font-size: 16px; color: rgb(61, 70, 77); box-sizing: border-box; padding-right: 0.5em !important; padding-left: 1em !important; border-left: 3px solid rgb(67, 90, 95) !important; white-space: pre-wrap !important; text-align: right !important;">20</p><p class="line number21 index20 alt2" style="margin-top: 15px; margin-bottom: 15px; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); line-height: 1.5em; border-radius: 8px; font-size: 16px; color: rgb(61, 70, 77); box-sizing: border-box; padding-right: 0.5em !important; padding-left: 1em !important; border-left: 3px solid rgb(67, 90, 95) !important; white-space: pre-wrap !important; text-align: right !important;">21</p><p class="line number22 index21 alt1" style="margin-top: 15px; margin-bottom: 15px; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); line-height: 1.5em; border-radius: 8px; font-size: 16px; color: rgb(61, 70, 77); box-sizing: border-box; padding-right: 0.5em !important; padding-left: 1em !important; border-left: 3px solid rgb(67, 90, 95) !important; white-space: pre-wrap !important; text-align: right !important;">22</p><p class="line number23 index22 alt2" style="margin-top: 15px; margin-bottom: 15px; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); line-height: 1.5em; border-radius: 8px; font-size: 16px; color: rgb(61, 70, 77); box-sizing: border-box; padding-right: 0.5em !important; padding-left: 1em !important; border-left: 3px solid rgb(67, 90, 95) !important; white-space: pre-wrap !important; text-align: right !important;">23</p><p class="line number24 index23 alt1" style="margin-top: 15px; margin-bottom: 15px; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); line-height: 1.5em; border-radius: 8px; font-size: 16px; color: rgb(61, 70, 77); box-sizing: border-box; padding-right: 0.5em !important; padding-left: 1em !important; border-left: 3px solid rgb(67, 90, 95) !important; white-space: pre-wrap !important; text-align: right !important;">24</p><p class="line number25 index24 alt2" style="margin-top: 15px; margin-bottom: 15px; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); line-height: 1.5em; border-radius: 8px; font-size: 16px; color: rgb(61, 70, 77); box-sizing: border-box; padding-right: 0.5em !important; padding-left: 1em !important; border-left: 3px solid rgb(67, 90, 95) !important; white-space: pre-wrap !important; text-align: right !important;">25</p><p class="line number26 index25 alt1" style="margin-top: 15px; margin-bottom: 15px; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); line-height: 1.5em; border-radius: 8px; font-size: 16px; color: rgb(61, 70, 77); box-sizing: border-box; padding-right: 0.5em !important; padding-left: 1em !important; border-left: 3px solid rgb(67, 90, 95) !important; white-space: pre-wrap !important; text-align: right !important;">26</p><p class="line number27 index26 alt2" style="margin-top: 15px; margin-bottom: 15px; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); line-height: 1.5em; border-radius: 8px; font-size: 16px; color: rgb(61, 70, 77); box-sizing: border-box; padding-right: 0.5em !important; padding-left: 1em !important; border-left: 3px solid rgb(67, 90, 95) !important; white-space: pre-wrap !important; text-align: right !important;">27</p><p class="line number28 index27 alt1" style="margin-top: 15px; margin-bottom: 15px; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); line-height: 1.5em; border-radius: 8px; font-size: 16px; color: rgb(61, 70, 77); box-sizing: border-box; padding-right: 0.5em !important; padding-left: 1em !important; border-left: 3px solid rgb(67, 90, 95) !important; white-space: pre-wrap !important; text-align: right !important;">28</p><p class="line number29 index28 alt2" style="margin-top: 15px; margin-bottom: 15px; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); line-height: 1.5em; border-radius: 8px; font-size: 16px; color: rgb(61, 70, 77); box-sizing: border-box; padding-right: 0.5em !important; padding-left: 1em !important; border-left: 3px solid rgb(67, 90, 95) !important; white-space: pre-wrap !important; text-align: right !important;">29</p><p class="line number30 index29 alt1" style="margin-top: 15px; margin-bottom: 15px; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); line-height: 1.5em; border-radius: 8px; font-size: 16px; color: rgb(61, 70, 77); box-sizing: border-box; padding-right: 0.5em !important; padding-left: 1em !important; border-left: 3px solid rgb(67, 90, 95) !important; white-space: pre-wrap !important; text-align: right !important;">30</p></td><td class="code" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); word-break: break-all; margin: 0px !important; border-radius: 0px !important; background: none !important; inset: auto !important; float: none !important; line-height: 1.1em !important; outline: 0px !important; overflow: visible !important; position: static !important; vertical-align: baseline !important; box-sizing: content-box !important; min-height: auto !important;" width="712"><p class="line number1 index0 alt2" style="margin-top: 15px; margin-bottom: 15px; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); line-height: 1.5em; border-radius: 8px; font-size: 16px; color: rgb(61, 70, 77); box-sizing: border-box; padding-right: 1em !important; padding-left: 1em !important; border-left: 3px solid rgb(67, 90, 95) !important; white-space: pre-wrap !important;"><code class="php plain" style="padding: 2px 4px; font-size: 13px; color: rgb(199, 37, 78); background-color: rgb(249, 242, 244); border-radius: 4px; font-family: Monaco, Menlo, Consolas, Courier New, monospace; margin: 0px !important; background-image: none !important; background-position: initial !important; background-size: initial !important; background-repeat: initial !important; background-attachment: initial !important; background-origin: initial !important; background-clip: initial !important; border: 0px !important; inset: auto !important; float: none !important; line-height: 1.5em !important; outline: 0px !important; overflow: visible !important; position: static !important; vertical-align: baseline !important; width: auto !important; box-sizing: content-box !important; min-height: auto !important;"><!DOCTYPE html></code></p><p class="line number2 index1 alt1" style="margin-top: 15px; margin-bottom: 15px; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); line-height: 1.5em; border-radius: 8px; font-size: 16px; color: rgb(61, 70, 77); box-sizing: border-box; padding-right: 1em !important; padding-left: 1em !important; border-left: 3px solid rgb(67, 90, 95) !important; white-space: pre-wrap !important;"><code class="php plain" style="padding: 2px 4px; font-size: 13px; color: rgb(199, 37, 78); background-color: rgb(249, 242, 244); border-radius: 4px; font-family: Monaco, Menlo, Consolas, Courier New, monospace; margin: 0px !important; background-image: none !important; background-position: initial !important; background-size: initial !important; background-repeat: initial !important; background-attachment: initial !important; background-origin: initial !important; background-clip: initial !important; border: 0px !important; inset: auto !important; float: none !important; line-height: 1.5em !important; outline: 0px !important; overflow: visible !important; position: static !important; vertical-align: baseline !important; width: auto !important; box-sizing: content-box !important; min-height: auto !important;"><html></code></p><p class="line number3 index2 alt2" style="margin-top: 15px; margin-bottom: 15px; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); line-height: 1.5em; border-radius: 8px; font-size: 16px; color: rgb(61, 70, 77); box-sizing: border-box; padding-right: 1em !important; padding-left: 1em !important; border-left: 3px solid rgb(67, 90, 95) !important; white-space: pre-wrap !important;"><code class="php plain" style="padding: 2px 4px; font-size: 13px; color: rgb(199, 37, 78); background-color: rgb(249, 242, 244); border-radius: 4px; font-family: Monaco, Menlo, Consolas, Courier New, monospace; margin: 0px !important; background-image: none !important; background-position: initial !important; background-size: initial !important; background-repeat: initial !important; background-attachment: initial !important; background-origin: initial !important; background-clip: initial !important; border: 0px !important; inset: auto !important; float: none !important; line-height: 1.5em !important; outline: 0px !important; overflow: visible !important; position: static !important; vertical-align: baseline !important; width: auto !important; box-sizing: content-box !important; min-height: auto !important;"><head></code></p><p class="line number4 index3 alt1" style="margin-top: 15px; margin-bottom: 15px; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); line-height: 1.5em; border-radius: 8px; font-size: 16px; color: rgb(61, 70, 77); box-sizing: border-box; padding-right: 1em !important; padding-left: 1em !important; border-left: 3px solid rgb(67, 90, 95) !important; white-space: pre-wrap !important;"><code class="php spaces" style="padding: 2px 4px; font-size: 13px; color: rgb(199, 37, 78); background-color: rgb(249, 242, 244); border-radius: 4px; font-family: Monaco, Menlo, Consolas, Courier New, monospace; margin: 0px !important; background-image: none !important; background-position: initial !important; background-size: initial !important; background-repeat: initial !important; background-attachment: initial !important; background-origin: initial !important; background-clip: initial !important; border: 0px !important; inset: auto !important; float: none !important; line-height: 1.5em !important; outline: 0px !important; overflow: visible !important; position: static !important; vertical-align: baseline !important; width: auto !important; box-sizing: content-box !important; min-height: auto !important;"> </code><code class="php plain" style="padding: 2px 4px; font-size: 13px; color: rgb(199, 37, 78); background-color: rgb(249, 242, 244); border-radius: 4px; font-family: Monaco, Menlo, Consolas, Courier New, monospace; margin: 0px !important; background-image: none !important; background-position: initial !important; background-size: initial !important; background-repeat: initial !important; background-attachment: initial !important; background-origin: initial !important; background-clip: initial !important; border: 0px !important; inset: auto !important; float: none !important; line-height: 1.5em !important; outline: 0px !important; overflow: visible !important; position: static !important; vertical-align: baseline !important; width: auto !important; box-sizing: content-box !important; min-height: auto !important;"><meta charset=</code><code class="php string" style="padding: 2px 4px; font-size: 13px; color: rgb(199, 37, 78); background-color: rgb(249, 242, 244); border-radius: 4px; font-family: Monaco, Menlo, Consolas, Courier New, monospace; margin: 0px !important; background-image: none !important; background-position: initial !important; background-size: initial !important; background-repeat: initial !important; background-attachment: initial !important; background-origin: initial !important; background-clip: initial !important; border: 0px !important; inset: auto !important; float: none !important; line-height: 1.5em !important; outline: 0px !important; overflow: visible !important; position: static !important; vertical-align: baseline !important; width: auto !important; box-sizing: content-box !important; min-height: auto !important;">UTF-8</code><code class="php plain" style="padding: 2px 4px; font-size: 13px; color: rgb(199, 37, 78); background-color: rgb(249, 242, 244); border-radius: 4px; font-family: Monaco, Menlo, Consolas, Courier New, monospace; margin: 0px !important; background-image: none !important; background-position: initial !important; background-size: initial !important; background-repeat: initial !important; background-attachment: initial !important; background-origin: initial !important; background-clip: initial !important; border: 0px !important; inset: auto !important; float: none !important; line-height: 1.5em !important; outline: 0px !important; overflow: visible !important; position: static !important; vertical-align: baseline !important; width: auto !important; box-sizing: content-box !important; min-height: auto !important;">></code></p><p class="line number5 index4 alt2" style="margin-top: 15px; margin-bottom: 15px; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); line-height: 1.5em; border-radius: 8px; font-size: 16px; color: rgb(61, 70, 77); box-sizing: border-box; padding-right: 1em !important; padding-left: 1em !important; border-left: 3px solid rgb(67, 90, 95) !important; white-space: pre-wrap !important;"><code class="php spaces" style="padding: 2px 4px; font-size: 13px; color: rgb(199, 37, 78); background-color: rgb(249, 242, 244); border-radius: 4px; font-family: Monaco, Menlo, Consolas, Courier New, monospace; margin: 0px !important; background-image: none !important; background-position: initial !important; background-size: initial !important; background-repeat: initial !important; background-attachment: initial !important; background-origin: initial !important; background-clip: initial !important; border: 0px !important; inset: auto !important; float: none !important; line-height: 1.5em !important; outline: 0px !important; overflow: visible !important; position: static !important; vertical-align: baseline !important; width: auto !important; box-sizing: content-box !important; min-height: auto !important;"> </code><code class="php plain" style="padding: 2px 4px; font-size: 13px; color: rgb(199, 37, 78); background-color: rgb(249, 242, 244); border-radius: 4px; font-family: Monaco, Menlo, Consolas, Courier New, monospace; margin: 0px !important; background-image: none !important; background-position: initial !important; background-size: initial !important; background-repeat: initial !important; background-attachment: initial !important; background-origin: initial !important; background-clip: initial !important; border: 0px !important; inset: auto !important; float: none !important; line-height: 1.5em !important; outline: 0px !important; overflow: visible !important; position: static !important; vertical-align: baseline !important; width: auto !important; box-sizing: content-box !important; min-height: auto !important;"><meta http-equiv=</code><code class="php string" style="padding: 2px 4px; font-size: 13px; color: rgb(199, 37, 78); background-color: rgb(249, 242, 244); border-radius: 4px; font-family: Monaco, Menlo, Consolas, Courier New, monospace; margin: 0px !important; background-image: none !important; background-position: initial !important; background-size: initial !important; background-repeat: initial !important; background-attachment: initial !important; background-origin: initial !important; background-clip: initial !important; border: 0px !important; inset: auto !important; float: none !important; line-height: 1.5em !important; outline: 0px !important; overflow: visible !important; position: static !important; vertical-align: baseline !important; width: auto !important; box-sizing: content-box !important; min-height: auto !important;">X-UA-Compatible</code> <code class="php plain" style="padding: 2px 4px; font-size: 13px; color: rgb(199, 37, 78); background-color: rgb(249, 242, 244); border-radius: 4px; font-family: Monaco, Menlo, Consolas, Courier New, monospace; margin: 0px !important; background-image: none !important; background-position: initial !important; background-size: initial !important; background-repeat: initial !important; background-attachment: initial !important; background-origin: initial !important; background-clip: initial !important; border: 0px !important; inset: auto !important; float: none !important; line-height: 1.5em !important; outline: 0px !important; overflow: visible !important; position: static !important; vertical-align: baseline !important; width: auto !important; box-sizing: content-box !important; min-height: auto !important;">content=</code><code class="php string" style="padding: 2px 4px; font-size: 13px; color: rgb(199, 37, 78); background-color: rgb(249, 242, 244); border-radius: 4px; font-family: Monaco, Menlo, Consolas, Courier New, monospace; margin: 0px !important; background-image: none !important; background-position: initial !important; background-size: initial !important; background-repeat: initial !important; background-attachment: initial !important; background-origin: initial !important; background-clip: initial !important; border: 0px !important; inset: auto !important; float: none !important; line-height: 1.5em !important; outline: 0px !important; overflow: visible !important; position: static !important; vertical-align: baseline !important; width: auto !important; box-sizing: content-box !important; min-height: auto !important;">IE=edge</code><code class="php plain" style="padding: 2px 4px; font-size: 13px; color: rgb(199, 37, 78); background-color: rgb(249, 242, 244); border-radius: 4px; font-family: Monaco, Menlo, Consolas, Courier New, monospace; margin: 0px !important; background-image: none !important; background-position: initial !important; background-size: initial !important; background-repeat: initial !important; background-attachment: initial !important; background-origin: initial !important; background-clip: initial !important; border: 0px !important; inset: auto !important; float: none !important; line-height: 1.5em !important; outline: 0px !important; overflow: visible !important; position: static !important; vertical-align: baseline !important; width: auto !important; box-sizing: content-box !important; min-height: auto !important;">></code></p><p class="line number6 index5 alt1" style="margin-top: 15px; margin-bottom: 15px; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); line-height: 1.5em; border-radius: 8px; font-size: 16px; color: rgb(61, 70, 77); box-sizing: border-box; padding-right: 1em !important; padding-left: 1em !important; border-left: 3px solid rgb(67, 90, 95) !important; white-space: pre-wrap !important;"><code class="php spaces" style="padding: 2px 4px; font-size: 13px; color: rgb(199, 37, 78); background-color: rgb(249, 242, 244); border-radius: 4px; font-family: Monaco, Menlo, Consolas, Courier New, monospace; margin: 0px !important; background-image: none !important; background-position: initial !important; background-size: initial !important; background-repeat: initial !important; background-attachment: initial !important; background-origin: initial !important; background-clip: initial !important; border: 0px !important; inset: auto !important; float: none !important; line-height: 1.5em !important; outline: 0px !important; overflow: visible !important; position: static !important; vertical-align: baseline !important; width: auto !important; box-sizing: content-box !important; min-height: auto !important;"> </code><code class="php plain" style="padding: 2px 4px; font-size: 13px; color: rgb(199, 37, 78); background-color: rgb(249, 242, 244); border-radius: 4px; font-family: Monaco, Menlo, Consolas, Courier New, monospace; margin: 0px !important; background-image: none !important; background-position: initial !important; background-size: initial !important; background-repeat: initial !important; background-attachment: initial !important; background-origin: initial !important; background-clip: initial !important; border: 0px !important; inset: auto !important; float: none !important; line-height: 1.5em !important; outline: 0px !important; overflow: visible !important; position: static !important; vertical-align: baseline !important; width: auto !important; box-sizing: content-box !important; min-height: auto !important;"><meta name=</code><code class="php string" style="padding: 2px 4px; font-size: 13px; color: rgb(199, 37, 78); background-color: rgb(249, 242, 244); border-radius: 4px; font-family: Monaco, Menlo, Consolas, Courier New, monospace; margin: 0px !important; background-image: none !important; background-position: initial !important; background-size: initial !important; background-repeat: initial !important; background-attachment: initial !important; background-origin: initial !important; background-clip: initial !important; border: 0px !important; inset: auto !important; float: none !important; line-height: 1.5em !important; outline: 0px !important; overflow: visible !important; position: static !important; vertical-align: baseline !important; width: auto !important; box-sizing: content-box !important; min-height: auto !important;">viewport</code> <code class="php plain" style="padding: 2px 4px; font-size: 13px; color: rgb(199, 37, 78); background-color: rgb(249, 242, 244); border-radius: 4px; font-family: Monaco, Menlo, Consolas, Courier New, monospace; margin: 0px !important; background-image: none !important; background-position: initial !important; background-size: initial !important; background-repeat: initial !important; background-attachment: initial !important; background-origin: initial !important; background-clip: initial !important; border: 0px !important; inset: auto !important; float: none !important; line-height: 1.5em !important; outline: 0px !important; overflow: visible !important; position: static !important; vertical-align: baseline !important; width: auto !important; box-sizing: content-box !important; min-height: auto !important;">content=</code><code class="php string" style="padding: 2px 4px; font-size: 13px; color: rgb(199, 37, 78); background-color: rgb(249, 242, 244); border-radius: 4px; font-family: Monaco, Menlo, Consolas, Courier New, monospace; margin: 0px !important; background-image: none !important; background-position: initial !important; background-size: initial !important; background-repeat: initial !important; background-attachment: initial !important; background-origin: initial !important; background-clip: initial !important; border: 0px !important; inset: auto !important; float: none !important; line-height: 1.5em !important; outline: 0px !important; overflow: visible !important; position: static !important; vertical-align: baseline !important; width: auto !important; box-sizing: content-box !important; min-height: auto !important;">width=device-width, initial-scale=1.0</code><code class="php plain" style="padding: 2px 4px; font-size: 13px; color: rgb(199, 37, 78); background-color: rgb(249, 242, 244); border-radius: 4px; font-family: Monaco, Menlo, Consolas, Courier New, monospace; margin: 0px !important; background-image: none !important; background-position: initial !important; background-size: initial !important; background-repeat: initial !important; background-attachment: initial !important; background-origin: initial !important; background-clip: initial !important; border: 0px !important; inset: auto !important; float: none !important; line-height: 1.5em !important; outline: 0px !important; overflow: visible !important; position: static !important; vertical-align: baseline !important; width: auto !important; box-sizing: content-box !important; min-height: auto !important;">></code></p><p class="line number7 index6 alt2" style="margin-top: 15px; margin-bottom: 15px; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); line-height: 1.5em; border-radius: 8px; font-size: 16px; color: rgb(61, 70, 77); box-sizing: border-box; padding-right: 1em !important; padding-left: 1em !important; border-left: 3px solid rgb(67, 90, 95) !important; white-space: pre-wrap !important;"><code class="php spaces" style="padding: 2px 4px; font-size: 13px; color: rgb(199, 37, 78); background-color: rgb(249, 242, 244); border-radius: 4px; font-family: Monaco, Menlo, Consolas, Courier New, monospace; margin: 0px !important; background-image: none !important; background-position: initial !important; background-size: initial !important; background-repeat: initial !important; background-attachment: initial !important; background-origin: initial !important; background-clip: initial !important; border: 0px !important; inset: auto !important; float: none !important; line-height: 1.5em !important; outline: 0px !important; overflow: visible !important; position: static !important; vertical-align: baseline !important; width: auto !important; box-sizing: content-box !important; min-height: auto !important;"> </code><code class="php plain" style="padding: 2px 4px; font-size: 13px; color: rgb(199, 37, 78); background-color: rgb(249, 242, 244); border-radius: 4px; font-family: Monaco, Menlo, Consolas, Courier New, monospace; margin: 0px !important; background-image: none !important; background-position: initial !important; background-size: initial !important; background-repeat: initial !important; background-attachment: initial !important; background-origin: initial !important; background-clip: initial !important; border: 0px !important; inset: auto !important; float: none !important; line-height: 1.5em !important; outline: 0px !important; overflow: visible !important; position: static !important; vertical-align: baseline !important; width: auto !important; box-sizing: content-box !important; min-height: auto !important;"><title>Shadow DOM</title></code></p><p class="line number8 index7 alt1" style="margin-top: 15px; margin-bottom: 15px; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); line-height: 1.5em; border-radius: 8px; font-size: 16px; color: rgb(61, 70, 77); box-sizing: border-box; padding-right: 1em !important; padding-left: 1em !important; border-left: 3px solid rgb(67, 90, 95) !important; white-space: pre-wrap !important;"><code class="php spaces" style="padding: 2px 4px; font-size: 13px; color: rgb(199, 37, 78); background-color: rgb(249, 242, 244); border-radius: 4px; font-family: Monaco, Menlo, Consolas, Courier New, monospace; margin: 0px !important; background-image: none !important; background-position: initial !important; background-size: initial !important; background-repeat: initial !important; background-attachment: initial !important; background-origin: initial !important; background-clip: initial !important; border: 0px !important; inset: auto !important; float: none !important; line-height: 1.5em !important; outline: 0px !important; overflow: visible !important; position: static !important; vertical-align: baseline !important; width: auto !important; box-sizing: content-box !important; min-height: auto !important;"> </code><code class="php plain" style="padding: 2px 4px; font-size: 13px; color: rgb(199, 37, 78); background-color: rgb(249, 242, 244); border-radius: 4px; font-family: Monaco, Menlo, Consolas, Courier New, monospace; margin: 0px !important; background-image: none !important; background-position: initial !important; background-size: initial !important; background-repeat: initial !important; background-attachment: initial !important; background-origin: initial !important; background-clip: initial !important; border: 0px !important; inset: auto !important; float: none !important; line-height: 1.5em !important; outline: 0px !important; overflow: visible !important; position: static !important; vertical-align: baseline !important; width: auto !important; box-sizing: content-box !important; min-height: auto !important;"><style></code></p><p class="line number9 index8 alt2" style="margin-top: 15px; margin-bottom: 15px; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); line-height: 1.5em; border-radius: 8px; font-size: 16px; color: rgb(61, 70, 77); box-sizing: border-box; padding-right: 1em !important; padding-left: 1em !important; border-left: 3px solid rgb(67, 90, 95) !important; white-space: pre-wrap !important;"><code class="php spaces" style="padding: 2px 4px; font-size: 13px; color: rgb(199, 37, 78); background-color: rgb(249, 242, 244); border-radius: 4px; font-family: Monaco, Menlo, Consolas, Courier New, monospace; margin: 0px !important; background-image: none !important; background-position: initial !important; background-size: initial !important; background-repeat: initial !important; background-attachment: initial !important; background-origin: initial !important; background-clip: initial !important; border: 0px !important; inset: auto !important; float: none !important; line-height: 1.5em !important; outline: 0px !important; overflow: visible !important; position: static !important; vertical-align: baseline !important; width: auto !important; box-sizing: content-box !important; min-height: auto !important;"> </code><code class="php plain" style="padding: 2px 4px; font-size: 13px; color: rgb(199, 37, 78); background-color: rgb(249, 242, 244); border-radius: 4px; font-family: Monaco, Menlo, Consolas, Courier New, monospace; margin: 0px !important; background-image: none !important; background-position: initial !important; background-size: initial !important; background-repeat: initial !important; background-attachment: initial !important; background-origin: initial !important; background-clip: initial !important; border: 0px !important; inset: auto !important; float: none !important; line-height: 1.5em !important; outline: 0px !important; overflow: visible !important; position: static !important; vertical-align: baseline !important; width: auto !important; box-sizing: content-box !important; min-height: auto !important;">span{</code></p><p class="line number10 index9 alt1" style="margin-top: 15px; margin-bottom: 15px; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); line-height: 1.5em; border-radius: 8px; font-size: 16px; color: rgb(61, 70, 77); box-sizing: border-box; padding-right: 1em !important; padding-left: 1em !important; border-left: 3px solid rgb(67, 90, 95) !important; white-space: pre-wrap !important;"><code class="php spaces" style="padding: 2px 4px; font-size: 13px; color: rgb(199, 37, 78); background-color: rgb(249, 242, 244); border-radius: 4px; font-family: Monaco, Menlo, Consolas, Courier New, monospace; margin: 0px !important; background-image: none !important; background-position: initial !important; background-size: initial !important; background-repeat: initial !important; background-attachment: initial !important; background-origin: initial !important; background-clip: initial !important; border: 0px !important; inset: auto !important; float: none !important; line-height: 1.5em !important; outline: 0px !important; overflow: visible !important; position: static !important; vertical-align: baseline !important; width: auto !important; box-sizing: content-box !important; min-height: auto !important;"> </code><code class="php plain" style="padding: 2px 4px; font-size: 13px; color: rgb(199, 37, 78); background-color: rgb(249, 242, 244); border-radius: 4px; font-family: Monaco, Menlo, Consolas, Courier New, monospace; margin: 0px !important; background-image: none !important; background-position: initial !important; background-size: initial !important; background-repeat: initial !important; background-attachment: initial !important; background-origin: initial !important; background-clip: initial !important; border: 0px !important; inset: auto !important; float: none !important; line-height: 1.5em !important; outline: 0px !important; overflow: visible !important; position: static !important; vertical-align: baseline !important; width: auto !important; box-sizing: content-box !important; min-height: auto !important;">color: green;</code></p><p class="line number11 index10 alt2" style="margin-top: 15px; margin-bottom: 15px; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); line-height: 1.5em; border-radius: 8px; font-size: 16px; color: rgb(61, 70, 77); box-sizing: border-box; padding-right: 1em !important; padding-left: 1em !important; border-left: 3px solid rgb(67, 90, 95) !important; white-space: pre-wrap !important;"><code class="php spaces" style="padding: 2px 4px; font-size: 13px; color: rgb(199, 37, 78); background-color: rgb(249, 242, 244); border-radius: 4px; font-family: Monaco, Menlo, Consolas, Courier New, monospace; margin: 0px !important; background-image: none !important; background-position: initial !important; background-size: initial !important; background-repeat: initial !important; background-attachment: initial !important; background-origin: initial !important; background-clip: initial !important; border: 0px !important; inset: auto !important; float: none !important; line-height: 1.5em !important; outline: 0px !important; overflow: visible !important; position: static !important; vertical-align: baseline !important; width: auto !important; box-sizing: content-box !important; min-height: auto !important;"> </code><code class="php plain" style="padding: 2px 4px; font-size: 13px; color: rgb(199, 37, 78); background-color: rgb(249, 242, 244); border-radius: 4px; font-family: Monaco, Menlo, Consolas, Courier New, monospace; margin: 0px !important; background-image: none !important; background-position: initial !important; background-size: initial !important; background-repeat: initial !important; background-attachment: initial !important; background-origin: initial !important; background-clip: initial !important; border: 0px !important; inset: auto !important; float: none !important; line-height: 1.5em !important; outline: 0px !important; overflow: visible !important; position: static !important; vertical-align: baseline !important; width: auto !important; box-sizing: content-box !important; min-height: auto !important;">}</code></p><p class="line number12 index11 alt1" style="margin-top: 15px; margin-bottom: 15px; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); line-height: 1.5em; border-radius: 8px; font-size: 16px; color: rgb(61, 70, 77); box-sizing: border-box; padding-right: 1em !important; padding-left: 1em !important; border-left: 3px solid rgb(67, 90, 95) !important; white-space: pre-wrap !important;"><code class="php spaces" style="padding: 2px 4px; font-size: 13px; color: rgb(199, 37, 78); background-color: rgb(249, 242, 244); border-radius: 4px; font-family: Monaco, Menlo, Consolas, Courier New, monospace; margin: 0px !important; background-image: none !important; background-position: initial !important; background-size: initial !important; background-repeat: initial !important; background-attachment: initial !important; background-origin: initial !important; background-clip: initial !important; border: 0px !important; inset: auto !important; float: none !important; line-height: 1.5em !important; outline: 0px !important; overflow: visible !important; position: static !important; vertical-align: baseline !important; width: auto !important; box-sizing: content-box !important; min-height: auto !important;"> </code><code class="php plain" style="padding: 2px 4px; font-size: 13px; color: rgb(199, 37, 78); background-color: rgb(249, 242, 244); border-radius: 4px; font-family: Monaco, Menlo, Consolas, Courier New, monospace; margin: 0px !important; background-image: none !important; background-position: initial !important; background-size: initial !important; background-repeat: initial !important; background-attachment: initial !important; background-origin: initial !important; background-clip: initial !important; border: 0px !important; inset: auto !important; float: none !important; line-height: 1.5em !important; outline: 0px !important; overflow: visible !important; position: static !important; vertical-align: baseline !important; width: auto !important; box-sizing: content-box !important; min-height: auto !important;"></style></code></p><p class="line number13 index12 alt2" style="margin-top: 15px; margin-bottom: 15px; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); line-height: 1.5em; border-radius: 8px; font-size: 16px; color: rgb(61, 70, 77); box-sizing: border-box; padding-right: 1em !important; padding-left: 1em !important; border-left: 3px solid rgb(67, 90, 95) !important; white-space: pre-wrap !important;"><code class="php plain" style="padding: 2px 4px; font-size: 13px; color: rgb(199, 37, 78); background-color: rgb(249, 242, 244); border-radius: 4px; font-family: Monaco, Menlo, Consolas, Courier New, monospace; margin: 0px !important; background-image: none !important; background-position: initial !important; background-size: initial !important; background-repeat: initial !important; background-attachment: initial !important; background-origin: initial !important; background-clip: initial !important; border: 0px !important; inset: auto !important; float: none !important; line-height: 1.5em !important; outline: 0px !important; overflow: visible !important; position: static !important; vertical-align: baseline !important; width: auto !important; box-sizing: content-box !important; min-height: auto !important;"></head></code></p><p class="line number14 index13 alt1" style="margin-top: 15px; margin-bottom: 15px; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); line-height: 1.5em; border-radius: 8px; font-size: 16px; color: rgb(61, 70, 77); box-sizing: border-box; padding-right: 1em !important; padding-left: 1em !important; border-left: 3px solid rgb(67, 90, 95) !important; white-space: pre-wrap !important;"><code class="php plain" style="padding: 2px 4px; font-size: 13px; color: rgb(199, 37, 78); background-color: rgb(249, 242, 244); border-radius: 4px; font-family: Monaco, Menlo, Consolas, Courier New, monospace; margin: 0px !important; background-image: none !important; background-position: initial !important; background-size: initial !important; background-repeat: initial !important; background-attachment: initial !important; background-origin: initial !important; background-clip: initial !important; border: 0px !important; inset: auto !important; float: none !important; line-height: 1.5em !important; outline: 0px !important; overflow: visible !important; position: static !important; vertical-align: baseline !important; width: auto !important; box-sizing: content-box !important; min-height: auto !important;"><body></code></p><p class="line number15 index14 alt2" style="margin-top: 15px; margin-bottom: 15px; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); line-height: 1.5em; border-radius: 8px; font-size: 16px; color: rgb(61, 70, 77); box-sizing: border-box; padding-right: 1em !important; padding-left: 1em !important; border-left: 3px solid rgb(67, 90, 95) !important; white-space: pre-wrap !important;"><code class="php spaces" style="padding: 2px 4px; font-size: 13px; color: rgb(199, 37, 78); background-color: rgb(249, 242, 244); border-radius: 4px; font-family: Monaco, Menlo, Consolas, Courier New, monospace; margin: 0px !important; background-image: none !important; background-position: initial !important; background-size: initial !important; background-repeat: initial !important; background-attachment: initial !important; background-origin: initial !important; background-clip: initial !important; border: 0px !important; inset: auto !important; float: none !important; line-height: 1.5em !important; outline: 0px !important; overflow: visible !important; position: static !important; vertical-align: baseline !important; width: auto !important; box-sizing: content-box !important; min-height: auto !important;"> </code><code class="php plain" style="padding: 2px 4px; font-size: 13px; color: rgb(199, 37, 78); background-color: rgb(249, 242, 244); border-radius: 4px; font-family: Monaco, Menlo, Consolas, Courier New, monospace; margin: 0px !important; background-image: none !important; background-position: initial !important; background-size: initial !important; background-repeat: initial !important; background-attachment: initial !important; background-origin: initial !important; background-clip: initial !important; border: 0px !important; inset: auto !important; float: none !important; line-height: 1.5em !important; outline: 0px !important; overflow: visible !important; position: static !important; vertical-align: baseline !important; width: auto !important; box-sizing: content-box !important; min-height: auto !important;"><span>我是Root</span></code></p><p class="line number16 index15 alt1" style="margin-top: 15px; margin-bottom: 15px; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); line-height: 1.5em; border-radius: 8px; font-size: 16px; color: rgb(61, 70, 77); box-sizing: border-box; padding-right: 1em !important; padding-left: 1em !important; border-left: 3px solid rgb(67, 90, 95) !important; white-space: pre-wrap !important;"><code class="php spaces" style="padding: 2px 4px; font-size: 13px; color: rgb(199, 37, 78); background-color: rgb(249, 242, 244); border-radius: 4px; font-family: Monaco, Menlo, Consolas, Courier New, monospace; margin: 0px !important; background-image: none !important; background-position: initial !important; background-size: initial !important; background-repeat: initial !important; background-attachment: initial !important; background-origin: initial !important; background-clip: initial !important; border: 0px !important; inset: auto !important; float: none !important; line-height: 1.5em !important; outline: 0px !important; overflow: visible !important; position: static !important; vertical-align: baseline !important; width: auto !important; box-sizing: content-box !important; min-height: auto !important;"> </code><code class="php plain" style="padding: 2px 4px; font-size: 13px; color: rgb(199, 37, 78); background-color: rgb(249, 242, 244); border-radius: 4px; font-family: Monaco, Menlo, Consolas, Courier New, monospace; margin: 0px !important; background-image: none !important; background-position: initial !important; background-size: initial !important; background-repeat: initial !important; background-attachment: initial !important; background-origin: initial !important; background-clip: initial !important; border: 0px !important; inset: auto !important; float: none !important; line-height: 1.5em !important; outline: 0px !important; overflow: visible !important; position: static !important; vertical-align: baseline !important; width: auto !important; box-sizing: content-box !important; min-height: auto !important;"><div id=</code><code class="php string" style="padding: 2px 4px; font-size: 13px; color: rgb(199, 37, 78); background-color: rgb(249, 242, 244); border-radius: 4px; font-family: Monaco, Menlo, Consolas, Courier New, monospace; margin: 0px !important; background-image: none !important; background-position: initial !important; background-size: initial !important; background-repeat: initial !important; background-attachment: initial !important; background-origin: initial !important; background-clip: initial !important; border: 0px !important; inset: auto !important; float: none !important; line-height: 1.5em !important; outline: 0px !important; overflow: visible !important; position: static !important; vertical-align: baseline !important; width: auto !important; box-sizing: content-box !important; min-height: auto !important;">app</code><code class="php plain" style="padding: 2px 4px; font-size: 13px; color: rgb(199, 37, 78); background-color: rgb(249, 242, 244); border-radius: 4px; font-family: Monaco, Menlo, Consolas, Courier New, monospace; margin: 0px !important; background-image: none !important; background-position: initial !important; background-size: initial !important; background-repeat: initial !important; background-attachment: initial !important; background-origin: initial !important; background-clip: initial !important; border: 0px !important; inset: auto !important; float: none !important; line-height: 1.5em !important; outline: 0px !important; overflow: visible !important; position: static !important; vertical-align: baseline !important; width: auto !important; box-sizing: content-box !important; min-height: auto !important;">></div></code></p><p class="line number17 index16 alt2" style="margin-top: 15px; margin-bottom: 15px; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); line-height: 1.5em; border-radius: 8px; font-size: 16px; color: rgb(61, 70, 77); box-sizing: border-box; padding-right: 1em !important; padding-left: 1em !important; border-left: 3px solid rgb(67, 90, 95) !important; white-space: pre-wrap !important;"><code class="php spaces" style="padding: 2px 4px; font-size: 13px; color: rgb(199, 37, 78); background-color: rgb(249, 242, 244); border-radius: 4px; font-family: Monaco, Menlo, Consolas, Courier New, monospace; margin: 0px !important; background-image: none !important; background-position: initial !important; background-size: initial !important; background-repeat: initial !important; background-attachment: initial !important; background-origin: initial !important; background-clip: initial !important; border: 0px !important; inset: auto !important; float: none !important; line-height: 1.5em !important; outline: 0px !important; overflow: visible !important; position: static !important; vertical-align: baseline !important; width: auto !important; box-sizing: content-box !important; min-height: auto !important;"> </code><code class="php plain" style="padding: 2px 4px; font-size: 13px; color: rgb(199, 37, 78); background-color: rgb(249, 242, 244); border-radius: 4px; font-family: Monaco, Menlo, Consolas, Courier New, monospace; margin: 0px !important; background-image: none !important; background-position: initial !important; background-size: initial !important; background-repeat: initial !important; background-attachment: initial !important; background-origin: initial !important; background-clip: initial !important; border: 0px !important; inset: auto !important; float: none !important; line-height: 1.5em !important; outline: 0px !important; overflow: visible !important; position: static !important; vertical-align: baseline !important; width: auto !important; box-sizing: content-box !important; min-height: auto !important;"><script></code></p><p class="line number18 index17 alt1" style="margin-top: 15px; margin-bottom: 15px; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); line-height: 1.5em; border-radius: 8px; font-size: 16px; color: rgb(61, 70, 77); box-sizing: border-box; padding-right: 1em !important; padding-left: 1em !important; border-left: 3px solid rgb(67, 90, 95) !important; white-space: pre-wrap !important;"><code class="php spaces" style="padding: 2px 4px; font-size: 13px; color: rgb(199, 37, 78); background-color: rgb(249, 242, 244); border-radius: 4px; font-family: Monaco, Menlo, Consolas, Courier New, monospace; margin: 0px !important; background-image: none !important; background-position: initial !important; background-size: initial !important; background-repeat: initial !important; background-attachment: initial !important; background-origin: initial !important; background-clip: initial !important; border: 0px !important; inset: auto !important; float: none !important; line-height: 1.5em !important; outline: 0px !important; overflow: visible !important; position: static !important; vertical-align: baseline !important; width: auto !important; box-sizing: content-box !important; min-height: auto !important;"> </code><code class="php plain" style="padding: 2px 4px; font-size: 13px; color: rgb(199, 37, 78); background-color: rgb(249, 242, 244); border-radius: 4px; font-family: Monaco, Menlo, Consolas, Courier New, monospace; margin: 0px !important; background-image: none !important; background-position: initial !important; background-size: initial !important; background-repeat: initial !important; background-attachment: initial !important; background-origin: initial !important; background-clip: initial !important; border: 0px !important; inset: auto !important; float: none !important; line-height: 1.5em !important; outline: 0px !important; overflow: visible !important; position: static !important; vertical-align: baseline !important; width: auto !important; box-sizing: content-box !important; min-height: auto !important;">let app = document.querySelector(</code><code class="php string" style="padding: 2px 4px; font-size: 13px; color: rgb(199, 37, 78); background-color: rgb(249, 242, 244); border-radius: 4px; font-family: Monaco, Menlo, Consolas, Courier New, monospace; margin: 0px !important; background-image: none !important; background-position: initial !important; background-size: initial !important; background-repeat: initial !important; background-attachment: initial !important; background-origin: initial !important; background-clip: initial !important; border: 0px !important; inset: auto !important; float: none !important; line-height: 1.5em !important; outline: 0px !important; overflow: visible !important; position: static !important; vertical-align: baseline !important; width: auto !important; box-sizing: content-box !important; min-height: auto !important;">#app</code><code class="php plain" style="padding: 2px 4px; font-size: 13px; color: rgb(199, 37, 78); background-color: rgb(249, 242, 244); border-radius: 4px; font-family: Monaco, Menlo, Consolas, Courier New, monospace; margin: 0px !important; background-image: none !important; background-position: initial !important; background-size: initial !important; background-repeat: initial !important; background-attachment: initial !important; background-origin: initial !important; background-clip: initial !important; border: 0px !important; inset: auto !important; float: none !important; line-height: 1.5em !important; outline: 0px !important; overflow: visible !important; position: static !important; vertical-align: baseline !important; width: auto !important; box-sizing: content-box !important; min-height: auto !important;">);</code></p><p class="line number19 index18 alt2" style="margin-top: 15px; margin-bottom: 15px; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); line-height: 1.5em; border-radius: 8px; font-size: 16px; color: rgb(61, 70, 77); box-sizing: border-box; padding-right: 1em !important; padding-left: 1em !important; border-left: 3px solid rgb(67, 90, 95) !important; white-space: pre-wrap !important;"><code class="php spaces" style="padding: 2px 4px; font-size: 13px; color: rgb(199, 37, 78); background-color: rgb(249, 242, 244); border-radius: 4px; font-family: Monaco, Menlo, Consolas, Courier New, monospace; margin: 0px !important; background-image: none !important; background-position: initial !important; background-size: initial !important; background-repeat: initial !important; background-attachment: initial !important; background-origin: initial !important; background-clip: initial !important; border: 0px !important; inset: auto !important; float: none !important; line-height: 1.5em !important; outline: 0px !important; overflow: visible !important; position: static !important; vertical-align: baseline !important; width: auto !important; box-sizing: content-box !important; min-height: auto !important;"> </code><code class="php plain" style="padding: 2px 4px; font-size: 13px; color: rgb(199, 37, 78); background-color: rgb(249, 242, 244); border-radius: 4px; font-family: Monaco, Menlo, Consolas, Courier New, monospace; margin: 0px !important; background-image: none !important; background-position: initial !important; background-size: initial !important; background-repeat: initial !important; background-attachment: initial !important; background-origin: initial !important; background-clip: initial !important; border: 0px !important; inset: auto !important; float: none !important; line-height: 1.5em !important; outline: 0px !important; overflow: visible !important; position: static !important; vertical-align: baseline !important; width: auto !important; box-sizing: content-box !important; min-height: auto !important;">let shadow1 = app.attachShadow({ mode: </code><code class="php string" style="padding: 2px 4px; font-size: 13px; color: rgb(199, 37, 78); background-color: rgb(249, 242, 244); border-radius: 4px; font-family: Monaco, Menlo, Consolas, Courier New, monospace; margin: 0px !important; background-image: none !important; background-position: initial !important; background-size: initial !important; background-repeat: initial !important; background-attachment: initial !important; background-origin: initial !important; background-clip: initial !important; border: 0px !important; inset: auto !important; float: none !important; line-height: 1.5em !important; outline: 0px !important; overflow: visible !important; position: static !important; vertical-align: baseline !important; width: auto !important; box-sizing: content-box !important; min-height: auto !important;">open</code><code class="php plain" style="padding: 2px 4px; font-size: 13px; color: rgb(199, 37, 78); background-color: rgb(249, 242, 244); border-radius: 4px; font-family: Monaco, Menlo, Consolas, Courier New, monospace; margin: 0px !important; background-image: none !important; background-position: initial !important; background-size: initial !important; background-repeat: initial !important; background-attachment: initial !important; background-origin: initial !important; background-clip: initial !important; border: 0px !important; inset: auto !important; float: none !important; line-height: 1.5em !important; outline: 0px !important; overflow: visible !important; position: static !important; vertical-align: baseline !important; width: auto !important; box-sizing: content-box !important; min-height: auto !important;">});</code></p><p class="line number20 index19 alt1" style="margin-top: 15px; margin-bottom: 15px; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); line-height: 1.5em; border-radius: 8px; font-size: 16px; color: rgb(61, 70, 77); box-sizing: border-box; padding-right: 1em !important; padding-left: 1em !important; border-left: 3px solid rgb(67, 90, 95) !important; white-space: pre-wrap !important;"><code class="php spaces" style="padding: 2px 4px; font-size: 13px; color: rgb(199, 37, 78); background-color: rgb(249, 242, 244); border-radius: 4px; font-family: Monaco, Menlo, Consolas, Courier New, monospace; margin: 0px !important; background-image: none !important; background-position: initial !important; background-size: initial !important; background-repeat: initial !important; background-attachment: initial !important; background-origin: initial !important; background-clip: initial !important; border: 0px !important; inset: auto !important; float: none !important; line-height: 1.5em !important; outline: 0px !important; overflow: visible !important; position: static !important; vertical-align: baseline !important; width: auto !important; box-sizing: content-box !important; min-height: auto !important;"> </code> </p><p class="line number21 index20 alt2" style="margin-top: 15px; margin-bottom: 15px; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); line-height: 1.5em; border-radius: 8px; font-size: 16px; color: rgb(61, 70, 77); box-sizing: border-box; padding-right: 1em !important; padding-left: 1em !important; border-left: 3px solid rgb(67, 90, 95) !important; white-space: pre-wrap !important;"><code class="php spaces" style="padding: 2px 4px; font-size: 13px; color: rgb(199, 37, 78); background-color: rgb(249, 242, 244); border-radius: 4px; font-family: Monaco, Menlo, Consolas, Courier New, monospace; margin: 0px !important; background-image: none !important; background-position: initial !important; background-size: initial !important; background-repeat: initial !important; background-attachment: initial !important; background-origin: initial !important; background-clip: initial !important; border: 0px !important; inset: auto !important; float: none !important; line-height: 1.5em !important; outline: 0px !important; overflow: visible !important; position: static !important; vertical-align: baseline !important; width: auto !important; box-sizing: content-box !important; min-height: auto !important;"> </code><code class="php plain" style="padding: 2px 4px; font-size: 13px; color: rgb(199, 37, 78); background-color: rgb(249, 242, 244); border-radius: 4px; font-family: Monaco, Menlo, Consolas, Courier New, monospace; margin: 0px !important; background-image: none !important; background-position: initial !important; background-size: initial !important; background-repeat: initial !important; background-attachment: initial !important; background-origin: initial !important; background-clip: initial !important; border: 0px !important; inset: auto !important; float: none !important; line-height: 1.5em !important; outline: 0px !important; overflow: visible !important; position: static !important; vertical-align: baseline !important; width: auto !important; box-sizing: content-box !important; min-height: auto !important;">let style1 = document.createElement(</code><code class="php string" style="padding: 2px 4px; font-size: 13px; color: rgb(199, 37, 78); background-color: rgb(249, 242, 244); border-radius: 4px; font-family: Monaco, Menlo, Consolas, Courier New, monospace; margin: 0px !important; background-image: none !important; background-position: initial !important; background-size: initial !important; background-repeat: initial !important; background-attachment: initial !important; background-origin: initial !important; background-clip: initial !important; border: 0px !important; inset: auto !important; float: none !important; line-height: 1.5em !important; outline: 0px !important; overflow: visible !important; position: static !important; vertical-align: baseline !important; width: auto !important; box-sizing: content-box !important; min-height: auto !important;">style</code><code class="php plain" style="padding: 2px 4px; font-size: 13px; color: rgb(199, 37, 78); background-color: rgb(249, 242, 244); border-radius: 4px; font-family: Monaco, Menlo, Consolas, Courier New, monospace; margin: 0px !important; background-image: none !important; background-position: initial !important; background-size: initial !important; background-repeat: initial !important; background-attachment: initial !important; background-origin: initial !important; background-clip: initial !important; border: 0px !important; inset: auto !important; float: none !important; line-height: 1.5em !important; outline: 0px !important; overflow: visible !important; position: static !important; vertical-align: baseline !important; width: auto !important; box-sizing: content-box !important; min-height: auto !important;">);</code></p><p class="line number22 index21 alt1" style="margin-top: 15px; margin-bottom: 15px; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); line-height: 1.5em; border-radius: 8px; font-size: 16px; color: rgb(61, 70, 77); box-sizing: border-box; padding-right: 1em !important; padding-left: 1em !important; border-left: 3px solid rgb(67, 90, 95) !important; white-space: pre-wrap !important;"><code class="php spaces" style="padding: 2px 4px; font-size: 13px; color: rgb(199, 37, 78); background-color: rgb(249, 242, 244); border-radius: 4px; font-family: Monaco, Menlo, Consolas, Courier New, monospace; margin: 0px !important; background-image: none !important; background-position: initial !important; background-size: initial !important; background-repeat: initial !important; background-attachment: initial !important; background-origin: initial !important; background-clip: initial !important; border: 0px !important; inset: auto !important; float: none !important; line-height: 1.5em !important; outline: 0px !important; overflow: visible !important; position: static !important; vertical-align: baseline !important; width: auto !important; box-sizing: content-box !important; min-height: auto !important;"> </code><code class="php plain" style="padding: 2px 4px; font-size: 13px; color: rgb(199, 37, 78); background-color: rgb(249, 242, 244); border-radius: 4px; font-family: Monaco, Menlo, Consolas, Courier New, monospace; margin: 0px !important; background-image: none !important; background-position: initial !important; background-size: initial !important; background-repeat: initial !important; background-attachment: initial !important; background-origin: initial !important; background-clip: initial !important; border: 0px !important; inset: auto !important; float: none !important; line-height: 1.5em !important; outline: 0px !important; overflow: visible !important; position: static !important; vertical-align: baseline !important; width: auto !important; box-sizing: content-box !important; min-height: auto !important;">style1.appendChild(document.createTextNode(</code><code class="php string" style="padding: 2px 4px; font-size: 13px; color: rgb(199, 37, 78); background-color: rgb(249, 242, 244); border-radius: 4px; font-family: Monaco, Menlo, Consolas, Courier New, monospace; margin: 0px !important; background-image: none !important; background-position: initial !important; background-size: initial !important; background-repeat: initial !important; background-attachment: initial !important; background-origin: initial !important; background-clip: initial !important; border: 0px !important; inset: auto !important; float: none !important; line-height: 1.5em !important; outline: 0px !important; overflow: visible !important; position: static !important; vertical-align: baseline !important; width: auto !important; box-sizing: content-box !important; min-height: auto !important;">span{color: red;}</code><code class="php plain" style="padding: 2px 4px; font-size: 13px; color: rgb(199, 37, 78); background-color: rgb(249, 242, 244); border-radius: 4px; font-family: Monaco, Menlo, Consolas, Courier New, monospace; margin: 0px !important; background-image: none !important; background-position: initial !important; background-size: initial !important; background-repeat: initial !important; background-attachment: initial !important; background-origin: initial !important; background-clip: initial !important; border: 0px !important; inset: auto !important; float: none !important; line-height: 1.5em !important; outline: 0px !important; overflow: visible !important; position: static !important; vertical-align: baseline !important; width: auto !important; box-sizing: content-box !important; min-height: auto !important;">));</code></p><p class="line number23 index22 alt2" style="margin-top: 15px; margin-bottom: 15px; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); line-height: 1.5em; border-radius: 8px; font-size: 16px; color: rgb(61, 70, 77); box-sizing: border-box; padding-right: 1em !important; padding-left: 1em !important; border-left: 3px solid rgb(67, 90, 95) !important; white-space: pre-wrap !important;"><code class="php spaces" style="padding: 2px 4px; font-size: 13px; color: rgb(199, 37, 78); background-color: rgb(249, 242, 244); border-radius: 4px; font-family: Monaco, Menlo, Consolas, Courier New, monospace; margin: 0px !important; background-image: none !important; background-position: initial !important; background-size: initial !important; background-repeat: initial !important; background-attachment: initial !important; background-origin: initial !important; background-clip: initial !important; border: 0px !important; inset: auto !important; float: none !important; line-height: 1.5em !important; outline: 0px !important; overflow: visible !important; position: static !important; vertical-align: baseline !important; width: auto !important; box-sizing: content-box !important; min-height: auto !important;"> </code><code class="php plain" style="padding: 2px 4px; font-size: 13px; color: rgb(199, 37, 78); background-color: rgb(249, 242, 244); border-radius: 4px; font-family: Monaco, Menlo, Consolas, Courier New, monospace; margin: 0px !important; background-image: none !important; background-position: initial !important; background-size: initial !important; background-repeat: initial !important; background-attachment: initial !important; background-origin: initial !important; background-clip: initial !important; border: 0px !important; inset: auto !important; float: none !important; line-height: 1.5em !important; outline: 0px !important; overflow: visible !important; position: static !important; vertical-align: baseline !important; width: auto !important; box-sizing: content-box !important; min-height: auto !important;">shadow1.appendChild(style1);</code></p><p class="line number24 index23 alt1" style="margin-top: 15px; margin-bottom: 15px; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); line-height: 1.5em; border-radius: 8px; font-size: 16px; color: rgb(61, 70, 77); box-sizing: border-box; padding-right: 1em !important; padding-left: 1em !important; border-left: 3px solid rgb(67, 90, 95) !important; white-space: pre-wrap !important;"> </p><p class="line number25 index24 alt2" style="margin-top: 15px; margin-bottom: 15px; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); line-height: 1.5em; border-radius: 8px; font-size: 16px; color: rgb(61, 70, 77); box-sizing: border-box; padding-right: 1em !important; padding-left: 1em !important; border-left: 3px solid rgb(67, 90, 95) !important; white-space: pre-wrap !important;"><code class="php spaces" style="padding: 2px 4px; font-size: 13px; color: rgb(199, 37, 78); background-color: rgb(249, 242, 244); border-radius: 4px; font-family: Monaco, Menlo, Consolas, Courier New, monospace; margin: 0px !important; background-image: none !important; background-position: initial !important; background-size: initial !important; background-repeat: initial !important; background-attachment: initial !important; background-origin: initial !important; background-clip: initial !important; border: 0px !important; inset: auto !important; float: none !important; line-height: 1.5em !important; outline: 0px !important; overflow: visible !important; position: static !important; vertical-align: baseline !important; width: auto !important; box-sizing: content-box !important; min-height: auto !important;"> </code><code class="php plain" style="padding: 2px 4px; font-size: 13px; color: rgb(199, 37, 78); background-color: rgb(249, 242, 244); border-radius: 4px; font-family: Monaco, Menlo, Consolas, Courier New, monospace; margin: 0px !important; background-image: none !important; background-position: initial !important; background-size: initial !important; background-repeat: initial !important; background-attachment: initial !important; background-origin: initial !important; background-clip: initial !important; border: 0px !important; inset: auto !important; float: none !important; line-height: 1.5em !important; outline: 0px !important; overflow: visible !important; position: static !important; vertical-align: baseline !important; width: auto !important; box-sizing: content-box !important; min-height: auto !important;">let span1 = document.createElement(</code><code class="php string" style="padding: 2px 4px; font-size: 13px; color: rgb(199, 37, 78); background-color: rgb(249, 242, 244); border-radius: 4px; font-family: Monaco, Menlo, Consolas, Courier New, monospace; margin: 0px !important; background-image: none !important; background-position: initial !important; background-size: initial !important; background-repeat: initial !important; background-attachment: initial !important; background-origin: initial !important; background-clip: initial !important; border: 0px !important; inset: auto !important; float: none !important; line-height: 1.5em !important; outline: 0px !important; overflow: visible !important; position: static !important; vertical-align: baseline !important; width: auto !important; box-sizing: content-box !important; min-height: auto !important;">span</code><code class="php plain" style="padding: 2px 4px; font-size: 13px; color: rgb(199, 37, 78); background-color: rgb(249, 242, 244); border-radius: 4px; font-family: Monaco, Menlo, Consolas, Courier New, monospace; margin: 0px !important; background-image: none !important; background-position: initial !important; background-size: initial !important; background-repeat: initial !important; background-attachment: initial !important; background-origin: initial !important; background-clip: initial !important; border: 0px !important; inset: auto !important; float: none !important; line-height: 1.5em !important; outline: 0px !important; overflow: visible !important; position: static !important; vertical-align: baseline !important; width: auto !important; box-sizing: content-box !important; min-height: auto !important;">);</code></p><p class="line number26 index25 alt1" style="margin-top: 15px; margin-bottom: 15px; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); line-height: 1.5em; border-radius: 8px; font-size: 16px; color: rgb(61, 70, 77); box-sizing: border-box; padding-right: 1em !important; padding-left: 1em !important; border-left: 3px solid rgb(67, 90, 95) !important; white-space: pre-wrap !important;"><code class="php spaces" style="padding: 2px 4px; font-size: 13px; color: rgb(199, 37, 78); background-color: rgb(249, 242, 244); border-radius: 4px; font-family: Monaco, Menlo, Consolas, Courier New, monospace; margin: 0px !important; background-image: none !important; background-position: initial !important; background-size: initial !important; background-repeat: initial !important; background-attachment: initial !important; background-origin: initial !important; background-clip: initial !important; border: 0px !important; inset: auto !important; float: none !important; line-height: 1.5em !important; outline: 0px !important; overflow: visible !important; position: static !important; vertical-align: baseline !important; width: auto !important; box-sizing: content-box !important; min-height: auto !important;"> </code><code class="php plain" style="padding: 2px 4px; font-size: 13px; color: rgb(199, 37, 78); background-color: rgb(249, 242, 244); border-radius: 4px; font-family: Monaco, Menlo, Consolas, Courier New, monospace; margin: 0px !important; background-image: none !important; background-position: initial !important; background-size: initial !important; background-repeat: initial !important; background-attachment: initial !important; background-origin: initial !important; background-clip: initial !important; border: 0px !important; inset: auto !important; float: none !important; line-height: 1.5em !important; outline: 0px !important; overflow: visible !important; position: static !important; vertical-align: baseline !important; width: auto !important; box-sizing: content-box !important; min-height: auto !important;">span1.textContent = </code><code class="php string" style="padding: 2px 4px; font-size: 13px; color: rgb(199, 37, 78); background-color: rgb(249, 242, 244); border-radius: 4px; font-family: Monaco, Menlo, Consolas, Courier New, monospace; margin: 0px !important; background-image: none !important; background-position: initial !important; background-size: initial !important; background-repeat: initial !important; background-attachment: initial !important; background-origin: initial !important; background-clip: initial !important; border: 0px !important; inset: auto !important; float: none !important; line-height: 1.5em !important; outline: 0px !important; overflow: visible !important; position: static !important; vertical-align: baseline !important; width: auto !important; box-sizing: content-box !important; min-height: auto !important;">I am span.</code><code class="php plain" style="padding: 2px 4px; font-size: 13px; color: rgb(199, 37, 78); background-color: rgb(249, 242, 244); border-radius: 4px; font-family: Monaco, Menlo, Consolas, Courier New, monospace; margin: 0px !important; background-image: none !important; background-position: initial !important; background-size: initial !important; background-repeat: initial !important; background-attachment: initial !important; background-origin: initial !important; background-clip: initial !important; border: 0px !important; inset: auto !important; float: none !important; line-height: 1.5em !important; outline: 0px !important; overflow: visible !important; position: static !important; vertical-align: baseline !important; width: auto !important; box-sizing: content-box !important; min-height: auto !important;">;</code></p><p class="line number27 index26 alt2" style="margin-top: 15px; margin-bottom: 15px; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); line-height: 1.5em; border-radius: 8px; font-size: 16px; color: rgb(61, 70, 77); box-sizing: border-box; padding-right: 1em !important; padding-left: 1em !important; border-left: 3px solid rgb(67, 90, 95) !important; white-space: pre-wrap !important;"><code class="php spaces" style="padding: 2px 4px; font-size: 13px; color: rgb(199, 37, 78); background-color: rgb(249, 242, 244); border-radius: 4px; font-family: Monaco, Menlo, Consolas, Courier New, monospace; margin: 0px !important; background-image: none !important; background-position: initial !important; background-size: initial !important; background-repeat: initial !important; background-attachment: initial !important; background-origin: initial !important; background-clip: initial !important; border: 0px !important; inset: auto !important; float: none !important; line-height: 1.5em !important; outline: 0px !important; overflow: visible !important; position: static !important; vertical-align: baseline !important; width: auto !important; box-sizing: content-box !important; min-height: auto !important;"> </code><code class="php plain" style="padding: 2px 4px; font-size: 13px; color: rgb(199, 37, 78); background-color: rgb(249, 242, 244); border-radius: 4px; font-family: Monaco, Menlo, Consolas, Courier New, monospace; margin: 0px !important; background-image: none !important; background-position: initial !important; background-size: initial !important; background-repeat: initial !important; background-attachment: initial !important; background-origin: initial !important; background-clip: initial !important; border: 0px !important; inset: auto !important; float: none !important; line-height: 1.5em !important; outline: 0px !important; overflow: visible !important; position: static !important; vertical-align: baseline !important; width: auto !important; box-sizing: content-box !important; min-height: auto !important;">shadow1.appendChild(span1);</code></p><p class="line number28 index27 alt1" style="margin-top: 15px; margin-bottom: 15px; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); line-height: 1.5em; border-radius: 8px; font-size: 16px; color: rgb(61, 70, 77); box-sizing: border-box; padding-right: 1em !important; padding-left: 1em !important; border-left: 3px solid rgb(67, 90, 95) !important; white-space: pre-wrap !important;"><code class="php spaces" style="padding: 2px 4px; font-size: 13px; color: rgb(199, 37, 78); background-color: rgb(249, 242, 244); border-radius: 4px; font-family: Monaco, Menlo, Consolas, Courier New, monospace; margin: 0px !important; background-image: none !important; background-position: initial !important; background-size: initial !important; background-repeat: initial !important; background-attachment: initial !important; background-origin: initial !important; background-clip: initial !important; border: 0px !important; inset: auto !important; float: none !important; line-height: 1.5em !important; outline: 0px !important; overflow: visible !important; position: static !important; vertical-align: baseline !important; width: auto !important; box-sizing: content-box !important; min-height: auto !important;"> </code><code class="php plain" style="padding: 2px 4px; font-size: 13px; color: rgb(199, 37, 78); background-color: rgb(249, 242, 244); border-radius: 4px; font-family: Monaco, Menlo, Consolas, Courier New, monospace; margin: 0px !important; background-image: none !important; background-position: initial !important; background-size: initial !important; background-repeat: initial !important; background-attachment: initial !important; background-origin: initial !important; background-clip: initial !important; border: 0px !important; inset: auto !important; float: none !important; line-height: 1.5em !important; outline: 0px !important; overflow: visible !important; position: static !important; vertical-align: baseline !important; width: auto !important; box-sizing: content-box !important; min-height: auto !important;"></script></code></p><p class="line number29 index28 alt2" style="margin-top: 15px; margin-bottom: 15px; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); line-height: 1.5em; border-radius: 8px; font-size: 16px; color: rgb(61, 70, 77); box-sizing: border-box; padding-right: 1em !important; padding-left: 1em !important; border-left: 3px solid rgb(67, 90, 95) !important; white-space: pre-wrap !important;"><code class="php plain" style="padding: 2px 4px; font-size: 13px; color: rgb(199, 37, 78); background-color: rgb(249, 242, 244); border-radius: 4px; font-family: Monaco, Menlo, Consolas, Courier New, monospace; margin: 0px !important; background-image: none !important; background-position: initial !important; background-size: initial !important; background-repeat: initial !important; background-attachment: initial !important; background-origin: initial !important; background-clip: initial !important; border: 0px !important; inset: auto !important; float: none !important; line-height: 1.5em !important; outline: 0px !important; overflow: visible !important; position: static !important; vertical-align: baseline !important; width: auto !important; box-sizing: content-box !important; min-height: auto !important;"></body></code></p><p class="line number30 index29 alt1" style="margin-top: 15px; margin-bottom: 15px; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); line-height: 1.5em; border-radius: 8px; font-size: 16px; color: rgb(61, 70, 77); box-sizing: border-box; padding-right: 1em !important; padding-left: 1em !important; border-left: 3px solid rgb(67, 90, 95) !important; white-space: pre-wrap !important;"><code class="php plain" style="padding: 2px 4px; font-size: 13px; color: rgb(199, 37, 78); background-color: rgb(249, 242, 244); border-radius: 4px; font-family: Monaco, Menlo, Consolas, Courier New, monospace; margin: 0px !important; background-image: none !important; background-position: initial !important; background-size: initial !important; background-repeat: initial !important; background-attachment: initial !important; background-origin: initial !important; background-clip: initial !important; border: 0px !important; inset: auto !important; float: none !important; line-height: 1.5em !important; outline: 0px !important; overflow: visible !important; position: static !important; vertical-align: baseline !important; width: auto !important; box-sizing: content-box !important; min-height: auto !important;"></html></code></p></td></tr></tbody></table><p style="margin-top: 15px; margin-bottom: 15px; padding: 0px 0px 0px 10px; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); color: rgb(61, 70, 77); box-sizing: border-box; border-radius: 8px; font-family: Helvetica Neue, Helvetica, PingFang SC, 微软雅黑, Tahoma, Arial, sans-serif; white-space: normal; background-color: rgb(255, 255, 255);"></p><p style="margin-top: 15px; margin-bottom: 15px; padding: 0px 0px 0px 10px; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); color: rgb(61, 70, 77); box-sizing: border-box; border-radius: 8px; font-family: Helvetica Neue, Helvetica, PingFang SC, 微软雅黑, Tahoma, Arial, sans-serif; white-space: normal; background-color: rgb(255, 255, 255);">上面的例子，定义了全局span的样式，也定义了shadowDOM里的span样式，可以看出相互不受影响。</p><h4 data-id="heading-3" style="margin: 0px; padding: 0px; font-weight: 400; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); font-size: 14px; font-family: Helvetica Neue, Helvetica, PingFang SC, 微软雅黑, Tahoma, Arial, sans-serif; white-space: normal; background-color: rgb(255, 255, 255);"><strong style="margin: 0px; padding: 0px;">Angular中ShadowDOM的封装</strong></h4><p style="margin-top: 15px; margin-bottom: 15px; padding: 0px 0px 0px 10px; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); color: rgb(61, 70, 77); box-sizing: border-box; border-radius: 8px; font-family: Helvetica Neue, Helvetica, PingFang SC, 微软雅黑, Tahoma, Arial, sans-serif; white-space: normal; background-color: rgb(255, 255, 255);">了解了什么是ShadowDOM后，再来看一下Angular中ShadowDOM的封装。</p><p style="margin-top: 15px; margin-bottom: 15px; padding: 0px 0px 0px 10px; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); color: rgb(61, 70, 77); box-sizing: border-box; border-radius: 8px; font-family: Helvetica Neue, Helvetica, PingFang SC, 微软雅黑, Tahoma, Arial, sans-serif; white-space: normal; background-color: rgb(255, 255, 255);">Angular 使用浏览器内置的 <a href="https://developer.mozilla.org/docs/Web/Web_Components/Shadow_DOM" target="_blank" textvalue="Shadow DOM API" style="margin: 0px; padding: 0px; color: rgb(61, 167, 13); text-decoration-line: none !important;">Shadow DOM API</a> 将组件的视图包含在 ShadowRoot（用作组件的宿主元素）中，并以隔离的方式应用所提供的样式。<a href="https://angular.cn/api/core/ViewEncapsulation#ShadowDom" target="_blank" textvalue="ViewEncapsulation.ShadowDom" style="margin: 0px; padding: 0px; color: rgb(61, 167, 13); text-decoration-line: none !important;">ViewEncapsulation.ShadowDom</a> 仅适用于内置支持 shadow DOM 的浏览器。并非所有浏览器都支持它，这就是为什么 <a href="https://angular.cn/api/core/ViewEncapsulation#Emulated" target="_blank" textvalue="ViewEncapsulation.Emulated" style="margin: 0px; padding: 0px; color: rgb(61, 167, 13); text-decoration-line: none !important;">ViewEncapsulation.Emulated</a> 是推荐和默认模式的原因。</p><p style="margin-top: 15px; margin-bottom: 15px; padding: 0px 0px 0px 10px; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); color: rgb(61, 70, 77); box-sizing: border-box; border-radius: 8px; font-family: Helvetica Neue, Helvetica, PingFang SC, 微软雅黑, Tahoma, Arial, sans-serif; white-space: normal; background-color: rgb(255, 255, 255);">比如下面的这个例子，使用<strong style="margin: 0px; padding: 0px;">ViewEncapsulation.ShadowDom</strong>。</p><table class="wcn_c_table" cellpadding="0" cellspacing="0" width="760"><tbody style="margin: 0px !important; padding: 0px !important; border-radius: 0px !important; background: none !important; border: 0px !important; inset: auto !important; float: none !important; line-height: 1.1em !important; outline: 0px !important; overflow: visible !important; position: static !important; vertical-align: baseline !important; width: auto !important; box-sizing: content-box !important; min-height: auto !important;"><tr style="margin: 0px !important; padding: 0px !important; border-radius: 0px !important; background: none !important; border: 0px !important; inset: auto !important; float: none !important; line-height: 1.1em !important; outline: 0px !important; overflow: visible !important; position: static !important; vertical-align: baseline !important; width: auto !important; box-sizing: content-box !important; min-height: auto !important;" class="firstRow"><td class="gutter" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); margin: 0px !important; border-radius: 4px 0px 0px 4px !important; background: none !important; inset: auto !important; float: none !important; line-height: 1.1em !important; outline: 0px !important; overflow: visible !important; position: static !important; vertical-align: baseline !important; box-sizing: content-box !important; min-height: auto !important; color: rgb(175, 175, 175) !important; user-select: none !important;" width="NaN"><p class="line number1 index0 alt2" style="margin-top: 15px; margin-bottom: 15px; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); line-height: 1.5em; border-radius: 8px; font-size: 16px; color: rgb(61, 70, 77); box-sizing: border-box; padding-right: 0.5em !important; padding-left: 1em !important; border-left: 3px solid rgb(67, 90, 95) !important; white-space: pre-wrap !important; text-align: right !important;">1</p><p class="line number2 index1 alt1" style="margin-top: 15px; margin-bottom: 15px; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); line-height: 1.5em; border-radius: 8px; font-size: 16px; color: rgb(61, 70, 77); box-sizing: border-box; padding-right: 0.5em !important; padding-left: 1em !important; border-left: 3px solid rgb(67, 90, 95) !important; white-space: pre-wrap !important; text-align: right !important;">2</p><p class="line number3 index2 alt2" style="margin-top: 15px; margin-bottom: 15px; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); line-height: 1.5em; border-radius: 8px; font-size: 16px; color: rgb(61, 70, 77); box-sizing: border-box; padding-right: 0.5em !important; padding-left: 1em !important; border-left: 3px solid rgb(67, 90, 95) !important; white-space: pre-wrap !important; text-align: right !important;">3</p><p class="line number4 index3 alt1" style="margin-top: 15px; margin-bottom: 15px; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); line-height: 1.5em; border-radius: 8px; font-size: 16px; color: rgb(61, 70, 77); box-sizing: border-box; padding-right: 0.5em !important; padding-left: 1em !important; border-left: 3px solid rgb(67, 90, 95) !important; white-space: pre-wrap !important; text-align: right !important;">4</p><p class="line number5 index4 alt2" style="margin-top: 15px; margin-bottom: 15px; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); line-height: 1.5em; border-radius: 8px; font-size: 16px; color: rgb(61, 70, 77); box-sizing: border-box; padding-right: 0.5em !important; padding-left: 1em !important; border-left: 3px solid rgb(67, 90, 95) !important; white-space: pre-wrap !important; text-align: right !important;">5</p><p class="line number6 index5 alt1" style="margin-top: 15px; margin-bottom: 15px; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); line-height: 1.5em; border-radius: 8px; font-size: 16px; color: rgb(61, 70, 77); box-sizing: border-box; padding-right: 0.5em !important; padding-left: 1em !important; border-left: 3px solid rgb(67, 90, 95) !important; white-space: pre-wrap !important; text-align: right !important;">6</p><p class="line number7 index6 alt2" style="margin-top: 15px; margin-bottom: 15px; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); line-height: 1.5em; border-radius: 8px; font-size: 16px; color: rgb(61, 70, 77); box-sizing: border-box; padding-right: 0.5em !important; padding-left: 1em !important; border-left: 3px solid rgb(67, 90, 95) !important; white-space: pre-wrap !important; text-align: right !important;">7</p><p class="line number8 index7 alt1" style="margin-top: 15px; margin-bottom: 15px; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); line-height: 1.5em; border-radius: 8px; font-size: 16px; color: rgb(61, 70, 77); box-sizing: border-box; padding-right: 0.5em !important; padding-left: 1em !important; border-left: 3px solid rgb(67, 90, 95) !important; white-space: pre-wrap !important; text-align: right !important;">8</p><p class="line number9 index8 alt2" style="margin-top: 15px; margin-bottom: 15px; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); line-height: 1.5em; border-radius: 8px; font-size: 16px; color: rgb(61, 70, 77); box-sizing: border-box; padding-right: 0.5em !important; padding-left: 1em !important; border-left: 3px solid rgb(67, 90, 95) !important; white-space: pre-wrap !important; text-align: right !important;">9</p><p class="line number10 index9 alt1" style="margin-top: 15px; margin-bottom: 15px; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); line-height: 1.5em; border-radius: 8px; font-size: 16px; color: rgb(61, 70, 77); box-sizing: border-box; padding-right: 0.5em !important; padding-left: 1em !important; border-left: 3px solid rgb(67, 90, 95) !important; white-space: pre-wrap !important; text-align: right !important;">10</p><p class="line number11 index10 alt2" style="margin-top: 15px; margin-bottom: 15px; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); line-height: 1.5em; border-radius: 8px; font-size: 16px; color: rgb(61, 70, 77); box-sizing: border-box; padding-right: 0.5em !important; padding-left: 1em !important; border-left: 3px solid rgb(67, 90, 95) !important; white-space: pre-wrap !important; text-align: right !important;">11</p><p class="line number12 index11 alt1" style="margin-top: 15px; margin-bottom: 15px; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); line-height: 1.5em; border-radius: 8px; font-size: 16px; color: rgb(61, 70, 77); box-sizing: border-box; padding-right: 0.5em !important; padding-left: 1em !important; border-left: 3px solid rgb(67, 90, 95) !important; white-space: pre-wrap !important; text-align: right !important;">12</p><p class="line number13 index12 alt2" style="margin-top: 15px; margin-bottom: 15px; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); line-height: 1.5em; border-radius: 8px; font-size: 16px; color: rgb(61, 70, 77); box-sizing: border-box; padding-right: 0.5em !important; padding-left: 1em !important; border-left: 3px solid rgb(67, 90, 95) !important; white-space: pre-wrap !important; text-align: right !important;">13</p><p class="line number14 index13 alt1" style="margin-top: 15px; margin-bottom: 15px; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); line-height: 1.5em; border-radius: 8px; font-size: 16px; color: rgb(61, 70, 77); box-sizing: border-box; padding-right: 0.5em !important; padding-left: 1em !important; border-left: 3px solid rgb(67, 90, 95) !important; white-space: pre-wrap !important; text-align: right !important;">14</p></td><td class="code" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); word-break: break-all; margin: 0px !important; border-radius: 0px !important; background: none !important; inset: auto !important; float: none !important; line-height: 1.1em !important; outline: 0px !important; overflow: visible !important; position: static !important; vertical-align: baseline !important; box-sizing: content-box !important; min-height: auto !important;" width="712"><p class="line number1 index0 alt2" style="margin-top: 15px; margin-bottom: 15px; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); line-height: 1.5em; border-radius: 8px; font-size: 16px; color: rgb(61, 70, 77); box-sizing: border-box; padding-right: 1em !important; padding-left: 1em !important; border-left: 3px solid rgb(67, 90, 95) !important; white-space: pre-wrap !important;"><code class="php plain" style="padding: 2px 4px; font-size: 13px; color: rgb(199, 37, 78); background-color: rgb(249, 242, 244); border-radius: 4px; font-family: Monaco, Menlo, Consolas, Courier New, monospace; margin: 0px !important; background-image: none !important; background-position: initial !important; background-size: initial !important; background-repeat: initial !important; background-attachment: initial !important; background-origin: initial !important; background-clip: initial !important; border: 0px !important; inset: auto !important; float: none !important; line-height: 1.5em !important; outline: 0px !important; overflow: visible !important; position: static !important; vertical-align: baseline !important; width: auto !important; box-sizing: content-box !important; min-height: auto !important;">@Component({</code></p><p class="line number2 index1 alt1" style="margin-top: 15px; margin-bottom: 15px; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); line-height: 1.5em; border-radius: 8px; font-size: 16px; color: rgb(61, 70, 77); box-sizing: border-box; padding-right: 1em !important; padding-left: 1em !important; border-left: 3px solid rgb(67, 90, 95) !important; white-space: pre-wrap !important;"><code class="php spaces" style="padding: 2px 4px; font-size: 13px; color: rgb(199, 37, 78); background-color: rgb(249, 242, 244); border-radius: 4px; font-family: Monaco, Menlo, Consolas, Courier New, monospace; margin: 0px !important; background-image: none !important; background-position: initial !important; background-size: initial !important; background-repeat: initial !important; background-attachment: initial !important; background-origin: initial !important; background-clip: initial !important; border: 0px !important; inset: auto !important; float: none !important; line-height: 1.5em !important; outline: 0px !important; overflow: visible !important; position: static !important; vertical-align: baseline !important; width: auto !important; box-sizing: content-box !important; min-height: auto !important;"> </code><code class="php plain" style="padding: 2px 4px; font-size: 13px; color: rgb(199, 37, 78); background-color: rgb(249, 242, 244); border-radius: 4px; font-family: Monaco, Menlo, Consolas, Courier New, monospace; margin: 0px !important; background-image: none !important; background-position: initial !important; background-size: initial !important; background-repeat: initial !important; background-attachment: initial !important; background-origin: initial !important; background-clip: initial !important; border: 0px !important; inset: auto !important; float: none !important; line-height: 1.5em !important; outline: 0px !important; overflow: visible !important; position: static !important; vertical-align: baseline !important; width: auto !important; box-sizing: content-box !important; min-height: auto !important;">selector: </code><code class="php string" style="padding: 2px 4px; font-size: 13px; color: rgb(199, 37, 78); background-color: rgb(249, 242, 244); border-radius: 4px; font-family: Monaco, Menlo, Consolas, Courier New, monospace; margin: 0px !important; background-image: none !important; background-position: initial !important; background-size: initial !important; background-repeat: initial !important; background-attachment: initial !important; background-origin: initial !important; background-clip: initial !important; border: 0px !important; inset: auto !important; float: none !important; line-height: 1.5em !important; outline: 0px !important; overflow: visible !important; position: static !important; vertical-align: baseline !important; width: auto !important; box-sizing: content-box !important; min-height: auto !important;">user-child</code><code class="php plain" style="padding: 2px 4px; font-size: 13px; color: rgb(199, 37, 78); background-color: rgb(249, 242, 244); border-radius: 4px; font-family: Monaco, Menlo, Consolas, Courier New, monospace; margin: 0px !important; background-image: none !important; background-position: initial !important; background-size: initial !important; background-repeat: initial !important; background-attachment: initial !important; background-origin: initial !important; background-clip: initial !important; border: 0px !important; inset: auto !important; float: none !important; line-height: 1.5em !important; outline: 0px !important; overflow: visible !important; position: static !important; vertical-align: baseline !important; width: auto !important; box-sizing: content-box !important; min-height: auto !important;">,</code></p><p class="line number3 index2 alt2" style="margin-top: 15px; margin-bottom: 15px; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); line-height: 1.5em; border-radius: 8px; font-size: 16px; color: rgb(61, 70, 77); box-sizing: border-box; padding-right: 1em !important; padding-left: 1em !important; border-left: 3px solid rgb(67, 90, 95) !important; white-space: pre-wrap !important;"><code class="php spaces" style="padding: 2px 4px; font-size: 13px; color: rgb(199, 37, 78); background-color: rgb(249, 242, 244); border-radius: 4px; font-family: Monaco, Menlo, Consolas, Courier New, monospace; margin: 0px !important; background-image: none !important; background-position: initial !important; background-size: initial !important; background-repeat: initial !important; background-attachment: initial !important; background-origin: initial !important; background-clip: initial !important; border: 0px !important; inset: auto !important; float: none !important; line-height: 1.5em !important; outline: 0px !important; overflow: visible !important; position: static !important; vertical-align: baseline !important; width: auto !important; box-sizing: content-box !important; min-height: auto !important;"> </code><code class="php plain" style="padding: 2px 4px; font-size: 13px; color: rgb(199, 37, 78); background-color: rgb(249, 242, 244); border-radius: 4px; font-family: Monaco, Menlo, Consolas, Courier New, monospace; margin: 0px !important; background-image: none !important; background-position: initial !important; background-size: initial !important; background-repeat: initial !important; background-attachment: initial !important; background-origin: initial !important; background-clip: initial !important; border: 0px !important; inset: auto !important; float: none !important; line-height: 1.5em !important; outline: 0px !important; overflow: visible !important; position: static !important; vertical-align: baseline !important; width: auto !important; box-sizing: content-box !important; min-height: auto !important;">templateUrl: </code><code class="php string" style="padding: 2px 4px; font-size: 13px; color: rgb(199, 37, 78); background-color: rgb(249, 242, 244); border-radius: 4px; font-family: Monaco, Menlo, Consolas, Courier New, monospace; margin: 0px !important; background-image: none !important; background-position: initial !important; background-size: initial !important; background-repeat: initial !important; background-attachment: initial !important; background-origin: initial !important; background-clip: initial !important; border: 0px !important; inset: auto !important; float: none !important; line-height: 1.5em !important; outline: 0px !important; overflow: visible !important; position: static !important; vertical-align: baseline !important; width: auto !important; box-sizing: content-box !important; min-height: auto !important;">UserChild.component.html</code><code class="php plain" style="padding: 2px 4px; font-size: 13px; color: rgb(199, 37, 78); background-color: rgb(249, 242, 244); border-radius: 4px; font-family: Monaco, Menlo, Consolas, Courier New, monospace; margin: 0px !important; background-image: none !important; background-position: initial !important; background-size: initial !important; background-repeat: initial !important; background-attachment: initial !important; background-origin: initial !important; background-clip: initial !important; border: 0px !important; inset: auto !important; float: none !important; line-height: 1.5em !important; outline: 0px !important; overflow: visible !important; position: static !important; vertical-align: baseline !important; width: auto !important; box-sizing: content-box !important; min-height: auto !important;">,</code></p><p class="line number4 index3 alt1" style="margin-top: 15px; margin-bottom: 15px; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); line-height: 1.5em; border-radius: 8px; font-size: 16px; color: rgb(61, 70, 77); box-sizing: border-box; padding-right: 1em !important; padding-left: 1em !important; border-left: 3px solid rgb(67, 90, 95) !important; white-space: pre-wrap !important;"><code class="php spaces" style="padding: 2px 4px; font-size: 13px; color: rgb(199, 37, 78); background-color: rgb(249, 242, 244); border-radius: 4px; font-family: Monaco, Menlo, Consolas, Courier New, monospace; margin: 0px !important; background-image: none !important; background-position: initial !important; background-size: initial !important; background-repeat: initial !important; background-attachment: initial !important; background-origin: initial !important; background-clip: initial !important; border: 0px !important; inset: auto !important; float: none !important; line-height: 1.5em !important; outline: 0px !important; overflow: visible !important; position: static !important; vertical-align: baseline !important; width: auto !important; box-sizing: content-box !important; min-height: auto !important;"> </code><code class="php plain" style="padding: 2px 4px; font-size: 13px; color: rgb(199, 37, 78); background-color: rgb(249, 242, 244); border-radius: 4px; font-family: Monaco, Menlo, Consolas, Courier New, monospace; margin: 0px !important; background-image: none !important; background-position: initial !important; background-size: initial !important; background-repeat: initial !important; background-attachment: initial !important; background-origin: initial !important; background-clip: initial !important; border: 0px !important; inset: auto !important; float: none !important; line-height: 1.5em !important; outline: 0px !important; overflow: visible !important; position: static !important; vertical-align: baseline !important; width: auto !important; box-sizing: content-box !important; min-height: auto !important;">styles: [`</code></p><p class="line number5 index4 alt2" style="margin-top: 15px; margin-bottom: 15px; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); line-height: 1.5em; border-radius: 8px; font-size: 16px; color: rgb(61, 70, 77); box-sizing: border-box; padding-right: 1em !important; padding-left: 1em !important; border-left: 3px solid rgb(67, 90, 95) !important; white-space: pre-wrap !important;"><code class="php spaces" style="padding: 2px 4px; font-size: 13px; color: rgb(199, 37, 78); background-color: rgb(249, 242, 244); border-radius: 4px; font-family: Monaco, Menlo, Consolas, Courier New, monospace; margin: 0px !important; background-image: none !important; background-position: initial !important; background-size: initial !important; background-repeat: initial !important; background-attachment: initial !important; background-origin: initial !important; background-clip: initial !important; border: 0px !important; inset: auto !important; float: none !important; line-height: 1.5em !important; outline: 0px !important; overflow: visible !important; position: static !important; vertical-align: baseline !important; width: auto !important; box-sizing: content-box !important; min-height: auto !important;"> </code><code class="php plain" style="padding: 2px 4px; font-size: 13px; color: rgb(199, 37, 78); background-color: rgb(249, 242, 244); border-radius: 4px; font-family: Monaco, Menlo, Consolas, Courier New, monospace; margin: 0px !important; background-image: none !important; background-position: initial !important; background-size: initial !important; background-repeat: initial !important; background-attachment: initial !important; background-origin: initial !important; background-clip: initial !important; border: 0px !important; inset: auto !important; float: none !important; line-height: 1.5em !important; outline: 0px !important; overflow: visible !important; position: static !important; vertical-align: baseline !important; width: auto !important; box-sizing: content-box !important; min-height: auto !important;">h3{</code></p><p class="line number6 index5 alt1" style="margin-top: 15px; margin-bottom: 15px; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); line-height: 1.5em; border-radius: 8px; font-size: 16px; color: rgb(61, 70, 77); box-sizing: border-box; padding-right: 1em !important; padding-left: 1em !important; border-left: 3px solid rgb(67, 90, 95) !important; white-space: pre-wrap !important;"><code class="php spaces" style="padding: 2px 4px; font-size: 13px; color: rgb(199, 37, 78); background-color: rgb(249, 242, 244); border-radius: 4px; font-family: Monaco, Menlo, Consolas, Courier New, monospace; margin: 0px !important; background-image: none !important; background-position: initial !important; background-size: initial !important; background-repeat: initial !important; background-attachment: initial !important; background-origin: initial !important; background-clip: initial !important; border: 0px !important; inset: auto !important; float: none !important; line-height: 1.5em !important; outline: 0px !important; overflow: visible !important; position: static !important; vertical-align: baseline !important; width: auto !important; box-sizing: content-box !important; min-height: auto !important;"> </code><code class="php plain" style="padding: 2px 4px; font-size: 13px; color: rgb(199, 37, 78); background-color: rgb(249, 242, 244); border-radius: 4px; font-family: Monaco, Menlo, Consolas, Courier New, monospace; margin: 0px !important; background-image: none !important; background-position: initial !important; background-size: initial !important; background-repeat: initial !important; background-attachment: initial !important; background-origin: initial !important; background-clip: initial !important; border: 0px !important; inset: auto !important; float: none !important; line-height: 1.5em !important; outline: 0px !important; overflow: visible !important; position: static !important; vertical-align: baseline !important; width: auto !important; box-sizing: content-box !important; min-height: auto !important;">color: red;</code></p><p class="line number7 index6 alt2" style="margin-top: 15px; margin-bottom: 15px; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); line-height: 1.5em; border-radius: 8px; font-size: 16px; color: rgb(61, 70, 77); box-sizing: border-box; padding-right: 1em !important; padding-left: 1em !important; border-left: 3px solid rgb(67, 90, 95) !important; white-space: pre-wrap !important;"><code class="php spaces" style="padding: 2px 4px; font-size: 13px; color: rgb(199, 37, 78); background-color: rgb(249, 242, 244); border-radius: 4px; font-family: Monaco, Menlo, Consolas, Courier New, monospace; margin: 0px !important; background-image: none !important; background-position: initial !important; background-size: initial !important; background-repeat: initial !important; background-attachment: initial !important; background-origin: initial !important; background-clip: initial !important; border: 0px !important; inset: auto !important; float: none !important; line-height: 1.5em !important; outline: 0px !important; overflow: visible !important; position: static !important; vertical-align: baseline !important; width: auto !important; box-sizing: content-box !important; min-height: auto !important;"> </code><code class="php plain" style="padding: 2px 4px; font-size: 13px; color: rgb(199, 37, 78); background-color: rgb(249, 242, 244); border-radius: 4px; font-family: Monaco, Menlo, Consolas, Courier New, monospace; margin: 0px !important; background-image: none !important; background-position: initial !important; background-size: initial !important; background-repeat: initial !important; background-attachment: initial !important; background-origin: initial !important; background-clip: initial !important; border: 0px !important; inset: auto !important; float: none !important; line-height: 1.5em !important; outline: 0px !important; overflow: visible !important; position: static !important; vertical-align: baseline !important; width: auto !important; box-sizing: content-box !important; min-height: auto !important;">}</code></p><p class="line number8 index7 alt1" style="margin-top: 15px; margin-bottom: 15px; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); line-height: 1.5em; border-radius: 8px; font-size: 16px; color: rgb(61, 70, 77); box-sizing: border-box; padding-right: 1em !important; padding-left: 1em !important; border-left: 3px solid rgb(67, 90, 95) !important; white-space: pre-wrap !important;"><code class="php spaces" style="padding: 2px 4px; font-size: 13px; color: rgb(199, 37, 78); background-color: rgb(249, 242, 244); border-radius: 4px; font-family: Monaco, Menlo, Consolas, Courier New, monospace; margin: 0px !important; background-image: none !important; background-position: initial !important; background-size: initial !important; background-repeat: initial !important; background-attachment: initial !important; background-origin: initial !important; background-clip: initial !important; border: 0px !important; inset: auto !important; float: none !important; line-height: 1.5em !important; outline: 0px !important; overflow: visible !important; position: static !important; vertical-align: baseline !important; width: auto !important; box-sizing: content-box !important; min-height: auto !important;"> </code><code class="php plain" style="padding: 2px 4px; font-size: 13px; color: rgb(199, 37, 78); background-color: rgb(249, 242, 244); border-radius: 4px; font-family: Monaco, Menlo, Consolas, Courier New, monospace; margin: 0px !important; background-image: none !important; background-position: initial !important; background-size: initial !important; background-repeat: initial !important; background-attachment: initial !important; background-origin: initial !important; background-clip: initial !important; border: 0px !important; inset: auto !important; float: none !important; line-height: 1.5em !important; outline: 0px !important; overflow: visible !important; position: static !important; vertical-align: baseline !important; width: auto !important; box-sizing: content-box !important; min-height: auto !important;">`],</code></p><p class="line number9 index8 alt2" style="margin-top: 15px; margin-bottom: 15px; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); line-height: 1.5em; border-radius: 8px; font-size: 16px; color: rgb(61, 70, 77); box-sizing: border-box; padding-right: 1em !important; padding-left: 1em !important; border-left: 3px solid rgb(67, 90, 95) !important; white-space: pre-wrap !important;"><code class="php spaces" style="padding: 2px 4px; font-size: 13px; color: rgb(199, 37, 78); background-color: rgb(249, 242, 244); border-radius: 4px; font-family: Monaco, Menlo, Consolas, Courier New, monospace; margin: 0px !important; background-image: none !important; background-position: initial !important; background-size: initial !important; background-repeat: initial !important; background-attachment: initial !important; background-origin: initial !important; background-clip: initial !important; border: 0px !important; inset: auto !important; float: none !important; line-height: 1.5em !important; outline: 0px !important; overflow: visible !important; position: static !important; vertical-align: baseline !important; width: auto !important; box-sizing: content-box !important; min-height: auto !important;"> </code><code class="php plain" style="padding: 2px 4px; font-size: 13px; color: rgb(199, 37, 78); background-color: rgb(249, 242, 244); border-radius: 4px; font-family: Monaco, Menlo, Consolas, Courier New, monospace; margin: 0px !important; background-image: none !important; background-position: initial !important; background-size: initial !important; background-repeat: initial !important; background-attachment: initial !important; background-origin: initial !important; background-clip: initial !important; border: 0px !important; inset: auto !important; float: none !important; line-height: 1.5em !important; outline: 0px !important; overflow: visible !important; position: static !important; vertical-align: baseline !important; width: auto !important; box-sizing: content-box !important; min-height: auto !important;">encapsulation: ViewEncapsulation.ShadowDom</code></p><p class="line number10 index9 alt1" style="margin-top: 15px; margin-bottom: 15px; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); line-height: 1.5em; border-radius: 8px; font-size: 16px; color: rgb(61, 70, 77); box-sizing: border-box; padding-right: 1em !important; padding-left: 1em !important; border-left: 3px solid rgb(67, 90, 95) !important; white-space: pre-wrap !important;"><code class="php plain" style="padding: 2px 4px; font-size: 13px; color: rgb(199, 37, 78); background-color: rgb(249, 242, 244); border-radius: 4px; font-family: Monaco, Menlo, Consolas, Courier New, monospace; margin: 0px !important; background-image: none !important; background-position: initial !important; background-size: initial !important; background-repeat: initial !important; background-attachment: initial !important; background-origin: initial !important; background-clip: initial !important; border: 0px !important; inset: auto !important; float: none !important; line-height: 1.5em !important; outline: 0px !important; overflow: visible !important; position: static !important; vertical-align: baseline !important; width: auto !important; box-sizing: content-box !important; min-height: auto !important;">})</code></p><p class="line number11 index10 alt2" style="margin-top: 15px; margin-bottom: 15px; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); line-height: 1.5em; border-radius: 8px; font-size: 16px; color: rgb(61, 70, 77); box-sizing: border-box; padding-right: 1em !important; padding-left: 1em !important; border-left: 3px solid rgb(67, 90, 95) !important; white-space: pre-wrap !important;"> </p><p class="line number12 index11 alt1" style="margin-top: 15px; margin-bottom: 15px; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); line-height: 1.5em; border-radius: 8px; font-size: 16px; color: rgb(61, 70, 77); box-sizing: border-box; padding-right: 1em !important; padding-left: 1em !important; border-left: 3px solid rgb(67, 90, 95) !important; white-space: pre-wrap !important;"><code class="php plain" style="padding: 2px 4px; font-size: 13px; color: rgb(199, 37, 78); background-color: rgb(249, 242, 244); border-radius: 4px; font-family: Monaco, Menlo, Consolas, Courier New, monospace; margin: 0px !important; background-image: none !important; background-position: initial !important; background-size: initial !important; background-repeat: initial !important; background-attachment: initial !important; background-origin: initial !important; background-clip: initial !important; border: 0px !important; inset: auto !important; float: none !important; line-height: 1.5em !important; outline: 0px !important; overflow: visible !important; position: static !important; vertical-align: baseline !important; width: auto !important; box-sizing: content-box !important; min-height: auto !important;">export </code><code class="php keyword" style="padding: 2px 4px; font-size: 13px; color: rgb(199, 37, 78); background-color: rgb(249, 242, 244); border-radius: 4px; font-family: Monaco, Menlo, Consolas, Courier New, monospace; margin: 0px !important; background-image: none !important; background-position: initial !important; background-size: initial !important; background-repeat: initial !important; background-attachment: initial !important; background-origin: initial !important; background-clip: initial !important; border: 0px !important; inset: auto !important; float: none !important; line-height: 1.5em !important; outline: 0px !important; overflow: visible !important; position: static !important; vertical-align: baseline !important; width: auto !important; box-sizing: content-box !important; font-weight: bold !important; min-height: auto !important;">class</code> <code class="php plain" style="padding: 2px 4px; font-size: 13px; color: rgb(199, 37, 78); background-color: rgb(249, 242, 244); border-radius: 4px; font-family: Monaco, Menlo, Consolas, Courier New, monospace; margin: 0px !important; background-image: none !important; background-position: initial !important; background-size: initial !important; background-repeat: initial !important; background-attachment: initial !important; background-origin: initial !important; background-clip: initial !important; border: 0px !important; inset: auto !important; float: none !important; line-height: 1.5em !important; outline: 0px !important; overflow: visible !important; position: static !important; vertical-align: baseline !important; width: auto !important; box-sizing: content-box !important; min-height: auto !important;">UserChildComponent </code><code class="php keyword" style="padding: 2px 4px; font-size: 13px; color: rgb(199, 37, 78); background-color: rgb(249, 242, 244); border-radius: 4px; font-family: Monaco, Menlo, Consolas, Courier New, monospace; margin: 0px !important; background-image: none !important; background-position: initial !important; background-size: initial !important; background-repeat: initial !important; background-attachment: initial !important; background-origin: initial !important; background-clip: initial !important; border: 0px !important; inset: auto !important; float: none !important; line-height: 1.5em !important; outline: 0px !important; overflow: visible !important; position: static !important; vertical-align: baseline !important; width: auto !important; box-sizing: content-box !important; font-weight: bold !important; min-height: auto !important;">implements</code> <code class="php plain" style="padding: 2px 4px; font-size: 13px; color: rgb(199, 37, 78); background-color: rgb(249, 242, 244); border-radius: 4px; font-family: Monaco, Menlo, Consolas, Courier New, monospace; margin: 0px !important; background-image: none !important; background-position: initial !important; background-size: initial !important; background-repeat: initial !important; background-attachment: initial !important; background-origin: initial !important; background-clip: initial !important; border: 0px !important; inset: auto !important; float: none !important; line-height: 1.5em !important; outline: 0px !important; overflow: visible !important; position: static !important; vertical-align: baseline !important; width: auto !important; box-sizing: content-box !important; min-height: auto !important;">OnInit {</code></p><p class="line number13 index12 alt2" style="margin-top: 15px; margin-bottom: 15px; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); line-height: 1.5em; border-radius: 8px; font-size: 16px; color: rgb(61, 70, 77); box-sizing: border-box; padding-right: 1em !important; padding-left: 1em !important; border-left: 3px solid rgb(67, 90, 95) !important; white-space: pre-wrap !important;"><code class="php spaces" style="padding: 2px 4px; font-size: 13px; color: rgb(199, 37, 78); background-color: rgb(249, 242, 244); border-radius: 4px; font-family: Monaco, Menlo, Consolas, Courier New, monospace; margin: 0px !important; background-image: none !important; background-position: initial !important; background-size: initial !important; background-repeat: initial !important; background-attachment: initial !important; background-origin: initial !important; background-clip: initial !important; border: 0px !important; inset: auto !important; float: none !important; line-height: 1.5em !important; outline: 0px !important; overflow: visible !important; position: static !important; vertical-align: baseline !important; width: auto !important; box-sizing: content-box !important; min-height: auto !important;"> </code><code class="php plain" style="padding: 2px 4px; font-size: 13px; color: rgb(199, 37, 78); background-color: rgb(249, 242, 244); border-radius: 4px; font-family: Monaco, Menlo, Consolas, Courier New, monospace; margin: 0px !important; background-image: none !important; background-position: initial !important; background-size: initial !important; background-repeat: initial !important; background-attachment: initial !important; background-origin: initial !important; background-clip: initial !important; border: 0px !important; inset: auto !important; float: none !important; line-height: 1.5em !important; outline: 0px !important; overflow: visible !important; position: static !important; vertical-align: baseline !important; width: auto !important; box-sizing: content-box !important; min-height: auto !important;">......</code></p><p class="line number14 index13 alt1" style="margin-top: 15px; margin-bottom: 15px; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); line-height: 1.5em; border-radius: 8px; font-size: 16px; color: rgb(61, 70, 77); box-sizing: border-box; padding-right: 1em !important; padding-left: 1em !important; border-left: 3px solid rgb(67, 90, 95) !important; white-space: pre-wrap !important;"><code class="php plain" style="padding: 2px 4px; font-size: 13px; color: rgb(199, 37, 78); background-color: rgb(249, 242, 244); border-radius: 4px; font-family: Monaco, Menlo, Consolas, Courier New, monospace; margin: 0px !important; background-image: none !important; background-position: initial !important; background-size: initial !important; background-repeat: initial !important; background-attachment: initial !important; background-origin: initial !important; background-clip: initial !important; border: 0px !important; inset: auto !important; float: none !important; line-height: 1.5em !important; outline: 0px !important; overflow: visible !important; position: static !important; vertical-align: baseline !important; width: auto !important; box-sizing: content-box !important; min-height: auto !important;">}</code></p></td></tr></tbody></table><p style="margin-top: 15px; margin-bottom: 15px; padding: 0px 0px 0px 10px; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); color: rgb(61, 70, 77); box-sizing: border-box; border-radius: 8px; font-family: Helvetica Neue, Helvetica, PingFang SC, 微软雅黑, Tahoma, Arial, sans-serif; white-space: normal; background-color: rgb(255, 255, 255);"></p><p style="margin-top: 15px; margin-bottom: 15px; padding: 0px 0px 0px 10px; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); color: rgb(61, 70, 77); box-sizing: border-box; border-radius: 8px; font-family: Helvetica Neue, Helvetica, PingFang SC, 微软雅黑, Tahoma, Arial, sans-serif; white-space: normal; background-color: rgb(255, 255, 255);">从运行的页面上看到，user-child组件内部被封装成了一个ShadowDOM，style也被封装在了里面，并不会对外部的样式造成影响。</p><h3 data-id="heading-4" style="margin: 0px; padding: 0px; font-weight: 400; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); font-family: Helvetica Neue, Helvetica, PingFang SC, 微软雅黑, Tahoma, Arial, sans-serif; white-space: normal; background-color: rgb(255, 255, 255);"><strong style="margin: 0px; padding: 0px;">ViewEncapsulation.Emulated</strong></h3><p style="margin-top: 15px; margin-bottom: 15px; padding: 0px 0px 0px 10px; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); color: rgb(61, 70, 77); box-sizing: border-box; border-radius: 8px; font-family: Helvetica Neue, Helvetica, PingFang SC, 微软雅黑, Tahoma, Arial, sans-serif; white-space: normal; background-color: rgb(255, 255, 255);">Angular 会修改组件的 CSS 选择器，使它们只应用于组件的视图，不影响应用程序中的其他元素（模拟 Shadow DOM 行为）。</p><p style="margin-top: 15px; margin-bottom: 15px; padding: 0px 0px 0px 10px; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); color: rgb(61, 70, 77); box-sizing: border-box; border-radius: 8px; font-family: Helvetica Neue, Helvetica, PingFang SC, 微软雅黑, Tahoma, Arial, sans-serif; white-space: normal; background-color: rgb(255, 255, 255);">使用模拟视图封装时，Angular 会预处理所有组件的样式，以便它们仅应用于组件的视图。在正运行的 Angular 应用程序的 DOM 中，使用模拟视图封装模式的组件所在的元素附加了一些额外的属性：</p><table class="wcn_c_table" cellpadding="0" cellspacing="0" width="760"><tbody style="margin: 0px !important; padding: 0px !important; border-radius: 0px !important; background: none !important; border: 0px !important; inset: auto !important; float: none !important; line-height: 1.1em !important; outline: 0px !important; overflow: visible !important; position: static !important; vertical-align: baseline !important; width: auto !important; box-sizing: content-box !important; min-height: auto !important;"><tr style="margin: 0px !important; padding: 0px !important; border-radius: 0px !important; background: none !important; border: 0px !important; inset: auto !important; float: none !important; line-height: 1.1em !important; outline: 0px !important; overflow: visible !important; position: static !important; vertical-align: baseline !important; width: auto !important; box-sizing: content-box !important; min-height: auto !important;" class="firstRow"><td class="gutter" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); margin: 0px !important; border-radius: 4px 0px 0px 4px !important; background: none !important; inset: auto !important; float: none !important; line-height: 1.1em !important; outline: 0px !important; overflow: visible !important; position: static !important; vertical-align: baseline !important; box-sizing: content-box !important; min-height: auto !important; color: rgb(175, 175, 175) !important; user-select: none !important;" width="NaN"><p class="line number1 index0 alt2" style="margin-top: 15px; margin-bottom: 15px; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); line-height: 1.5em; border-radius: 8px; font-size: 16px; color: rgb(61, 70, 77); box-sizing: border-box; padding-right: 0.5em !important; padding-left: 1em !important; border-left: 3px solid rgb(67, 90, 95) !important; white-space: pre-wrap !important; text-align: right !important;">1</p><p class="line number2 index1 alt1" style="margin-top: 15px; margin-bottom: 15px; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); line-height: 1.5em; border-radius: 8px; font-size: 16px; color: rgb(61, 70, 77); box-sizing: border-box; padding-right: 0.5em !important; padding-left: 1em !important; border-left: 3px solid rgb(67, 90, 95) !important; white-space: pre-wrap !important; text-align: right !important;">2</p><p class="line number3 index2 alt2" style="margin-top: 15px; margin-bottom: 15px; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); line-height: 1.5em; border-radius: 8px; font-size: 16px; color: rgb(61, 70, 77); box-sizing: border-box; padding-right: 0.5em !important; padding-left: 1em !important; border-left: 3px solid rgb(67, 90, 95) !important; white-space: pre-wrap !important; text-align: right !important;">3</p><p class="line number4 index3 alt1" style="margin-top: 15px; margin-bottom: 15px; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); line-height: 1.5em; border-radius: 8px; font-size: 16px; color: rgb(61, 70, 77); box-sizing: border-box; padding-right: 0.5em !important; padding-left: 1em !important; border-left: 3px solid rgb(67, 90, 95) !important; white-space: pre-wrap !important; text-align: right !important;">4</p><p class="line number5 index4 alt2" style="margin-top: 15px; margin-bottom: 15px; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); line-height: 1.5em; border-radius: 8px; font-size: 16px; color: rgb(61, 70, 77); box-sizing: border-box; padding-right: 0.5em !important; padding-left: 1em !important; border-left: 3px solid rgb(67, 90, 95) !important; white-space: pre-wrap !important; text-align: right !important;">5</p><p class="line number6 index5 alt1" style="margin-top: 15px; margin-bottom: 15px; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); line-height: 1.5em; border-radius: 8px; font-size: 16px; color: rgb(61, 70, 77); box-sizing: border-box; padding-right: 0.5em !important; padding-left: 1em !important; border-left: 3px solid rgb(67, 90, 95) !important; white-space: pre-wrap !important; text-align: right !important;">6</p></td><td class="code" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); word-break: break-all; margin: 0px !important; border-radius: 0px !important; background: none !important; inset: auto !important; float: none !important; line-height: 1.1em !important; outline: 0px !important; overflow: visible !important; position: static !important; vertical-align: baseline !important; box-sizing: content-box !important; min-height: auto !important;" width="719"><p class="line number1 index0 alt2" style="margin-top: 15px; margin-bottom: 15px; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); line-height: 1.5em; border-radius: 8px; font-size: 16px; color: rgb(61, 70, 77); box-sizing: border-box; padding-right: 1em !important; padding-left: 1em !important; border-left: 3px solid rgb(67, 90, 95) !important; white-space: pre-wrap !important;"><code class="php plain" style="padding: 2px 4px; font-size: 13px; color: rgb(199, 37, 78); background-color: rgb(249, 242, 244); border-radius: 4px; font-family: Monaco, Menlo, Consolas, Courier New, monospace; margin: 0px !important; background-image: none !important; background-position: initial !important; background-size: initial !important; background-repeat: initial !important; background-attachment: initial !important; background-origin: initial !important; background-clip: initial !important; border: 0px !important; inset: auto !important; float: none !important; line-height: 1.5em !important; outline: 0px !important; overflow: visible !important; position: static !important; vertical-align: baseline !important; width: auto !important; box-sizing: content-box !important; min-height: auto !important;"><hero-details _nghost-pmm-5></code></p><p class="line number2 index1 alt1" style="margin-top: 15px; margin-bottom: 15px; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); line-height: 1.5em; border-radius: 8px; font-size: 16px; color: rgb(61, 70, 77); box-sizing: border-box; padding-right: 1em !important; padding-left: 1em !important; border-left: 3px solid rgb(67, 90, 95) !important; white-space: pre-wrap !important;"><code class="php spaces" style="padding: 2px 4px; font-size: 13px; color: rgb(199, 37, 78); background-color: rgb(249, 242, 244); border-radius: 4px; font-family: Monaco, Menlo, Consolas, Courier New, monospace; margin: 0px !important; background-image: none !important; background-position: initial !important; background-size: initial !important; background-repeat: initial !important; background-attachment: initial !important; background-origin: initial !important; background-clip: initial !important; border: 0px !important; inset: auto !important; float: none !important; line-height: 1.5em !important; outline: 0px !important; overflow: visible !important; position: static !important; vertical-align: baseline !important; width: auto !important; box-sizing: content-box !important; min-height: auto !important;"> </code><code class="php plain" style="padding: 2px 4px; font-size: 13px; color: rgb(199, 37, 78); background-color: rgb(249, 242, 244); border-radius: 4px; font-family: Monaco, Menlo, Consolas, Courier New, monospace; margin: 0px !important; background-image: none !important; background-position: initial !important; background-size: initial !important; background-repeat: initial !important; background-attachment: initial !important; background-origin: initial !important; background-clip: initial !important; border: 0px !important; inset: auto !important; float: none !important; line-height: 1.5em !important; outline: 0px !important; overflow: visible !important; position: static !important; vertical-align: baseline !important; width: auto !important; box-sizing: content-box !important; min-height: auto !important;"><h3 _ngcontent-pmm-5>Mister Fantastic</h3></code></p><p class="line number3 index2 alt2" style="margin-top: 15px; margin-bottom: 15px; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); line-height: 1.5em; border-radius: 8px; font-size: 16px; color: rgb(61, 70, 77); box-sizing: border-box; padding-right: 1em !important; padding-left: 1em !important; border-left: 3px solid rgb(67, 90, 95) !important; white-space: pre-wrap !important;"><code class="php spaces" style="padding: 2px 4px; font-size: 13px; color: rgb(199, 37, 78); background-color: rgb(249, 242, 244); border-radius: 4px; font-family: Monaco, Menlo, Consolas, Courier New, monospace; margin: 0px !important; background-image: none !important; background-position: initial !important; background-size: initial !important; background-repeat: initial !important; background-attachment: initial !important; background-origin: initial !important; background-clip: initial !important; border: 0px !important; inset: auto !important; float: none !important; line-height: 1.5em !important; outline: 0px !important; overflow: visible !important; position: static !important; vertical-align: baseline !important; width: auto !important; box-sizing: content-box !important; min-height: auto !important;"> </code><code class="php plain" style="padding: 2px 4px; font-size: 13px; color: rgb(199, 37, 78); background-color: rgb(249, 242, 244); border-radius: 4px; font-family: Monaco, Menlo, Consolas, Courier New, monospace; margin: 0px !important; background-image: none !important; background-position: initial !important; background-size: initial !important; background-repeat: initial !important; background-attachment: initial !important; background-origin: initial !important; background-clip: initial !important; border: 0px !important; inset: auto !important; float: none !important; line-height: 1.5em !important; outline: 0px !important; overflow: visible !important; position: static !important; vertical-align: baseline !important; width: auto !important; box-sizing: content-box !important; min-height: auto !important;"><hero-team _ngcontent-pmm-5 _nghost-pmm-6></code></p><p class="line number4 index3 alt1" style="margin-top: 15px; margin-bottom: 15px; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); line-height: 1.5em; border-radius: 8px; font-size: 16px; color: rgb(61, 70, 77); box-sizing: border-box; padding-right: 1em !important; padding-left: 1em !important; border-left: 3px solid rgb(67, 90, 95) !important; white-space: pre-wrap !important;"><code class="php spaces" style="padding: 2px 4px; font-size: 13px; color: rgb(199, 37, 78); background-color: rgb(249, 242, 244); border-radius: 4px; font-family: Monaco, Menlo, Consolas, Courier New, monospace; margin: 0px !important; background-image: none !important; background-position: initial !important; background-size: initial !important; background-repeat: initial !important; background-attachment: initial !important; background-origin: initial !important; background-clip: initial !important; border: 0px !important; inset: auto !important; float: none !important; line-height: 1.5em !important; outline: 0px !important; overflow: visible !important; position: static !important; vertical-align: baseline !important; width: auto !important; box-sizing: content-box !important; min-height: auto !important;"> </code><code class="php plain" style="padding: 2px 4px; font-size: 13px; color: rgb(199, 37, 78); background-color: rgb(249, 242, 244); border-radius: 4px; font-family: Monaco, Menlo, Consolas, Courier New, monospace; margin: 0px !important; background-image: none !important; background-position: initial !important; background-size: initial !important; background-repeat: initial !important; background-attachment: initial !important; background-origin: initial !important; background-clip: initial !important; border: 0px !important; inset: auto !important; float: none !important; line-height: 1.5em !important; outline: 0px !important; overflow: visible !important; position: static !important; vertical-align: baseline !important; width: auto !important; box-sizing: content-box !important; min-height: auto !important;"><h4 _ngcontent-pmm-6>Team</h4></code></p><p class="line number5 index4 alt2" style="margin-top: 15px; margin-bottom: 15px; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); line-height: 1.5em; border-radius: 8px; font-size: 16px; color: rgb(61, 70, 77); box-sizing: border-box; padding-right: 1em !important; padding-left: 1em !important; border-left: 3px solid rgb(67, 90, 95) !important; white-space: pre-wrap !important;"><code class="php spaces" style="padding: 2px 4px; font-size: 13px; color: rgb(199, 37, 78); background-color: rgb(249, 242, 244); border-radius: 4px; font-family: Monaco, Menlo, Consolas, Courier New, monospace; margin: 0px !important; background-image: none !important; background-position: initial !important; background-size: initial !important; background-repeat: initial !important; background-attachment: initial !important; background-origin: initial !important; background-clip: initial !important; border: 0px !important; inset: auto !important; float: none !important; line-height: 1.5em !important; outline: 0px !important; overflow: visible !important; position: static !important; vertical-align: baseline !important; width: auto !important; box-sizing: content-box !important; min-height: auto !important;"> </code><code class="php plain" style="padding: 2px 4px; font-size: 13px; color: rgb(199, 37, 78); background-color: rgb(249, 242, 244); border-radius: 4px; font-family: Monaco, Menlo, Consolas, Courier New, monospace; margin: 0px !important; background-image: none !important; background-position: initial !important; background-size: initial !important; background-repeat: initial !important; background-attachment: initial !important; background-origin: initial !important; background-clip: initial !important; border: 0px !important; inset: auto !important; float: none !important; line-height: 1.5em !important; outline: 0px !important; overflow: visible !important; position: static !important; vertical-align: baseline !important; width: auto !important; box-sizing: content-box !important; min-height: auto !important;"></hero-team></code></p><p class="line number6 index5 alt1" style="margin-top: 15px; margin-bottom: 15px; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); line-height: 1.5em; border-radius: 8px; font-size: 16px; color: rgb(61, 70, 77); box-sizing: border-box; padding-right: 1em !important; padding-left: 1em !important; border-left: 3px solid rgb(67, 90, 95) !important; white-space: pre-wrap !important;"><code class="php plain" style="padding: 2px 4px; font-size: 13px; color: rgb(199, 37, 78); background-color: rgb(249, 242, 244); border-radius: 4px; font-family: Monaco, Menlo, Consolas, Courier New, monospace; margin: 0px !important; background-image: none !important; background-position: initial !important; background-size: initial !important; background-repeat: initial !important; background-attachment: initial !important; background-origin: initial !important; background-clip: initial !important; border: 0px !important; inset: auto !important; float: none !important; line-height: 1.5em !important; outline: 0px !important; overflow: visible !important; position: static !important; vertical-align: baseline !important; width: auto !important; box-sizing: content-box !important; min-height: auto !important;"></hero-details></code></p></td></tr></tbody></table><p style="margin-top: 15px; margin-bottom: 15px; padding: 0px 0px 0px 10px; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); color: rgb(61, 70, 77); box-sizing: border-box; border-radius: 8px; font-family: Helvetica Neue, Helvetica, PingFang SC, 微软雅黑, Tahoma, Arial, sans-serif; white-space: normal; background-color: rgb(255, 255, 255);">有两种这样的属性：</p><table class="wcn_c_table" ><thead style="margin: 0px; padding: 0px;"><tr class="firstRow" style="margin: 0px; padding: 0px;"><th style="margin: 0px; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); border-top-width: 1px; border-top-color: rgb(221, 221, 221); background-color: rgb(233, 236, 239);"><strong style="margin: 0px; padding: 0px;">属性</strong></th><th style="margin: 0px; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); border-top-width: 1px; border-top-color: rgb(221, 221, 221); background-color: rgb(233, 236, 239);"><strong style="margin: 0px; padding: 0px;">详情</strong></th></tr></thead><tbody style="margin: 0px; padding: 0px;"><tr style="margin: 0px; padding: 0px;"><td style="margin: 0px; -webkit-tap-highlight-color: rgba(0, 0, 0, 0);">_nghost</td><td style="margin: 0px; -webkit-tap-highlight-color: rgba(0, 0, 0, 0);"><strong style="margin: 0px; padding: 0px;">被添加到包裹组件视图的元素中</strong>，这将是本机 Shadow DOM 封装中的 ShadowRoots。<strong style="margin: 0px; padding: 0px;">组件的宿主元素通常就是这种情况</strong>。</td></tr><tr style="margin: 0px; padding: 0px;"><td style="margin: 0px; -webkit-tap-highlight-color: rgba(0, 0, 0, 0);">_ngcontent</td><td style="margin: 0px; -webkit-tap-highlight-color: rgba(0, 0, 0, 0);"><strong style="margin: 0px; padding: 0px;">被添加到组件视图中的子元素上</strong>，这些属性用于将元素与其各自模拟的 ShadowRoots（具有匹配 _nghost 属性的宿主元素）相匹配。</td></tr></tbody></table><p style="margin-top: 15px; margin-bottom: 15px; padding: 0px 0px 0px 10px; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); color: rgb(61, 70, 77); box-sizing: border-box; border-radius: 8px; font-family: Helvetica Neue, Helvetica, PingFang SC, 微软雅黑, Tahoma, Arial, sans-serif; white-space: normal; background-color: rgb(255, 255, 255);">这些属性的确切值是 Angular 的私有实现细节。它们是自动生成的，你不应在应用程序代码中引用它们。</p><p style="margin-top: 15px; margin-bottom: 15px; padding: 0px 0px 0px 10px; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); color: rgb(61, 70, 77); box-sizing: border-box; border-radius: 8px; font-family: Helvetica Neue, Helvetica, PingFang SC, 微软雅黑, Tahoma, Arial, sans-serif; white-space: normal; background-color: rgb(255, 255, 255);">它们以生成的组件样式为目标，这些样式会被注入到 DOM 的 部分：</p><table class="wcn_c_table" cellpadding="0" cellspacing="0" width="760"><tbody style="margin: 0px !important; padding: 0px !important; border-radius: 0px !important; background: none !important; border: 0px !important; inset: auto !important; float: none !important; line-height: 1.1em !important; outline: 0px !important; overflow: visible !important; position: static !important; vertical-align: baseline !important; width: auto !important; box-sizing: content-box !important; min-height: auto !important;"><tr style="margin: 0px !important; padding: 0px !important; border-radius: 0px !important; background: none !important; border: 0px !important; inset: auto !important; float: none !important; line-height: 1.1em !important; outline: 0px !important; overflow: visible !important; position: static !important; vertical-align: baseline !important; width: auto !important; box-sizing: content-box !important; min-height: auto !important;" class="firstRow"><td class="gutter" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); margin: 0px !important; border-radius: 4px 0px 0px 4px !important; background: none !important; inset: auto !important; float: none !important; line-height: 1.1em !important; outline: 0px !important; overflow: visible !important; position: static !important; vertical-align: baseline !important; box-sizing: content-box !important; min-height: auto !important; color: rgb(175, 175, 175) !important; user-select: none !important;" width="NaN"><p class="line number1 index0 alt2" style="margin-top: 15px; margin-bottom: 15px; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); line-height: 1.5em; border-radius: 8px; font-size: 16px; color: rgb(61, 70, 77); box-sizing: border-box; padding-right: 0.5em !important; padding-left: 1em !important; border-left: 3px solid rgb(67, 90, 95) !important; white-space: pre-wrap !important; text-align: right !important;">1</p><p class="line number2 index1 alt1" style="margin-top: 15px; margin-bottom: 15px; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); line-height: 1.5em; border-radius: 8px; font-size: 16px; color: rgb(61, 70, 77); box-sizing: border-box; padding-right: 0.5em !important; padding-left: 1em !important; border-left: 3px solid rgb(67, 90, 95) !important; white-space: pre-wrap !important; text-align: right !important;">2</p><p class="line number3 index2 alt2" style="margin-top: 15px; margin-bottom: 15px; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); line-height: 1.5em; border-radius: 8px; font-size: 16px; color: rgb(61, 70, 77); box-sizing: border-box; padding-right: 0.5em !important; padding-left: 1em !important; border-left: 3px solid rgb(67, 90, 95) !important; white-space: pre-wrap !important; text-align: right !important;">3</p><p class="line number4 index3 alt1" style="margin-top: 15px; margin-bottom: 15px; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); line-height: 1.5em; border-radius: 8px; font-size: 16px; color: rgb(61, 70, 77); box-sizing: border-box; padding-right: 0.5em !important; padding-left: 1em !important; border-left: 3px solid rgb(67, 90, 95) !important; white-space: pre-wrap !important; text-align: right !important;">4</p><p class="line number5 index4 alt2" style="margin-top: 15px; margin-bottom: 15px; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); line-height: 1.5em; border-radius: 8px; font-size: 16px; color: rgb(61, 70, 77); box-sizing: border-box; padding-right: 0.5em !important; padding-left: 1em !important; border-left: 3px solid rgb(67, 90, 95) !important; white-space: pre-wrap !important; text-align: right !important;">5</p><p class="line number6 index5 alt1" style="margin-top: 15px; margin-bottom: 15px; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); line-height: 1.5em; border-radius: 8px; font-size: 16px; color: rgb(61, 70, 77); box-sizing: border-box; padding-right: 0.5em !important; padding-left: 1em !important; border-left: 3px solid rgb(67, 90, 95) !important; white-space: pre-wrap !important; text-align: right !important;">6</p><p class="line number7 index6 alt2" style="margin-top: 15px; margin-bottom: 15px; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); line-height: 1.5em; border-radius: 8px; font-size: 16px; color: rgb(61, 70, 77); box-sizing: border-box; padding-right: 0.5em !important; padding-left: 1em !important; border-left: 3px solid rgb(67, 90, 95) !important; white-space: pre-wrap !important; text-align: right !important;">7</p><p class="line number8 index7 alt1" style="margin-top: 15px; margin-bottom: 15px; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); line-height: 1.5em; border-radius: 8px; font-size: 16px; color: rgb(61, 70, 77); box-sizing: border-box; padding-right: 0.5em !important; padding-left: 1em !important; border-left: 3px solid rgb(67, 90, 95) !important; white-space: pre-wrap !important; text-align: right !important;">8</p><p class="line number9 index8 alt2" style="margin-top: 15px; margin-bottom: 15px; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); line-height: 1.5em; border-radius: 8px; font-size: 16px; color: rgb(61, 70, 77); box-sizing: border-box; padding-right: 0.5em !important; padding-left: 1em !important; border-left: 3px solid rgb(67, 90, 95) !important; white-space: pre-wrap !important; text-align: right !important;">9</p></td><td class="code" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); word-break: break-all; margin: 0px !important; border-radius: 0px !important; background: none !important; inset: auto !important; float: none !important; line-height: 1.1em !important; outline: 0px !important; overflow: visible !important; position: static !important; vertical-align: baseline !important; box-sizing: content-box !important; min-height: auto !important;" width="719"><p class="line number1 index0 alt2" style="margin-top: 15px; margin-bottom: 15px; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); line-height: 1.5em; border-radius: 8px; font-size: 16px; color: rgb(61, 70, 77); box-sizing: border-box; padding-right: 1em !important; padding-left: 1em !important; border-left: 3px solid rgb(67, 90, 95) !important; white-space: pre-wrap !important;"><code class="php plain" style="padding: 2px 4px; font-size: 13px; color: rgb(199, 37, 78); background-color: rgb(249, 242, 244); border-radius: 4px; font-family: Monaco, Menlo, Consolas, Courier New, monospace; margin: 0px !important; background-image: none !important; background-position: initial !important; background-size: initial !important; background-repeat: initial !important; background-attachment: initial !important; background-origin: initial !important; background-clip: initial !important; border: 0px !important; inset: auto !important; float: none !important; line-height: 1.5em !important; outline: 0px !important; overflow: visible !important; position: static !important; vertical-align: baseline !important; width: auto !important; box-sizing: content-box !important; min-height: auto !important;"> {</code></p><p class="line number2 index1 alt1" style="margin-top: 15px; margin-bottom: 15px; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); line-height: 1.5em; border-radius: 8px; font-size: 16px; color: rgb(61, 70, 77); box-sizing: border-box; padding-right: 1em !important; padding-left: 1em !important; border-left: 3px solid rgb(67, 90, 95) !important; white-space: pre-wrap !important;"><code class="php spaces" style="padding: 2px 4px; font-size: 13px; color: rgb(199, 37, 78); background-color: rgb(249, 242, 244); border-radius: 4px; font-family: Monaco, Menlo, Consolas, Courier New, monospace; margin: 0px !important; background-image: none !important; background-position: initial !important; background-size: initial !important; background-repeat: initial !important; background-attachment: initial !important; background-origin: initial !important; background-clip: initial !important; border: 0px !important; inset: auto !important; float: none !important; line-height: 1.5em !important; outline: 0px !important; overflow: visible !important; position: static !important; vertical-align: baseline !important; width: auto !important; box-sizing: content-box !important; min-height: auto !important;"> </code><code class="php plain" style="padding: 2px 4px; font-size: 13px; color: rgb(199, 37, 78); background-color: rgb(249, 242, 244); border-radius: 4px; font-family: Monaco, Menlo, Consolas, Courier New, monospace; margin: 0px !important; background-image: none !important; background-position: initial !important; background-size: initial !important; background-repeat: initial !important; background-attachment: initial !important; background-origin: initial !important; background-clip: initial !important; border: 0px !important; inset: auto !important; float: none !important; line-height: 1.5em !important; outline: 0px !important; overflow: visible !important; position: static !important; vertical-align: baseline !important; width: auto !important; box-sizing: content-box !important; min-height: auto !important;">display: block;</code></p><p class="line number3 index2 alt2" style="margin-top: 15px; margin-bottom: 15px; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); line-height: 1.5em; border-radius: 8px; font-size: 16px; color: rgb(61, 70, 77); box-sizing: border-box; padding-right: 1em !important; padding-left: 1em !important; border-left: 3px solid rgb(67, 90, 95) !important; white-space: pre-wrap !important;"><code class="php spaces" style="padding: 2px 4px; font-size: 13px; color: rgb(199, 37, 78); background-color: rgb(249, 242, 244); border-radius: 4px; font-family: Monaco, Menlo, Consolas, Courier New, monospace; margin: 0px !important; background-image: none !important; background-position: initial !important; background-size: initial !important; background-repeat: initial !important; background-attachment: initial !important; background-origin: initial !important; background-clip: initial !important; border: 0px !important; inset: auto !important; float: none !important; line-height: 1.5em !important; outline: 0px !important; overflow: visible !important; position: static !important; vertical-align: baseline !important; width: auto !important; box-sizing: content-box !important; min-height: auto !important;"> </code><code class="php plain" style="padding: 2px 4px; font-size: 13px; color: rgb(199, 37, 78); background-color: rgb(249, 242, 244); border-radius: 4px; font-family: Monaco, Menlo, Consolas, Courier New, monospace; margin: 0px !important; background-image: none !important; background-position: initial !important; background-size: initial !important; background-repeat: initial !important; background-attachment: initial !important; background-origin: initial !important; background-clip: initial !important; border: 0px !important; inset: auto !important; float: none !important; line-height: 1.5em !important; outline: 0px !important; overflow: visible !important; position: static !important; vertical-align: baseline !important; width: auto !important; box-sizing: content-box !important; min-height: auto !important;">border: 1px solid black;</code></p><p class="line number4 index3 alt1" style="margin-top: 15px; margin-bottom: 15px; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); line-height: 1.5em; border-radius: 8px; font-size: 16px; color: rgb(61, 70, 77); box-sizing: border-box; padding-right: 1em !important; padding-left: 1em !important; border-left: 3px solid rgb(67, 90, 95) !important; white-space: pre-wrap !important;"><code class="php plain" style="padding: 2px 4px; font-size: 13px; color: rgb(199, 37, 78); background-color: rgb(249, 242, 244); border-radius: 4px; font-family: Monaco, Menlo, Consolas, Courier New, monospace; margin: 0px !important; background-image: none !important; background-position: initial !important; background-size: initial !important; background-repeat: initial !important; background-attachment: initial !important; background-origin: initial !important; background-clip: initial !important; border: 0px !important; inset: auto !important; float: none !important; line-height: 1.5em !important; outline: 0px !important; overflow: visible !important; position: static !important; vertical-align: baseline !important; width: auto !important; box-sizing: content-box !important; min-height: auto !important;">}</code></p><p class="line number5 index4 alt2" style="margin-top: 15px; margin-bottom: 15px; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); line-height: 1.5em; border-radius: 8px; font-size: 16px; color: rgb(61, 70, 77); box-sizing: border-box; padding-right: 1em !important; padding-left: 1em !important; border-left: 3px solid rgb(67, 90, 95) !important; white-space: pre-wrap !important;"> </p><p class="line number6 index5 alt1" style="margin-top: 15px; margin-bottom: 15px; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); line-height: 1.5em; border-radius: 8px; font-size: 16px; color: rgb(61, 70, 77); box-sizing: border-box; padding-right: 1em !important; padding-left: 1em !important; border-left: 3px solid rgb(67, 90, 95) !important; white-space: pre-wrap !important;"><code class="php plain" style="padding: 2px 4px; font-size: 13px; color: rgb(199, 37, 78); background-color: rgb(249, 242, 244); border-radius: 4px; font-family: Monaco, Menlo, Consolas, Courier New, monospace; margin: 0px !important; background-image: none !important; background-position: initial !important; background-size: initial !important; background-repeat: initial !important; background-attachment: initial !important; background-origin: initial !important; background-clip: initial !important; border: 0px !important; inset: auto !important; float: none !important; line-height: 1.5em !important; outline: 0px !important; overflow: visible !important; position: static !important; vertical-align: baseline !important; width: auto !important; box-sizing: content-box !important; min-height: auto !important;">h4 {</code></p><p class="line number7 index6 alt2" style="margin-top: 15px; margin-bottom: 15px; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); line-height: 1.5em; border-radius: 8px; font-size: 16px; color: rgb(61, 70, 77); box-sizing: border-box; padding-right: 1em !important; padding-left: 1em !important; border-left: 3px solid rgb(67, 90, 95) !important; white-space: pre-wrap !important;"><code class="php spaces" style="padding: 2px 4px; font-size: 13px; color: rgb(199, 37, 78); background-color: rgb(249, 242, 244); border-radius: 4px; font-family: Monaco, Menlo, Consolas, Courier New, monospace; margin: 0px !important; background-image: none !important; background-position: initial !important; background-size: initial !important; background-repeat: initial !important; background-attachment: initial !important; background-origin: initial !important; background-clip: initial !important; border: 0px !important; inset: auto !important; float: none !important; line-height: 1.5em !important; outline: 0px !important; overflow: visible !important; position: static !important; vertical-align: baseline !important; width: auto !important; box-sizing: content-box !important; min-height: auto !important;"> </code><code class="php plain" style="padding: 2px 4px; font-size: 13px; color: rgb(199, 37, 78); background-color: rgb(249, 242, 244); border-radius: 4px; font-family: Monaco, Menlo, Consolas, Courier New, monospace; margin: 0px !important; background-image: none !important; background-position: initial !important; background-size: initial !important; background-repeat: initial !important; background-attachment: initial !important; background-origin: initial !important; background-clip: initial !important; border: 0px !important; inset: auto !important; float: none !important; line-height: 1.5em !important; outline: 0px !important; overflow: visible !important; position: static !important; vertical-align: baseline !important; width: auto !important; box-sizing: content-box !important; min-height: auto !important;">background-color: white;</code></p><p class="line number8 index7 alt1" style="margin-top: 15px; margin-bottom: 15px; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); line-height: 1.5em; border-radius: 8px; font-size: 16px; color: rgb(61, 70, 77); box-sizing: border-box; padding-right: 1em !important; padding-left: 1em !important; border-left: 3px solid rgb(67, 90, 95) !important; white-space: pre-wrap !important;"><code class="php spaces" style="padding: 2px 4px; font-size: 13px; color: rgb(199, 37, 78); background-color: rgb(249, 242, 244); border-radius: 4px; font-family: Monaco, Menlo, Consolas, Courier New, monospace; margin: 0px !important; background-image: none !important; background-position: initial !important; background-size: initial !important; background-repeat: initial !important; background-attachment: initial !important; background-origin: initial !important; background-clip: initial !important; border: 0px !important; inset: auto !important; float: none !important; line-height: 1.5em !important; outline: 0px !important; overflow: visible !important; position: static !important; vertical-align: baseline !important; width: auto !important; box-sizing: content-box !important; min-height: auto !important;"> </code><code class="php plain" style="padding: 2px 4px; font-size: 13px; color: rgb(199, 37, 78); background-color: rgb(249, 242, 244); border-radius: 4px; font-family: Monaco, Menlo, Consolas, Courier New, monospace; margin: 0px !important; background-image: none !important; background-position: initial !important; background-size: initial !important; background-repeat: initial !important; background-attachment: initial !important; background-origin: initial !important; background-clip: initial !important; border: 0px !important; inset: auto !important; float: none !important; line-height: 1.5em !important; outline: 0px !important; overflow: visible !important; position: static !important; vertical-align: baseline !important; width: auto !important; box-sizing: content-box !important; min-height: auto !important;">border: 1px solid #777;</code></p><p class="line number9 index8 alt2" style="margin-top: 15px; margin-bottom: 15px; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); line-height: 1.5em; border-radius: 8px; font-size: 16px; color: rgb(61, 70, 77); box-sizing: border-box; padding-right: 1em !important; padding-left: 1em !important; border-left: 3px solid rgb(67, 90, 95) !important; white-space: pre-wrap !important;"><code class="php plain" style="padding: 2px 4px; font-size: 13px; color: rgb(199, 37, 78); background-color: rgb(249, 242, 244); border-radius: 4px; font-family: Monaco, Menlo, Consolas, Courier New, monospace; margin: 0px !important; background-image: none !important; background-position: initial !important; background-size: initial !important; background-repeat: initial !important; background-attachment: initial !important; background-origin: initial !important; background-clip: initial !important; border: 0px !important; inset: auto !important; float: none !important; line-height: 1.5em !important; outline: 0px !important; overflow: visible !important; position: static !important; vertical-align: baseline !important; width: auto !important; box-sizing: content-box !important; min-height: auto !important;">}</code></p></td></tr></tbody></table><p style="margin-top: 15px; margin-bottom: 15px; padding: 0px 0px 0px 10px; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); color: rgb(61, 70, 77); box-sizing: border-box; border-radius: 8px; font-family: Helvetica Neue, Helvetica, PingFang SC, 微软雅黑, Tahoma, Arial, sans-serif; white-space: normal; background-color: rgb(255, 255, 255);">这些样式经过后期处理，以便每个 CSS 选择器都使用适当的 _nghost 或 _ngcontent 属性进行扩充。这些修改后的选择器可以确保样式以隔离和有针对性的方式应用于组件的视图。</p><table class="wcn_c_table" cellpadding="0" cellspacing="0" width="760"><tbody style="margin: 0px !important; padding: 0px !important; border-radius: 0px !important; background: none !important; border: 0px !important; inset: auto !important; float: none !important; line-height: 1.1em !important; outline: 0px !important; overflow: visible !important; position: static !important; vertical-align: baseline !important; width: auto !important; box-sizing: content-box !important; min-height: auto !important;"><tr style="margin: 0px !important; padding: 0px !important; border-radius: 0px !important; background: none !important; border: 0px !important; inset: auto !important; float: none !important; line-height: 1.1em !important; outline: 0px !important; overflow: visible !important; position: static !important; vertical-align: baseline !important; width: auto !important; box-sizing: content-box !important; min-height: auto !important;" class="firstRow"><td class="gutter" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); margin: 0px !important; border-radius: 4px 0px 0px 4px !important; background: none !important; inset: auto !important; float: none !important; line-height: 1.1em !important; outline: 0px !important; overflow: visible !important; position: static !important; vertical-align: baseline !important; box-sizing: content-box !important; min-height: auto !important; color: rgb(175, 175, 175) !important; user-select: none !important;" width="NaN"><p class="line number1 index0 alt2" style="margin-top: 15px; margin-bottom: 15px; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); line-height: 1.5em; border-radius: 8px; font-size: 16px; color: rgb(61, 70, 77); box-sizing: border-box; padding-right: 0.5em !important; padding-left: 1em !important; border-left: 3px solid rgb(67, 90, 95) !important; white-space: pre-wrap !important; text-align: right !important;">1</p></td><td class="code" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); word-break: break-all; margin: 0px !important; border-radius: 0px !important; background: none !important; inset: auto !important; float: none !important; line-height: 1.1em !important; outline: 0px !important; overflow: visible !important; position: static !important; vertical-align: baseline !important; box-sizing: content-box !important; min-height: auto !important;" width="719"><p class="line number1 index0 alt2" style="margin-top: 15px; margin-bottom: 15px; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); line-height: 1.5em; border-radius: 8px; font-size: 16px; color: rgb(61, 70, 77); box-sizing: border-box; padding-right: 1em !important; padding-left: 1em !important; border-left: 3px solid rgb(67, 90, 95) !important; white-space: pre-wrap !important;"><code class="php plain" style="padding: 2px 4px; font-size: 13px; color: rgb(199, 37, 78); background-color: rgb(249, 242, 244); border-radius: 4px; font-family: Monaco, Menlo, Consolas, Courier New, monospace; margin: 0px !important; background-image: none !important; background-position: initial !important; background-size: initial !important; background-repeat: initial !important; background-attachment: initial !important; background-origin: initial !important; background-clip: initial !important; border: 0px !important; inset: auto !important; float: none !important; line-height: 1.5em !important; outline: 0px !important; overflow: visible !important; position: static !important; vertical-align: baseline !important; width: auto !important; box-sizing: content-box !important; min-height: auto !important;"><p>child works!</p></code></p></td></tr></tbody></table><table class="wcn_c_table" cellpadding="0" cellspacing="0" width="760"><tbody style="margin: 0px !important; padding: 0px !important; border-radius: 0px !important; background: none !important; border: 0px !important; inset: auto !important; float: none !important; line-height: 1.1em !important; outline: 0px !important; overflow: visible !important; position: static !important; vertical-align: baseline !important; width: auto !important; box-sizing: content-box !important; min-height: auto !important;"><tr style="margin: 0px !important; padding: 0px !important; border-radius: 0px !important; background: none !important; border: 0px !important; inset: auto !important; float: none !important; line-height: 1.1em !important; outline: 0px !important; overflow: visible !important; position: static !important; vertical-align: baseline !important; width: auto !important; box-sizing: content-box !important; min-height: auto !important;" class="firstRow"><td class="gutter" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); margin: 0px !important; border-radius: 4px 0px 0px 4px !important; background: none !important; inset: auto !important; float: none !important; line-height: 1.1em !important; outline: 0px !important; overflow: visible !important; position: static !important; vertical-align: baseline !important; box-sizing: content-box !important; min-height: auto !important; color: rgb(175, 175, 175) !important; user-select: none !important;" width="NaN"><p class="line number1 index0 alt2" style="margin-top: 15px; margin-bottom: 15px; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); line-height: 1.5em; border-radius: 8px; font-size: 16px; color: rgb(61, 70, 77); box-sizing: border-box; padding-right: 0.5em !important; padding-left: 1em !important; border-left: 3px solid rgb(67, 90, 95) !important; white-space: pre-wrap !important; text-align: right !important;">1</p><p class="line number2 index1 alt1" style="margin-top: 15px; margin-bottom: 15px; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); line-height: 1.5em; border-radius: 8px; font-size: 16px; color: rgb(61, 70, 77); box-sizing: border-box; padding-right: 0.5em !important; padding-left: 1em !important; border-left: 3px solid rgb(67, 90, 95) !important; white-space: pre-wrap !important; text-align: right !important;">2</p><p class="line number3 index2 alt2" style="margin-top: 15px; margin-bottom: 15px; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); line-height: 1.5em; border-radius: 8px; font-size: 16px; color: rgb(61, 70, 77); box-sizing: border-box; padding-right: 0.5em !important; padding-left: 1em !important; border-left: 3px solid rgb(67, 90, 95) !important; white-space: pre-wrap !important; text-align: right !important;">3</p></td><td class="code" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); word-break: break-all; margin: 0px !important; border-radius: 0px !important; background: none !important; inset: auto !important; float: none !important; line-height: 1.1em !important; outline: 0px !important; overflow: visible !important; position: static !important; vertical-align: baseline !important; box-sizing: content-box !important; min-height: auto !important;" width="719"><p class="line number1 index0 alt2" style="margin-top: 15px; margin-bottom: 15px; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); line-height: 1.5em; border-radius: 8px; font-size: 16px; color: rgb(61, 70, 77); box-sizing: border-box; padding-right: 1em !important; padding-left: 1em !important; border-left: 3px solid rgb(67, 90, 95) !important; white-space: pre-wrap !important;"><code class="php plain" style="padding: 2px 4px; font-size: 13px; color: rgb(199, 37, 78); background-color: rgb(249, 242, 244); border-radius: 4px; font-family: Monaco, Menlo, Consolas, Courier New, monospace; margin: 0px !important; background-image: none !important; background-position: initial !important; background-size: initial !important; background-repeat: initial !important; background-attachment: initial !important; background-origin: initial !important; background-clip: initial !important; border: 0px !important; inset: auto !important; float: none !important; line-height: 1.5em !important; outline: 0px !important; overflow: visible !important; position: static !important; vertical-align: baseline !important; width: auto !important; box-sizing: content-box !important; min-height: auto !important;">p{</code></p><p class="line number2 index1 alt1" style="margin-top: 15px; margin-bottom: 15px; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); line-height: 1.5em; border-radius: 8px; font-size: 16px; color: rgb(61, 70, 77); box-sizing: border-box; padding-right: 1em !important; padding-left: 1em !important; border-left: 3px solid rgb(67, 90, 95) !important; white-space: pre-wrap !important;"><code class="php spaces" style="padding: 2px 4px; font-size: 13px; color: rgb(199, 37, 78); background-color: rgb(249, 242, 244); border-radius: 4px; font-family: Monaco, Menlo, Consolas, Courier New, monospace; margin: 0px !important; background-image: none !important; background-position: initial !important; background-size: initial !important; background-repeat: initial !important; background-attachment: initial !important; background-origin: initial !important; background-clip: initial !important; border: 0px !important; inset: auto !important; float: none !important; line-height: 1.5em !important; outline: 0px !important; overflow: visible !important; position: static !important; vertical-align: baseline !important; width: auto !important; box-sizing: content-box !important; min-height: auto !important;"> </code><code class="php plain" style="padding: 2px 4px; font-size: 13px; color: rgb(199, 37, 78); background-color: rgb(249, 242, 244); border-radius: 4px; font-family: Monaco, Menlo, Consolas, Courier New, monospace; margin: 0px !important; background-image: none !important; background-position: initial !important; background-size: initial !important; background-repeat: initial !important; background-attachment: initial !important; background-origin: initial !important; background-clip: initial !important; border: 0px !important; inset: auto !important; float: none !important; line-height: 1.5em !important; outline: 0px !important; overflow: visible !important; position: static !important; vertical-align: baseline !important; width: auto !important; box-sizing: content-box !important; min-height: auto !important;">color: green;</code></p><p class="line number3 index2 alt2" style="margin-top: 15px; margin-bottom: 15px; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); line-height: 1.5em; border-radius: 8px; font-size: 16px; color: rgb(61, 70, 77); box-sizing: border-box; padding-right: 1em !important; padding-left: 1em !important; border-left: 3px solid rgb(67, 90, 95) !important; white-space: pre-wrap !important;"><code class="php plain" style="padding: 2px 4px; font-size: 13px; color: rgb(199, 37, 78); background-color: rgb(249, 242, 244); border-radius: 4px; font-family: Monaco, Menlo, Consolas, Courier New, monospace; margin: 0px !important; background-image: none !important; background-position: initial !important; background-size: initial !important; background-repeat: initial !important; background-attachment: initial !important; background-origin: initial !important; background-clip: initial !important; border: 0px !important; inset: auto !important; float: none !important; line-height: 1.5em !important; outline: 0px !important; overflow: visible !important; position: static !important; vertical-align: baseline !important; width: auto !important; box-sizing: content-box !important; min-height: auto !important;">}</code></p></td></tr></tbody></table><table class="wcn_c_table" cellpadding="0" cellspacing="0" width="760"><tbody style="margin: 0px !important; padding: 0px !important; border-radius: 0px !important; background: none !important; border: 0px !important; inset: auto !important; float: none !important; line-height: 1.1em !important; outline: 0px !important; overflow: visible !important; position: static !important; vertical-align: baseline !important; width: auto !important; box-sizing: content-box !important; min-height: auto !important;"><tr style="margin: 0px !important; padding: 0px !important; border-radius: 0px !important; background: none !important; border: 0px !important; inset: auto !important; float: none !important; line-height: 1.1em !important; outline: 0px !important; overflow: visible !important; position: static !important; vertical-align: baseline !important; width: auto !important; box-sizing: content-box !important; min-height: auto !important;" class="firstRow"><td class="gutter" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); margin: 0px !important; border-radius: 4px 0px 0px 4px !important; background: none !important; inset: auto !important; float: none !important; line-height: 1.1em !important; outline: 0px !important; overflow: visible !important; position: static !important; vertical-align: baseline !important; box-sizing: content-box !important; min-height: auto !important; color: rgb(175, 175, 175) !important; user-select: none !important;" width="NaN"><p class="line number1 index0 alt2" style="margin-top: 15px; margin-bottom: 15px; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); line-height: 1.5em; border-radius: 8px; font-size: 16px; color: rgb(61, 70, 77); box-sizing: border-box; padding-right: 0.5em !important; padding-left: 1em !important; border-left: 3px solid rgb(67, 90, 95) !important; white-space: pre-wrap !important; text-align: right !important;">1</p><p class="line number2 index1 alt1" style="margin-top: 15px; margin-bottom: 15px; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); line-height: 1.5em; border-radius: 8px; font-size: 16px; color: rgb(61, 70, 77); box-sizing: border-box; padding-right: 0.5em !important; padding-left: 1em !important; border-left: 3px solid rgb(67, 90, 95) !important; white-space: pre-wrap !important; text-align: right !important;">2</p><p class="line number3 index2 alt2" style="margin-top: 15px; margin-bottom: 15px; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); line-height: 1.5em; border-radius: 8px; font-size: 16px; color: rgb(61, 70, 77); box-sizing: border-box; padding-right: 0.5em !important; padding-left: 1em !important; border-left: 3px solid rgb(67, 90, 95) !important; white-space: pre-wrap !important; text-align: right !important;">3</p><p class="line number4 index3 alt1" style="margin-top: 15px; margin-bottom: 15px; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); line-height: 1.5em; border-radius: 8px; font-size: 16px; color: rgb(61, 70, 77); box-sizing: border-box; padding-right: 0.5em !important; padding-left: 1em !important; border-left: 3px solid rgb(67, 90, 95) !important; white-space: pre-wrap !important; text-align: right !important;">4</p><p class="line number5 index4 alt2" style="margin-top: 15px; margin-bottom: 15px; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); line-height: 1.5em; border-radius: 8px; font-size: 16px; color: rgb(61, 70, 77); box-sizing: border-box; padding-right: 0.5em !important; padding-left: 1em !important; border-left: 3px solid rgb(67, 90, 95) !important; white-space: pre-wrap !important; text-align: right !important;">5</p><p class="line number6 index5 alt1" style="margin-top: 15px; margin-bottom: 15px; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); line-height: 1.5em; border-radius: 8px; font-size: 16px; color: rgb(61, 70, 77); box-sizing: border-box; padding-right: 0.5em !important; padding-left: 1em !important; border-left: 3px solid rgb(67, 90, 95) !important; white-space: pre-wrap !important; text-align: right !important;">6</p><p class="line number7 index6 alt2" style="margin-top: 15px; margin-bottom: 15px; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); line-height: 1.5em; border-radius: 8px; font-size: 16px; color: rgb(61, 70, 77); box-sizing: border-box; padding-right: 0.5em !important; padding-left: 1em !important; border-left: 3px solid rgb(67, 90, 95) !important; white-space: pre-wrap !important; text-align: right !important;">7</p><p class="line number8 index7 alt1" style="margin-top: 15px; margin-bottom: 15px; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); line-height: 1.5em; border-radius: 8px; font-size: 16px; color: rgb(61, 70, 77); box-sizing: border-box; padding-right: 0.5em !important; padding-left: 1em !important; border-left: 3px solid rgb(67, 90, 95) !important; white-space: pre-wrap !important; text-align: right !important;">8</p><p class="line number9 index8 alt2" style="margin-top: 15px; margin-bottom: 15px; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); line-height: 1.5em; border-radius: 8px; font-size: 16px; color: rgb(61, 70, 77); box-sizing: border-box; padding-right: 0.5em !important; padding-left: 1em !important; border-left: 3px solid rgb(67, 90, 95) !important; white-space: pre-wrap !important; text-align: right !important;">9</p></td><td class="code" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); word-break: break-all; margin: 0px !important; border-radius: 0px !important; background: none !important; inset: auto !important; float: none !important; line-height: 1.1em !important; outline: 0px !important; overflow: visible !important; position: static !important; vertical-align: baseline !important; box-sizing: content-box !important; min-height: auto !important;" width="719"><p class="line number1 index0 alt2" style="margin-top: 15px; margin-bottom: 15px; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); line-height: 1.5em; border-radius: 8px; font-size: 16px; color: rgb(61, 70, 77); box-sizing: border-box; padding-right: 1em !important; padding-left: 1em !important; border-left: 3px solid rgb(67, 90, 95) !important; white-space: pre-wrap !important;"><code class="php plain" style="padding: 2px 4px; font-size: 13px; color: rgb(199, 37, 78); background-color: rgb(249, 242, 244); border-radius: 4px; font-family: Monaco, Menlo, Consolas, Courier New, monospace; margin: 0px !important; background-image: none !important; background-position: initial !important; background-size: initial !important; background-repeat: initial !important; background-attachment: initial !important; background-origin: initial !important; background-clip: initial !important; border: 0px !important; inset: auto !important; float: none !important; line-height: 1.5em !important; outline: 0px !important; overflow: visible !important; position: static !important; vertical-align: baseline !important; width: auto !important; box-sizing: content-box !important; min-height: auto !important;">@Component({</code></p><p class="line number2 index1 alt1" style="margin-top: 15px; margin-bottom: 15px; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); line-height: 1.5em; border-radius: 8px; font-size: 16px; color: rgb(61, 70, 77); box-sizing: border-box; padding-right: 1em !important; padding-left: 1em !important; border-left: 3px solid rgb(67, 90, 95) !important; white-space: pre-wrap !important;"><code class="php spaces" style="padding: 2px 4px; font-size: 13px; color: rgb(199, 37, 78); background-color: rgb(249, 242, 244); border-radius: 4px; font-family: Monaco, Menlo, Consolas, Courier New, monospace; margin: 0px !important; background-image: none !important; background-position: initial !important; background-size: initial !important; background-repeat: initial !important; background-attachment: initial !important; background-origin: initial !important; background-clip: initial !important; border: 0px !important; inset: auto !important; float: none !important; line-height: 1.5em !important; outline: 0px !important; overflow: visible !important; position: static !important; vertical-align: baseline !important; width: auto !important; box-sizing: content-box !important; min-height: auto !important;"> </code><code class="php plain" style="padding: 2px 4px; font-size: 13px; color: rgb(199, 37, 78); background-color: rgb(249, 242, 244); border-radius: 4px; font-family: Monaco, Menlo, Consolas, Courier New, monospace; margin: 0px !important; background-image: none !important; background-position: initial !important; background-size: initial !important; background-repeat: initial !important; background-attachment: initial !important; background-origin: initial !important; background-clip: initial !important; border: 0px !important; inset: auto !important; float: none !important; line-height: 1.5em !important; outline: 0px !important; overflow: visible !important; position: static !important; vertical-align: baseline !important; width: auto !important; box-sizing: content-box !important; min-height: auto !important;">selector: </code><code class="php string" style="padding: 2px 4px; font-size: 13px; color: rgb(199, 37, 78); background-color: rgb(249, 242, 244); border-radius: 4px; font-family: Monaco, Menlo, Consolas, Courier New, monospace; margin: 0px !important; background-image: none !important; background-position: initial !important; background-size: initial !important; background-repeat: initial !important; background-attachment: initial !important; background-origin: initial !important; background-clip: initial !important; border: 0px !important; inset: auto !important; float: none !important; line-height: 1.5em !important; outline: 0px !important; overflow: visible !important; position: static !important; vertical-align: baseline !important; width: auto !important; box-sizing: content-box !important; min-height: auto !important;">app-child</code><code class="php plain" style="padding: 2px 4px; font-size: 13px; color: rgb(199, 37, 78); background-color: rgb(249, 242, 244); border-radius: 4px; font-family: Monaco, Menlo, Consolas, Courier New, monospace; margin: 0px !important; background-image: none !important; background-position: initial !important; background-size: initial !important; background-repeat: initial !important; background-attachment: initial !important; background-origin: initial !important; background-clip: initial !important; border: 0px !important; inset: auto !important; float: none !important; line-height: 1.5em !important; outline: 0px !important; overflow: visible !important; position: static !important; vertical-align: baseline !important; width: auto !important; box-sizing: content-box !important; min-height: auto !important;">,</code></p><p class="line number3 index2 alt2" style="margin-top: 15px; margin-bottom: 15px; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); line-height: 1.5em; border-radius: 8px; font-size: 16px; color: rgb(61, 70, 77); box-sizing: border-box; padding-right: 1em !important; padding-left: 1em !important; border-left: 3px solid rgb(67, 90, 95) !important; white-space: pre-wrap !important;"><code class="php spaces" style="padding: 2px 4px; font-size: 13px; color: rgb(199, 37, 78); background-color: rgb(249, 242, 244); border-radius: 4px; font-family: Monaco, Menlo, Consolas, Courier New, monospace; margin: 0px !important; background-image: none !important; background-position: initial !important; background-size: initial !important; background-repeat: initial !important; background-attachment: initial !important; background-origin: initial !important; background-clip: initial !important; border: 0px !important; inset: auto !important; float: none !important; line-height: 1.5em !important; outline: 0px !important; overflow: visible !important; position: static !important; vertical-align: baseline !important; width: auto !important; box-sizing: content-box !important; min-height: auto !important;"> </code><code class="php plain" style="padding: 2px 4px; font-size: 13px; color: rgb(199, 37, 78); background-color: rgb(249, 242, 244); border-radius: 4px; font-family: Monaco, Menlo, Consolas, Courier New, monospace; margin: 0px !important; background-image: none !important; background-position: initial !important; background-size: initial !important; background-repeat: initial !important; background-attachment: initial !important; background-origin: initial !important; background-clip: initial !important; border: 0px !important; inset: auto !important; float: none !important; line-height: 1.5em !important; outline: 0px !important; overflow: visible !important; position: static !important; vertical-align: baseline !important; width: auto !important; box-sizing: content-box !important; min-height: auto !important;">templateUrl: </code><code class="php string" style="padding: 2px 4px; font-size: 13px; color: rgb(199, 37, 78); background-color: rgb(249, 242, 244); border-radius: 4px; font-family: Monaco, Menlo, Consolas, Courier New, monospace; margin: 0px !important; background-image: none !important; background-position: initial !important; background-size: initial !important; background-repeat: initial !important; background-attachment: initial !important; background-origin: initial !important; background-clip: initial !important; border: 0px !important; inset: auto !important; float: none !important; line-height: 1.5em !important; outline: 0px !important; overflow: visible !important; position: static !important; vertical-align: baseline !important; width: auto !important; box-sizing: content-box !important; min-height: auto !important;">./child.component.html</code><code class="php plain" style="padding: 2px 4px; font-size: 13px; color: rgb(199, 37, 78); background-color: rgb(249, 242, 244); border-radius: 4px; font-family: Monaco, Menlo, Consolas, Courier New, monospace; margin: 0px !important; background-image: none !important; background-position: initial !important; background-size: initial !important; background-repeat: initial !important; background-attachment: initial !important; background-origin: initial !important; background-clip: initial !important; border: 0px !important; inset: auto !important; float: none !important; line-height: 1.5em !important; outline: 0px !important; overflow: visible !important; position: static !important; vertical-align: baseline !important; width: auto !important; box-sizing: content-box !important; min-height: auto !important;">,</code></p><p class="line number4 index3 alt1" style="margin-top: 15px; margin-bottom: 15px; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); line-height: 1.5em; border-radius: 8px; font-size: 16px; color: rgb(61, 70, 77); box-sizing: border-box; padding-right: 1em !important; padding-left: 1em !important; border-left: 3px solid rgb(67, 90, 95) !important; white-space: pre-wrap !important;"><code class="php spaces" style="padding: 2px 4px; font-size: 13px; color: rgb(199, 37, 78); background-color: rgb(249, 242, 244); border-radius: 4px; font-family: Monaco, Menlo, Consolas, Courier New, monospace; margin: 0px !important; background-image: none !important; background-position: initial !important; background-size: initial !important; background-repeat: initial !important; background-attachment: initial !important; background-origin: initial !important; background-clip: initial !important; border: 0px !important; inset: auto !important; float: none !important; line-height: 1.5em !important; outline: 0px !important; overflow: visible !important; position: static !important; vertical-align: baseline !important; width: auto !important; box-sizing: content-box !important; min-height: auto !important;"> </code><code class="php plain" style="padding: 2px 4px; font-size: 13px; color: rgb(199, 37, 78); background-color: rgb(249, 242, 244); border-radius: 4px; font-family: Monaco, Menlo, Consolas, Courier New, monospace; margin: 0px !important; background-image: none !important; background-position: initial !important; background-size: initial !important; background-repeat: initial !important; background-attachment: initial !important; background-origin: initial !important; background-clip: initial !important; border: 0px !important; inset: auto !important; float: none !important; line-height: 1.5em !important; outline: 0px !important; overflow: visible !important; position: static !important; vertical-align: baseline !important; width: auto !important; box-sizing: content-box !important; min-height: auto !important;">styleUrls: [</code><code class="php string" style="padding: 2px 4px; font-size: 13px; color: rgb(199, 37, 78); background-color: rgb(249, 242, 244); border-radius: 4px; font-family: Monaco, Menlo, Consolas, Courier New, monospace; margin: 0px !important; background-image: none !important; background-position: initial !important; background-size: initial !important; background-repeat: initial !important; background-attachment: initial !important; background-origin: initial !important; background-clip: initial !important; border: 0px !important; inset: auto !important; float: none !important; line-height: 1.5em !important; outline: 0px !important; overflow: visible !important; position: static !important; vertical-align: baseline !important; width: auto !important; box-sizing: content-box !important; min-height: auto !important;">./child.component.scss</code><code class="php plain" style="padding: 2px 4px; font-size: 13px; color: rgb(199, 37, 78); background-color: rgb(249, 242, 244); border-radius: 4px; font-family: Monaco, Menlo, Consolas, Courier New, monospace; margin: 0px !important; background-image: none !important; background-position: initial !important; background-size: initial !important; background-repeat: initial !important; background-attachment: initial !important; background-origin: initial !important; background-clip: initial !important; border: 0px !important; inset: auto !important; float: none !important; line-height: 1.5em !important; outline: 0px !important; overflow: visible !important; position: static !important; vertical-align: baseline !important; width: auto !important; box-sizing: content-box !important; min-height: auto !important;">],</code></p><p class="line number5 index4 alt2" style="margin-top: 15px; margin-bottom: 15px; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); line-height: 1.5em; border-radius: 8px; font-size: 16px; color: rgb(61, 70, 77); box-sizing: border-box; padding-right: 1em !important; padding-left: 1em !important; border-left: 3px solid rgb(67, 90, 95) !important; white-space: pre-wrap !important;"><code class="php spaces" style="padding: 2px 4px; font-size: 13px; color: rgb(199, 37, 78); background-color: rgb(249, 242, 244); border-radius: 4px; font-family: Monaco, Menlo, Consolas, Courier New, monospace; margin: 0px !important; background-image: none !important; background-position: initial !important; background-size: initial !important; background-repeat: initial !important; background-attachment: initial !important; background-origin: initial !important; background-clip: initial !important; border: 0px !important; inset: auto !important; float: none !important; line-height: 1.5em !important; outline: 0px !important; overflow: visible !important; position: static !important; vertical-align: baseline !important; width: auto !important; box-sizing: content-box !important; min-height: auto !important;"> </code><code class="php plain" style="padding: 2px 4px; font-size: 13px; color: rgb(199, 37, 78); background-color: rgb(249, 242, 244); border-radius: 4px; font-family: Monaco, Menlo, Consolas, Courier New, monospace; margin: 0px !important; background-image: none !important; background-position: initial !important; background-size: initial !important; background-repeat: initial !important; background-attachment: initial !important; background-origin: initial !important; background-clip: initial !important; border: 0px !important; inset: auto !important; float: none !important; line-height: 1.5em !important; outline: 0px !important; overflow: visible !important; position: static !important; vertical-align: baseline !important; width: auto !important; box-sizing: content-box !important; min-height: auto !important;">encapsulation: ViewEncapsulation.Emulated</code></p><p class="line number6 index5 alt1" style="margin-top: 15px; margin-bottom: 15px; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); line-height: 1.5em; border-radius: 8px; font-size: 16px; color: rgb(61, 70, 77); box-sizing: border-box; padding-right: 1em !important; padding-left: 1em !important; border-left: 3px solid rgb(67, 90, 95) !important; white-space: pre-wrap !important;"><code class="php plain" style="padding: 2px 4px; font-size: 13px; color: rgb(199, 37, 78); background-color: rgb(249, 242, 244); border-radius: 4px; font-family: Monaco, Menlo, Consolas, Courier New, monospace; margin: 0px !important; background-image: none !important; background-position: initial !important; background-size: initial !important; background-repeat: initial !important; background-attachment: initial !important; background-origin: initial !important; background-clip: initial !important; border: 0px !important; inset: auto !important; float: none !important; line-height: 1.5em !important; outline: 0px !important; overflow: visible !important; position: static !important; vertical-align: baseline !important; width: auto !important; box-sizing: content-box !important; min-height: auto !important;">})</code></p><p class="line number7 index6 alt2" style="margin-top: 15px; margin-bottom: 15px; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); line-height: 1.5em; border-radius: 8px; font-size: 16px; color: rgb(61, 70, 77); box-sizing: border-box; padding-right: 1em !important; padding-left: 1em !important; border-left: 3px solid rgb(67, 90, 95) !important; white-space: pre-wrap !important;"><code class="php plain" style="padding: 2px 4px; font-size: 13px; color: rgb(199, 37, 78); background-color: rgb(249, 242, 244); border-radius: 4px; font-family: Monaco, Menlo, Consolas, Courier New, monospace; margin: 0px !important; background-image: none !important; background-position: initial !important; background-size: initial !important; background-repeat: initial !important; background-attachment: initial !important; background-origin: initial !important; background-clip: initial !important; border: 0px !important; inset: auto !important; float: none !important; line-height: 1.5em !important; outline: 0px !important; overflow: visible !important; position: static !important; vertical-align: baseline !important; width: auto !important; box-sizing: content-box !important; min-height: auto !important;">export </code><code class="php keyword" style="padding: 2px 4px; font-size: 13px; color: rgb(199, 37, 78); background-color: rgb(249, 242, 244); border-radius: 4px; font-family: Monaco, Menlo, Consolas, Courier New, monospace; margin: 0px !important; background-image: none !important; background-position: initial !important; background-size: initial !important; background-repeat: initial !important; background-attachment: initial !important; background-origin: initial !important; background-clip: initial !important; border: 0px !important; inset: auto !important; float: none !important; line-height: 1.5em !important; outline: 0px !important; overflow: visible !important; position: static !important; vertical-align: baseline !important; width: auto !important; box-sizing: content-box !important; font-weight: bold !important; min-height: auto !important;">class</code> <code class="php plain" style="padding: 2px 4px; font-size: 13px; color: rgb(199, 37, 78); background-color: rgb(249, 242, 244); border-radius: 4px; font-family: Monaco, Menlo, Consolas, Courier New, monospace; margin: 0px !important; background-image: none !important; background-position: initial !important; background-size: initial !important; background-repeat: initial !important; background-attachment: initial !important; background-origin: initial !important; background-clip: initial !important; border: 0px !important; inset: auto !important; float: none !important; line-height: 1.5em !important; outline: 0px !important; overflow: visible !important; position: static !important; vertical-align: baseline !important; width: auto !important; box-sizing: content-box !important; min-height: auto !important;">ChildComponent </code><code class="php keyword" style="padding: 2px 4px; font-size: 13px; color: rgb(199, 37, 78); background-color: rgb(249, 242, 244); border-radius: 4px; font-family: Monaco, Menlo, Consolas, Courier New, monospace; margin: 0px !important; background-image: none !important; background-position: initial !important; background-size: initial !important; background-repeat: initial !important; background-attachment: initial !important; background-origin: initial !important; background-clip: initial !important; border: 0px !important; inset: auto !important; float: none !important; line-height: 1.5em !important; outline: 0px !important; overflow: visible !important; position: static !important; vertical-align: baseline !important; width: auto !important; box-sizing: content-box !important; font-weight: bold !important; min-height: auto !important;">implements</code> <code class="php plain" style="padding: 2px 4px; font-size: 13px; color: rgb(199, 37, 78); background-color: rgb(249, 242, 244); border-radius: 4px; font-family: Monaco, Menlo, Consolas, Courier New, monospace; margin: 0px !important; background-image: none !important; background-position: initial !important; background-size: initial !important; background-repeat: initial !important; background-attachment: initial !important; background-origin: initial !important; background-clip: initial !important; border: 0px !important; inset: auto !important; float: none !important; line-height: 1.5em !important; outline: 0px !important; overflow: visible !important; position: static !important; vertical-align: baseline !important; width: auto !important; box-sizing: content-box !important; min-height: auto !important;">OnInit {</code></p><p class="line number8 index7 alt1" style="margin-top: 15px; margin-bottom: 15px; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); line-height: 1.5em; border-radius: 8px; font-size: 16px; color: rgb(61, 70, 77); box-sizing: border-box; padding-right: 1em !important; padding-left: 1em !important; border-left: 3px solid rgb(67, 90, 95) !important; white-space: pre-wrap !important;"><code class="php spaces" style="padding: 2px 4px; font-size: 13px; color: rgb(199, 37, 78); background-color: rgb(249, 242, 244); border-radius: 4px; font-family: Monaco, Menlo, Consolas, Courier New, monospace; margin: 0px !important; background-image: none !important; background-position: initial !important; background-size: initial !important; background-repeat: initial !important; background-attachment: initial !important; background-origin: initial !important; background-clip: initial !important; border: 0px !important; inset: auto !important; float: none !important; line-height: 1.5em !important; outline: 0px !important; overflow: visible !important; position: static !important; vertical-align: baseline !important; width: auto !important; box-sizing: content-box !important; min-height: auto !important;"> </code><code class="php plain" style="padding: 2px 4px; font-size: 13px; color: rgb(199, 37, 78); background-color: rgb(249, 242, 244); border-radius: 4px; font-family: Monaco, Menlo, Consolas, Courier New, monospace; margin: 0px !important; background-image: none !important; background-position: initial !important; background-size: initial !important; background-repeat: initial !important; background-attachment: initial !important; background-origin: initial !important; background-clip: initial !important; border: 0px !important; inset: auto !important; float: none !important; line-height: 1.5em !important; outline: 0px !important; overflow: visible !important; position: static !important; vertical-align: baseline !important; width: auto !important; box-sizing: content-box !important; min-height: auto !important;">......</code></p><p class="line number9 index8 alt2" style="margin-top: 15px; margin-bottom: 15px; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); line-height: 1.5em; border-radius: 8px; font-size: 16px; color: rgb(61, 70, 77); box-sizing: border-box; padding-right: 1em !important; padding-left: 1em !important; border-left: 3px solid rgb(67, 90, 95) !important; white-space: pre-wrap !important;"><code class="php plain" style="padding: 2px 4px; font-size: 13px; color: rgb(199, 37, 78); background-color: rgb(249, 242, 244); border-radius: 4px; font-family: Monaco, Menlo, Consolas, Courier New, monospace; margin: 0px !important; background-image: none !important; background-position: initial !important; background-size: initial !important; background-repeat: initial !important; background-attachment: initial !important; background-origin: initial !important; background-clip: initial !important; border: 0px !important; inset: auto !important; float: none !important; line-height: 1.5em !important; outline: 0px !important; overflow: visible !important; position: static !important; vertical-align: baseline !important; width: auto !important; box-sizing: content-box !important; min-height: auto !important;">}</code></p></td></tr></tbody></table><p style="margin-top: 15px; margin-bottom: 15px; padding: 0px 0px 0px 10px; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); color: rgb(61, 70, 77); box-sizing: border-box; border-radius: 8px; font-family: Helvetica Neue, Helvetica, PingFang SC, 微软雅黑, Tahoma, Arial, sans-serif; white-space: normal; background-color: rgb(255, 255, 255);"></p><p style="margin-top: 15px; margin-bottom: 15px; padding: 0px 0px 0px 10px; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); color: rgb(61, 70, 77); box-sizing: border-box; border-radius: 8px; font-family: Helvetica Neue, Helvetica, PingFang SC, 微软雅黑, Tahoma, Arial, sans-serif; white-space: normal; background-color: rgb(255, 255, 255);">ViewEncapsulation.Emulated 设置的结果是没有 Shadow DOM，但是通过 Angular 提供的样式包装机制来封装组件，使得组件的样式不受外部影响。虽然样式仍然是应用到整个 document，但 Angular 为 p创建了一个 选择器。可以看出，我们为组件定义的样式，被 Angular 修改了。简单来说，尽管是也是全局样式，但是由于自动选择器的原因，并不会影响其他组件的样式。如果手动在其他元素上也添加这个属性，则样式也会应用到这元素上。</p><h3 data-id="heading-5" style="margin: 0px; padding: 0px; font-weight: 400; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); font-family: Helvetica Neue, Helvetica, PingFang SC, 微软雅黑, Tahoma, Arial, sans-serif; white-space: normal; background-color: rgb(255, 255, 255);"><strong style="margin: 0px; padding: 0px;">ViewEncapsulation.None</strong></h3><p style="margin-top: 15px; margin-bottom: 15px; padding: 0px 0px 0px 10px; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); color: rgb(61, 70, 77); box-sizing: border-box; border-radius: 8px; font-family: Helvetica Neue, Helvetica, PingFang SC, 微软雅黑, Tahoma, Arial, sans-serif; white-space: normal; background-color: rgb(255, 255, 255);">Angular 不应用任何形式的视图封装，这意味着为组件指定的任何样式实际上都是全局应用的，并且可以影响应用程序中存在的任何 HTML 元素。这种模式本质上与将样式包含在 HTML 本身中是一样的。</p><p style="margin-top: 15px; margin-bottom: 15px; padding: 0px 0px 0px 10px; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); color: rgb(61, 70, 77); box-sizing: border-box; border-radius: 8px; font-family: Helvetica Neue, Helvetica, PingFang SC, 微软雅黑, Tahoma, Arial, sans-serif; white-space: normal; background-color: rgb(255, 255, 255);">parent：</p><table class="wcn_c_table" cellpadding="0" cellspacing="0" width="760"><tbody style="margin: 0px !important; padding: 0px !important; border-radius: 0px !important; background: none !important; border: 0px !important; inset: auto !important; float: none !important; line-height: 1.1em !important; outline: 0px !important; overflow: visible !important; position: static !important; vertical-align: baseline !important; width: auto !important; box-sizing: content-box !important; min-height: auto !important;"><tr style="margin: 0px !important; padding: 0px !important; border-radius: 0px !important; background: none !important; border: 0px !important; inset: auto !important; float: none !important; line-height: 1.1em !important; outline: 0px !important; overflow: visible !important; position: static !important; vertical-align: baseline !important; width: auto !important; box-sizing: content-box !important; min-height: auto !important;" class="firstRow"><td class="gutter" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); margin: 0px !important; border-radius: 4px 0px 0px 4px !important; background: none !important; inset: auto !important; float: none !important; line-height: 1.1em !important; outline: 0px !important; overflow: visible !important; position: static !important; vertical-align: baseline !important; box-sizing: content-box !important; min-height: auto !important; color: rgb(175, 175, 175) !important; user-select: none !important;" width="NaN"><p class="line number1 index0 alt2" style="margin-top: 15px; margin-bottom: 15px; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); line-height: 1.5em; border-radius: 8px; font-size: 16px; color: rgb(61, 70, 77); box-sizing: border-box; padding-right: 0.5em !important; padding-left: 1em !important; border-left: 3px solid rgb(67, 90, 95) !important; white-space: pre-wrap !important; text-align: right !important;">1</p><p class="line number2 index1 alt1" style="margin-top: 15px; margin-bottom: 15px; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); line-height: 1.5em; border-radius: 8px; font-size: 16px; color: rgb(61, 70, 77); box-sizing: border-box; padding-right: 0.5em !important; padding-left: 1em !important; border-left: 3px solid rgb(67, 90, 95) !important; white-space: pre-wrap !important; text-align: right !important;">2</p><p class="line number3 index2 alt2" style="margin-top: 15px; margin-bottom: 15px; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); line-height: 1.5em; border-radius: 8px; font-size: 16px; color: rgb(61, 70, 77); box-sizing: border-box; padding-right: 0.5em !important; padding-left: 1em !important; border-left: 3px solid rgb(67, 90, 95) !important; white-space: pre-wrap !important; text-align: right !important;">3</p><p class="line number4 index3 alt1" style="margin-top: 15px; margin-bottom: 15px; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); line-height: 1.5em; border-radius: 8px; font-size: 16px; color: rgb(61, 70, 77); box-sizing: border-box; padding-right: 0.5em !important; padding-left: 1em !important; border-left: 3px solid rgb(67, 90, 95) !important; white-space: pre-wrap !important; text-align: right !important;">4</p></td><td class="code" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); word-break: break-all; margin: 0px !important; border-radius: 0px !important; background: none !important; inset: auto !important; float: none !important; line-height: 1.1em !important; outline: 0px !important; overflow: visible !important; position: static !important; vertical-align: baseline !important; box-sizing: content-box !important; min-height: auto !important;" width="719"><p class="line number1 index0 alt2" style="margin-top: 15px; margin-bottom: 15px; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); line-height: 1.5em; border-radius: 8px; font-size: 16px; color: rgb(61, 70, 77); box-sizing: border-box; padding-right: 1em !important; padding-left: 1em !important; border-left: 3px solid rgb(67, 90, 95) !important; white-space: pre-wrap !important;"><code class="php plain" style="padding: 2px 4px; font-size: 13px; color: rgb(199, 37, 78); background-color: rgb(249, 242, 244); border-radius: 4px; font-family: Monaco, Menlo, Consolas, Courier New, monospace; margin: 0px !important; background-image: none !important; background-position: initial !important; background-size: initial !important; background-repeat: initial !important; background-attachment: initial !important; background-origin: initial !important; background-clip: initial !important; border: 0px !important; inset: auto !important; float: none !important; line-height: 1.5em !important; outline: 0px !important; overflow: visible !important; position: static !important; vertical-align: baseline !important; width: auto !important; box-sizing: content-box !important; min-height: auto !important;"><p #caption>parent works!{{</code><code class="php functions" style="padding: 2px 4px; font-size: 13px; color: rgb(199, 37, 78); background-color: rgb(249, 242, 244); border-radius: 4px; font-family: Monaco, Menlo, Consolas, Courier New, monospace; margin: 0px !important; background-image: none !important; background-position: initial !important; background-size: initial !important; background-repeat: initial !important; background-attachment: initial !important; background-origin: initial !important; background-clip: initial !important; border: 0px !important; inset: auto !important; float: none !important; line-height: 1.5em !important; outline: 0px !important; overflow: visible !important; position: static !important; vertical-align: baseline !important; width: auto !important; box-sizing: content-box !important; min-height: auto !important;">count</code><code class="php plain" style="padding: 2px 4px; font-size: 13px; color: rgb(199, 37, 78); background-color: rgb(249, 242, 244); border-radius: 4px; font-family: Monaco, Menlo, Consolas, Courier New, monospace; margin: 0px !important; background-image: none !important; background-position: initial !important; background-size: initial !important; background-repeat: initial !important; background-attachment: initial !important; background-origin: initial !important; background-clip: initial !important; border: 0px !important; inset: auto !important; float: none !important; line-height: 1.5em !important; outline: 0px !important; overflow: visible !important; position: static !important; vertical-align: baseline !important; width: auto !important; box-sizing: content-box !important; min-height: auto !important;">}}</p></code></p><p class="line number2 index1 alt1" style="margin-top: 15px; margin-bottom: 15px; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); line-height: 1.5em; border-radius: 8px; font-size: 16px; color: rgb(61, 70, 77); box-sizing: border-box; padding-right: 1em !important; padding-left: 1em !important; border-left: 3px solid rgb(67, 90, 95) !important; white-space: pre-wrap !important;"><code class="php plain" style="padding: 2px 4px; font-size: 13px; color: rgb(199, 37, 78); background-color: rgb(249, 242, 244); border-radius: 4px; font-family: Monaco, Menlo, Consolas, Courier New, monospace; margin: 0px !important; background-image: none !important; background-position: initial !important; background-size: initial !important; background-repeat: initial !important; background-attachment: initial !important; background-origin: initial !important; background-clip: initial !important; border: 0px !important; inset: auto !important; float: none !important; line-height: 1.5em !important; outline: 0px !important; overflow: visible !important; position: static !important; vertical-align: baseline !important; width: auto !important; box-sizing: content-box !important; min-height: auto !important;"><p #caption>第一个：{{</code><code class="php functions" style="padding: 2px 4px; font-size: 13px; color: rgb(199, 37, 78); background-color: rgb(249, 242, 244); border-radius: 4px; font-family: Monaco, Menlo, Consolas, Courier New, monospace; margin: 0px !important; background-image: none !important; background-position: initial !important; background-size: initial !important; background-repeat: initial !important; background-attachment: initial !important; background-origin: initial !important; background-clip: initial !important; border: 0px !important; inset: auto !important; float: none !important; line-height: 1.5em !important; outline: 0px !important; overflow: visible !important; position: static !important; vertical-align: baseline !important; width: auto !important; box-sizing: content-box !important; min-height: auto !important;">count</code><code class="php plain" style="padding: 2px 4px; font-size: 13px; color: rgb(199, 37, 78); background-color: rgb(249, 242, 244); border-radius: 4px; font-family: Monaco, Menlo, Consolas, Courier New, monospace; margin: 0px !important; background-image: none !important; background-position: initial !important; background-size: initial !important; background-repeat: initial !important; background-attachment: initial !important; background-origin: initial !important; background-clip: initial !important; border: 0px !important; inset: auto !important; float: none !important; line-height: 1.5em !important; outline: 0px !important; overflow: visible !important; position: static !important; vertical-align: baseline !important; width: auto !important; box-sizing: content-box !important; min-height: auto !important;">}}</p></code></p><p class="line number3 index2 alt2" style="margin-top: 15px; margin-bottom: 15px; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); line-height: 1.5em; border-radius: 8px; font-size: 16px; color: rgb(61, 70, 77); box-sizing: border-box; padding-right: 1em !important; padding-left: 1em !important; border-left: 3px solid rgb(67, 90, 95) !important; white-space: pre-wrap !important;"><code class="php plain" style="padding: 2px 4px; font-size: 13px; color: rgb(199, 37, 78); background-color: rgb(249, 242, 244); border-radius: 4px; font-family: Monaco, Menlo, Consolas, Courier New, monospace; margin: 0px !important; background-image: none !important; background-position: initial !important; background-size: initial !important; background-repeat: initial !important; background-attachment: initial !important; background-origin: initial !important; background-clip: initial !important; border: 0px !important; inset: auto !important; float: none !important; line-height: 1.5em !important; outline: 0px !important; overflow: visible !important; position: static !important; vertical-align: baseline !important; width: auto !important; box-sizing: content-box !important; min-height: auto !important;"><span </code><code class="php keyword" style="padding: 2px 4px; font-size: 13px; color: rgb(199, 37, 78); background-color: rgb(249, 242, 244); border-radius: 4px; font-family: Monaco, Menlo, Consolas, Courier New, monospace; margin: 0px !important; background-image: none !important; background-position: initial !important; background-size: initial !important; background-repeat: initial !important; background-attachment: initial !important; background-origin: initial !important; background-clip: initial !important; border: 0px !important; inset: auto !important; float: none !important; line-height: 1.5em !important; outline: 0px !important; overflow: visible !important; position: static !important; vertical-align: baseline !important; width: auto !important; box-sizing: content-box !important; font-weight: bold !important; min-height: auto !important;">class</code><code class="php plain" style="padding: 2px 4px; font-size: 13px; color: rgb(199, 37, 78); background-color: rgb(249, 242, 244); border-radius: 4px; font-family: Monaco, Menlo, Consolas, Courier New, monospace; margin: 0px !important; background-image: none !important; background-position: initial !important; background-size: initial !important; background-repeat: initial !important; background-attachment: initial !important; background-origin: initial !important; background-clip: initial !important; border: 0px !important; inset: auto !important; float: none !important; line-height: 1.5em !important; outline: 0px !important; overflow: visible !important; position: static !important; vertical-align: baseline !important; width: auto !important; box-sizing: content-box !important; min-height: auto !important;">=</code><code class="php string" style="padding: 2px 4px; font-size: 13px; color: rgb(199, 37, 78); background-color: rgb(249, 242, 244); border-radius: 4px; font-family: Monaco, Menlo, Consolas, Courier New, monospace; margin: 0px !important; background-image: none !important; background-position: initial !important; background-size: initial !important; background-repeat: initial !important; background-attachment: initial !important; background-origin: initial !important; background-clip: initial !important; border: 0px !important; inset: auto !important; float: none !important; line-height: 1.5em !important; outline: 0px !important; overflow: visible !important; position: static !important; vertical-align: baseline !important; width: auto !important; box-sizing: content-box !important; min-height: auto !important;">red-font</code><code class="php plain" style="padding: 2px 4px; font-size: 13px; color: rgb(199, 37, 78); background-color: rgb(249, 242, 244); border-radius: 4px; font-family: Monaco, Menlo, Consolas, Courier New, monospace; margin: 0px !important; background-image: none !important; background-position: initial !important; background-size: initial !important; background-repeat: initial !important; background-attachment: initial !important; background-origin: initial !important; background-clip: initial !important; border: 0px !important; inset: auto !important; float: none !important; line-height: 1.5em !important; outline: 0px !important; overflow: visible !important; position: static !important; vertical-align: baseline !important; width: auto !important; box-sizing: content-box !important; min-height: auto !important;">>parent</span></code></p><p class="line number4 index3 alt1" style="margin-top: 15px; margin-bottom: 15px; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); line-height: 1.5em; border-radius: 8px; font-size: 16px; color: rgb(61, 70, 77); box-sizing: border-box; padding-right: 1em !important; padding-left: 1em !important; border-left: 3px solid rgb(67, 90, 95) !important; white-space: pre-wrap !important;"><code class="php plain" style="padding: 2px 4px; font-size: 13px; color: rgb(199, 37, 78); background-color: rgb(249, 242, 244); border-radius: 4px; font-family: Monaco, Menlo, Consolas, Courier New, monospace; margin: 0px !important; background-image: none !important; background-position: initial !important; background-size: initial !important; background-repeat: initial !important; background-attachment: initial !important; background-origin: initial !important; background-clip: initial !important; border: 0px !important; inset: auto !important; float: none !important; line-height: 1.5em !important; outline: 0px !important; overflow: visible !important; position: static !important; vertical-align: baseline !important; width: auto !important; box-sizing: content-box !important; min-height: auto !important;"><app-child></app-child></code></p></td></tr></tbody></table><p style="margin-top: 15px; margin-bottom: 15px; padding: 0px 0px 0px 10px; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); color: rgb(61, 70, 77); box-sizing: border-box; border-radius: 8px; font-family: Helvetica Neue, Helvetica, PingFang SC, 微软雅黑, Tahoma, Arial, sans-serif; white-space: normal; background-color: rgb(255, 255, 255);">child：</p><table class="wcn_c_table" cellpadding="0" cellspacing="0" width="760"><tbody style="margin: 0px !important; padding: 0px !important; border-radius: 0px !important; background: none !important; border: 0px !important; inset: auto !important; float: none !important; line-height: 1.1em !important; outline: 0px !important; overflow: visible !important; position: static !important; vertical-align: baseline !important; width: auto !important; box-sizing: content-box !important; min-height: auto !important;"><tr style="margin: 0px !important; padding: 0px !important; border-radius: 0px !important; background: none !important; border: 0px !important; inset: auto !important; float: none !important; line-height: 1.1em !important; outline: 0px !important; overflow: visible !important; position: static !important; vertical-align: baseline !important; width: auto !important; box-sizing: content-box !important; min-height: auto !important;" class="firstRow"><td class="gutter" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); margin: 0px !important; border-radius: 4px 0px 0px 4px !important; background: none !important; inset: auto !important; float: none !important; line-height: 1.1em !important; outline: 0px !important; overflow: visible !important; position: static !important; vertical-align: baseline !important; box-sizing: content-box !important; min-height: auto !important; color: rgb(175, 175, 175) !important; user-select: none !important;" width="NaN"><p class="line number1 index0 alt2" style="margin-top: 15px; margin-bottom: 15px; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); line-height: 1.5em; border-radius: 8px; font-size: 16px; color: rgb(61, 70, 77); box-sizing: border-box; padding-right: 0.5em !important; padding-left: 1em !important; border-left: 3px solid rgb(67, 90, 95) !important; white-space: pre-wrap !important; text-align: right !important;">1</p><p class="line number2 index1 alt1" style="margin-top: 15px; margin-bottom: 15px; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); line-height: 1.5em; border-radius: 8px; font-size: 16px; color: rgb(61, 70, 77); box-sizing: border-box; padding-right: 0.5em !important; padding-left: 1em !important; border-left: 3px solid rgb(67, 90, 95) !important; white-space: pre-wrap !important; text-align: right !important;">2</p><p class="line number3 index2 alt2" style="margin-top: 15px; margin-bottom: 15px; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); line-height: 1.5em; border-radius: 8px; font-size: 16px; color: rgb(61, 70, 77); box-sizing: border-box; padding-right: 0.5em !important; padding-left: 1em !important; border-left: 3px solid rgb(67, 90, 95) !important; white-space: pre-wrap !important; text-align: right !important;">3</p><p class="line number4 index3 alt1" style="margin-top: 15px; margin-bottom: 15px; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); line-height: 1.5em; border-radius: 8px; font-size: 16px; color: rgb(61, 70, 77); box-sizing: border-box; padding-right: 0.5em !important; padding-left: 1em !important; border-left: 3px solid rgb(67, 90, 95) !important; white-space: pre-wrap !important; text-align: right !important;">4</p></td><td class="code" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); word-break: break-all; margin: 0px !important; border-radius: 0px !important; background: none !important; inset: auto !important; float: none !important; line-height: 1.1em !important; outline: 0px !important; overflow: visible !important; position: static !important; vertical-align: baseline !important; box-sizing: content-box !important; min-height: auto !important;" width="719"><p class="line number1 index0 alt2" style="margin-top: 15px; margin-bottom: 15px; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); line-height: 1.5em; border-radius: 8px; font-size: 16px; color: rgb(61, 70, 77); box-sizing: border-box; padding-right: 1em !important; padding-left: 1em !important; border-left: 3px solid rgb(67, 90, 95) !important; white-space: pre-wrap !important;"><code class="php plain" style="padding: 2px 4px; font-size: 13px; color: rgb(199, 37, 78); background-color: rgb(249, 242, 244); border-radius: 4px; font-family: Monaco, Menlo, Consolas, Courier New, monospace; margin: 0px !important; background-image: none !important; background-position: initial !important; background-size: initial !important; background-repeat: initial !important; background-attachment: initial !important; background-origin: initial !important; background-clip: initial !important; border: 0px !important; inset: auto !important; float: none !important; line-height: 1.5em !important; outline: 0px !important; overflow: visible !important; position: static !important; vertical-align: baseline !important; width: auto !important; box-sizing: content-box !important; min-height: auto !important;"><div style=</code><code class="php string" style="padding: 2px 4px; font-size: 13px; color: rgb(199, 37, 78); background-color: rgb(249, 242, 244); border-radius: 4px; font-family: Monaco, Menlo, Consolas, Courier New, monospace; margin: 0px !important; background-image: none !important; background-position: initial !important; background-size: initial !important; background-repeat: initial !important; background-attachment: initial !important; background-origin: initial !important; background-clip: initial !important; border: 0px !important; inset: auto !important; float: none !important; line-height: 1.5em !important; outline: 0px !important; overflow: visible !important; position: static !important; vertical-align: baseline !important; width: auto !important; box-sizing: content-box !important; min-height: auto !important;">border: 1px solid green;</code><code class="php plain" style="padding: 2px 4px; font-size: 13px; color: rgb(199, 37, 78); background-color: rgb(249, 242, 244); border-radius: 4px; font-family: Monaco, Menlo, Consolas, Courier New, monospace; margin: 0px !important; background-image: none !important; background-position: initial !important; background-size: initial !important; background-repeat: initial !important; background-attachment: initial !important; background-origin: initial !important; background-clip: initial !important; border: 0px !important; inset: auto !important; float: none !important; line-height: 1.5em !important; outline: 0px !important; overflow: visible !important; position: static !important; vertical-align: baseline !important; width: auto !important; box-sizing: content-box !important; min-height: auto !important;">></code></p><p class="line number2 index1 alt1" style="margin-top: 15px; margin-bottom: 15px; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); line-height: 1.5em; border-radius: 8px; font-size: 16px; color: rgb(61, 70, 77); box-sizing: border-box; padding-right: 1em !important; padding-left: 1em !important; border-left: 3px solid rgb(67, 90, 95) !important; white-space: pre-wrap !important;"><code class="php spaces" style="padding: 2px 4px; font-size: 13px; color: rgb(199, 37, 78); background-color: rgb(249, 242, 244); border-radius: 4px; font-family: Monaco, Menlo, Consolas, Courier New, monospace; margin: 0px !important; background-image: none !important; background-position: initial !important; background-size: initial !important; background-repeat: initial !important; background-attachment: initial !important; background-origin: initial !important; background-clip: initial !important; border: 0px !important; inset: auto !important; float: none !important; line-height: 1.5em !important; outline: 0px !important; overflow: visible !important; position: static !important; vertical-align: baseline !important; width: auto !important; box-sizing: content-box !important; min-height: auto !important;"> </code><code class="php plain" style="padding: 2px 4px; font-size: 13px; color: rgb(199, 37, 78); background-color: rgb(249, 242, 244); border-radius: 4px; font-family: Monaco, Menlo, Consolas, Courier New, monospace; margin: 0px !important; background-image: none !important; background-position: initial !important; background-size: initial !important; background-repeat: initial !important; background-attachment: initial !important; background-origin: initial !important; background-clip: initial !important; border: 0px !important; inset: auto !important; float: none !important; line-height: 1.5em !important; outline: 0px !important; overflow: visible !important; position: static !important; vertical-align: baseline !important; width: auto !important; box-sizing: content-box !important; min-height: auto !important;"><p>child works!</p></code></p><p class="line number3 index2 alt2" style="margin-top: 15px; margin-bottom: 15px; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); line-height: 1.5em; border-radius: 8px; font-size: 16px; color: rgb(61, 70, 77); box-sizing: border-box; padding-right: 1em !important; padding-left: 1em !important; border-left: 3px solid rgb(67, 90, 95) !important; white-space: pre-wrap !important;"><code class="php spaces" style="padding: 2px 4px; font-size: 13px; color: rgb(199, 37, 78); background-color: rgb(249, 242, 244); border-radius: 4px; font-family: Monaco, Menlo, Consolas, Courier New, monospace; margin: 0px !important; background-image: none !important; background-position: initial !important; background-size: initial !important; background-repeat: initial !important; background-attachment: initial !important; background-origin: initial !important; background-clip: initial !important; border: 0px !important; inset: auto !important; float: none !important; line-height: 1.5em !important; outline: 0px !important; overflow: visible !important; position: static !important; vertical-align: baseline !important; width: auto !important; box-sizing: content-box !important; min-height: auto !important;"> </code><code class="php plain" style="padding: 2px 4px; font-size: 13px; color: rgb(199, 37, 78); background-color: rgb(249, 242, 244); border-radius: 4px; font-family: Monaco, Menlo, Consolas, Courier New, monospace; margin: 0px !important; background-image: none !important; background-position: initial !important; background-size: initial !important; background-repeat: initial !important; background-attachment: initial !important; background-origin: initial !important; background-clip: initial !important; border: 0px !important; inset: auto !important; float: none !important; line-height: 1.5em !important; outline: 0px !important; overflow: visible !important; position: static !important; vertical-align: baseline !important; width: auto !important; box-sizing: content-box !important; min-height: auto !important;"><span </code><code class="php keyword" style="padding: 2px 4px; font-size: 13px; color: rgb(199, 37, 78); background-color: rgb(249, 242, 244); border-radius: 4px; font-family: Monaco, Menlo, Consolas, Courier New, monospace; margin: 0px !important; background-image: none !important; background-position: initial !important; background-size: initial !important; background-repeat: initial !important; background-attachment: initial !important; background-origin: initial !important; background-clip: initial !important; border: 0px !important; inset: auto !important; float: none !important; line-height: 1.5em !important; outline: 0px !important; overflow: visible !important; position: static !important; vertical-align: baseline !important; width: auto !important; box-sizing: content-box !important; font-weight: bold !important; min-height: auto !important;">class</code><code class="php plain" style="padding: 2px 4px; font-size: 13px; color: rgb(199, 37, 78); background-color: rgb(249, 242, 244); border-radius: 4px; font-family: Monaco, Menlo, Consolas, Courier New, monospace; margin: 0px !important; background-image: none !important; background-position: initial !important; background-size: initial !important; background-repeat: initial !important; background-attachment: initial !important; background-origin: initial !important; background-clip: initial !important; border: 0px !important; inset: auto !important; float: none !important; line-height: 1.5em !important; outline: 0px !important; overflow: visible !important; position: static !important; vertical-align: baseline !important; width: auto !important; box-sizing: content-box !important; min-height: auto !important;">=</code><code class="php string" style="padding: 2px 4px; font-size: 13px; color: rgb(199, 37, 78); background-color: rgb(249, 242, 244); border-radius: 4px; font-family: Monaco, Menlo, Consolas, Courier New, monospace; margin: 0px !important; background-image: none !important; background-position: initial !important; background-size: initial !important; background-repeat: initial !important; background-attachment: initial !important; background-origin: initial !important; background-clip: initial !important; border: 0px !important; inset: auto !important; float: none !important; line-height: 1.5em !important; outline: 0px !important; overflow: visible !important; position: static !important; vertical-align: baseline !important; width: auto !important; box-sizing: content-box !important; min-height: auto !important;">red-font</code><code class="php plain" style="padding: 2px 4px; font-size: 13px; color: rgb(199, 37, 78); background-color: rgb(249, 242, 244); border-radius: 4px; font-family: Monaco, Menlo, Consolas, Courier New, monospace; margin: 0px !important; background-image: none !important; background-position: initial !important; background-size: initial !important; background-repeat: initial !important; background-attachment: initial !important; background-origin: initial !important; background-clip: initial !important; border: 0px !important; inset: auto !important; float: none !important; line-height: 1.5em !important; outline: 0px !important; overflow: visible !important; position: static !important; vertical-align: baseline !important; width: auto !important; box-sizing: content-box !important; min-height: auto !important;">>Child</span></code></p><p class="line number4 index3 alt1" style="margin-top: 15px; margin-bottom: 15px; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); line-height: 1.5em; border-radius: 8px; font-size: 16px; color: rgb(61, 70, 77); box-sizing: border-box; padding-right: 1em !important; padding-left: 1em !important; border-left: 3px solid rgb(67, 90, 95) !important; white-space: pre-wrap !important;"><code class="php plain" style="padding: 2px 4px; font-size: 13px; color: rgb(199, 37, 78); background-color: rgb(249, 242, 244); border-radius: 4px; font-family: Monaco, Menlo, Consolas, Courier New, monospace; margin: 0px !important; background-image: none !important; background-position: initial !important; background-size: initial !important; background-repeat: initial !important; background-attachment: initial !important; background-origin: initial !important; background-clip: initial !important; border: 0px !important; inset: auto !important; float: none !important; line-height: 1.5em !important; outline: 0px !important; overflow: visible !important; position: static !important; vertical-align: baseline !important; width: auto !important; box-sizing: content-box !important; min-height: auto !important;"></div></code></p></td></tr></tbody></table><table class="wcn_c_table" cellpadding="0" cellspacing="0" width="760"><tbody style="margin: 0px !important; padding: 0px !important; border-radius: 0px !important; background: none !important; border: 0px !important; inset: auto !important; float: none !important; line-height: 1.1em !important; outline: 0px !important; overflow: visible !important; position: static !important; vertical-align: baseline !important; width: auto !important; box-sizing: content-box !important; min-height: auto !important;"><tr style="margin: 0px !important; padding: 0px !important; border-radius: 0px !important; background: none !important; border: 0px !important; inset: auto !important; float: none !important; line-height: 1.1em !important; outline: 0px !important; overflow: visible !important; position: static !important; vertical-align: baseline !important; width: auto !important; box-sizing: content-box !important; min-height: auto !important;" class="firstRow"><td class="gutter" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); margin: 0px !important; border-radius: 4px 0px 0px 4px !important; background: none !important; inset: auto !important; float: none !important; line-height: 1.1em !important; outline: 0px !important; overflow: visible !important; position: static !important; vertical-align: baseline !important; box-sizing: content-box !important; min-height: auto !important; color: rgb(175, 175, 175) !important; user-select: none !important;" width="NaN"><p class="line number1 index0 alt2" style="margin-top: 15px; margin-bottom: 15px; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); line-height: 1.5em; border-radius: 8px; font-size: 16px; color: rgb(61, 70, 77); box-sizing: border-box; padding-right: 0.5em !important; padding-left: 1em !important; border-left: 3px solid rgb(67, 90, 95) !important; white-space: pre-wrap !important; text-align: right !important;">1</p><p class="line number2 index1 alt1" style="margin-top: 15px; margin-bottom: 15px; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); line-height: 1.5em; border-radius: 8px; font-size: 16px; color: rgb(61, 70, 77); box-sizing: border-box; padding-right: 0.5em !important; padding-left: 1em !important; border-left: 3px solid rgb(67, 90, 95) !important; white-space: pre-wrap !important; text-align: right !important;">2</p><p class="line number3 index2 alt2" style="margin-top: 15px; margin-bottom: 15px; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); line-height: 1.5em; border-radius: 8px; font-size: 16px; color: rgb(61, 70, 77); box-sizing: border-box; padding-right: 0.5em !important; padding-left: 1em !important; border-left: 3px solid rgb(67, 90, 95) !important; white-space: pre-wrap !important; text-align: right !important;">3</p><p class="line number4 index3 alt1" style="margin-top: 15px; margin-bottom: 15px; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); line-height: 1.5em; border-radius: 8px; font-size: 16px; color: rgb(61, 70, 77); box-sizing: border-box; padding-right: 0.5em !important; padding-left: 1em !important; border-left: 3px solid rgb(67, 90, 95) !important; white-space: pre-wrap !important; text-align: right !important;">4</p><p class="line number5 index4 alt2" style="margin-top: 15px; margin-bottom: 15px; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); line-height: 1.5em; border-radius: 8px; font-size: 16px; color: rgb(61, 70, 77); box-sizing: border-box; padding-right: 0.5em !important; padding-left: 1em !important; border-left: 3px solid rgb(67, 90, 95) !important; white-space: pre-wrap !important; text-align: right !important;">5</p><p class="line number6 index5 alt1" style="margin-top: 15px; margin-bottom: 15px; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); line-height: 1.5em; border-radius: 8px; font-size: 16px; color: rgb(61, 70, 77); box-sizing: border-box; padding-right: 0.5em !important; padding-left: 1em !important; border-left: 3px solid rgb(67, 90, 95) !important; white-space: pre-wrap !important; text-align: right !important;">6</p></td><td class="code" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); word-break: break-all; margin: 0px !important; border-radius: 0px !important; background: none !important; inset: auto !important; float: none !important; line-height: 1.1em !important; outline: 0px !important; overflow: visible !important; position: static !important; vertical-align: baseline !important; box-sizing: content-box !important; min-height: auto !important;" width="719"><p class="line number1 index0 alt2" style="margin-top: 15px; margin-bottom: 15px; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); line-height: 1.5em; border-radius: 8px; font-size: 16px; color: rgb(61, 70, 77); box-sizing: border-box; padding-right: 1em !important; padding-left: 1em !important; border-left: 3px solid rgb(67, 90, 95) !important; white-space: pre-wrap !important;"><code class="php plain" style="padding: 2px 4px; font-size: 13px; color: rgb(199, 37, 78); background-color: rgb(249, 242, 244); border-radius: 4px; font-family: Monaco, Menlo, Consolas, Courier New, monospace; margin: 0px !important; background-image: none !important; background-position: initial !important; background-size: initial !important; background-repeat: initial !important; background-attachment: initial !important; background-origin: initial !important; background-clip: initial !important; border: 0px !important; inset: auto !important; float: none !important; line-height: 1.5em !important; outline: 0px !important; overflow: visible !important; position: static !important; vertical-align: baseline !important; width: auto !important; box-sizing: content-box !important; min-height: auto !important;">p{</code></p><p class="line number2 index1 alt1" style="margin-top: 15px; margin-bottom: 15px; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); line-height: 1.5em; border-radius: 8px; font-size: 16px; color: rgb(61, 70, 77); box-sizing: border-box; padding-right: 1em !important; padding-left: 1em !important; border-left: 3px solid rgb(67, 90, 95) !important; white-space: pre-wrap !important;"><code class="php spaces" style="padding: 2px 4px; font-size: 13px; color: rgb(199, 37, 78); background-color: rgb(249, 242, 244); border-radius: 4px; font-family: Monaco, Menlo, Consolas, Courier New, monospace; margin: 0px !important; background-image: none !important; background-position: initial !important; background-size: initial !important; background-repeat: initial !important; background-attachment: initial !important; background-origin: initial !important; background-clip: initial !important; border: 0px !important; inset: auto !important; float: none !important; line-height: 1.5em !important; outline: 0px !important; overflow: visible !important; position: static !important; vertical-align: baseline !important; width: auto !important; box-sizing: content-box !important; min-height: auto !important;"> </code><code class="php plain" style="padding: 2px 4px; font-size: 13px; color: rgb(199, 37, 78); background-color: rgb(249, 242, 244); border-radius: 4px; font-family: Monaco, Menlo, Consolas, Courier New, monospace; margin: 0px !important; background-image: none !important; background-position: initial !important; background-size: initial !important; background-repeat: initial !important; background-attachment: initial !important; background-origin: initial !important; background-clip: initial !important; border: 0px !important; inset: auto !important; float: none !important; line-height: 1.5em !important; outline: 0px !important; overflow: visible !important; position: static !important; vertical-align: baseline !important; width: auto !important; box-sizing: content-box !important; min-height: auto !important;">color: green;</code></p><p class="line number3 index2 alt2" style="margin-top: 15px; margin-bottom: 15px; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); line-height: 1.5em; border-radius: 8px; font-size: 16px; color: rgb(61, 70, 77); box-sizing: border-box; padding-right: 1em !important; padding-left: 1em !important; border-left: 3px solid rgb(67, 90, 95) !important; white-space: pre-wrap !important;"><code class="php plain" style="padding: 2px 4px; font-size: 13px; color: rgb(199, 37, 78); background-color: rgb(249, 242, 244); border-radius: 4px; font-family: Monaco, Menlo, Consolas, Courier New, monospace; margin: 0px !important; background-image: none !important; background-position: initial !important; background-size: initial !important; background-repeat: initial !important; background-attachment: initial !important; background-origin: initial !important; background-clip: initial !important; border: 0px !important; inset: auto !important; float: none !important; line-height: 1.5em !important; outline: 0px !important; overflow: visible !important; position: static !important; vertical-align: baseline !important; width: auto !important; box-sizing: content-box !important; min-height: auto !important;">}</code></p><p class="line number4 index3 alt1" style="margin-top: 15px; margin-bottom: 15px; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); line-height: 1.5em; border-radius: 8px; font-size: 16px; color: rgb(61, 70, 77); box-sizing: border-box; padding-right: 1em !important; padding-left: 1em !important; border-left: 3px solid rgb(67, 90, 95) !important; white-space: pre-wrap !important;"><code class="php plain" style="padding: 2px 4px; font-size: 13px; color: rgb(199, 37, 78); background-color: rgb(249, 242, 244); border-radius: 4px; font-family: Monaco, Menlo, Consolas, Courier New, monospace; margin: 0px !important; background-image: none !important; background-position: initial !important; background-size: initial !important; background-repeat: initial !important; background-attachment: initial !important; background-origin: initial !important; background-clip: initial !important; border: 0px !important; inset: auto !important; float: none !important; line-height: 1.5em !important; outline: 0px !important; overflow: visible !important; position: static !important; vertical-align: baseline !important; width: auto !important; box-sizing: content-box !important; min-height: auto !important;">.red-font {</code></p><p class="line number5 index4 alt2" style="margin-top: 15px; margin-bottom: 15px; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); line-height: 1.5em; border-radius: 8px; font-size: 16px; color: rgb(61, 70, 77); box-sizing: border-box; padding-right: 1em !important; padding-left: 1em !important; border-left: 3px solid rgb(67, 90, 95) !important; white-space: pre-wrap !important;"><code class="php spaces" style="padding: 2px 4px; font-size: 13px; color: rgb(199, 37, 78); background-color: rgb(249, 242, 244); border-radius: 4px; font-family: Monaco, Menlo, Consolas, Courier New, monospace; margin: 0px !important; background-image: none !important; background-position: initial !important; background-size: initial !important; background-repeat: initial !important; background-attachment: initial !important; background-origin: initial !important; background-clip: initial !important; border: 0px !important; inset: auto !important; float: none !important; line-height: 1.5em !important; outline: 0px !important; overflow: visible !important; position: static !important; vertical-align: baseline !important; width: auto !important; box-sizing: content-box !important; min-height: auto !important;"> </code><code class="php plain" style="padding: 2px 4px; font-size: 13px; color: rgb(199, 37, 78); background-color: rgb(249, 242, 244); border-radius: 4px; font-family: Monaco, Menlo, Consolas, Courier New, monospace; margin: 0px !important; background-image: none !important; background-position: initial !important; background-size: initial !important; background-repeat: initial !important; background-attachment: initial !important; background-origin: initial !important; background-clip: initial !important; border: 0px !important; inset: auto !important; float: none !important; line-height: 1.5em !important; outline: 0px !important; overflow: visible !important; position: static !important; vertical-align: baseline !important; width: auto !important; box-sizing: content-box !important; min-height: auto !important;">color: red;</code></p><p class="line number6 index5 alt1" style="margin-top: 15px; margin-bottom: 15px; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); line-height: 1.5em; border-radius: 8px; font-size: 16px; color: rgb(61, 70, 77); box-sizing: border-box; padding-right: 1em !important; padding-left: 1em !important; border-left: 3px solid rgb(67, 90, 95) !important; white-space: pre-wrap !important;"><code class="php plain" style="padding: 2px 4px; font-size: 13px; color: rgb(199, 37, 78); background-color: rgb(249, 242, 244); border-radius: 4px; font-family: Monaco, Menlo, Consolas, Courier New, monospace; margin: 0px !important; background-image: none !important; background-position: initial !important; background-size: initial !important; background-repeat: initial !important; background-attachment: initial !important; background-origin: initial !important; background-clip: initial !important; border: 0px !important; inset: auto !important; float: none !important; line-height: 1.5em !important; outline: 0px !important; overflow: visible !important; position: static !important; vertical-align: baseline !important; width: auto !important; box-sizing: content-box !important; min-height: auto !important;">}</code></p></td></tr></tbody></table><table class="wcn_c_table" cellpadding="0" cellspacing="0" width="760"><tbody style="margin: 0px !important; padding: 0px !important; border-radius: 0px !important; background: none !important; border: 0px !important; inset: auto !important; float: none !important; line-height: 1.1em !important; outline: 0px !important; overflow: visible !important; position: static !important; vertical-align: baseline !important; width: auto !important; box-sizing: content-box !important; min-height: auto !important;"><tr style="margin: 0px !important; padding: 0px !important; border-radius: 0px !important; background: none !important; border: 0px !important; inset: auto !important; float: none !important; line-height: 1.1em !important; outline: 0px !important; overflow: visible !important; position: static !important; vertical-align: baseline !important; width: auto !important; box-sizing: content-box !important; min-height: auto !important;" class="firstRow"><td class="gutter" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); margin: 0px !important; border-radius: 4px 0px 0px 4px !important; background: none !important; inset: auto !important; float: none !important; line-height: 1.1em !important; outline: 0px !important; overflow: visible !important; position: static !important; vertical-align: baseline !important; box-sizing: content-box !important; min-height: auto !important; color: rgb(175, 175, 175) !important; user-select: none !important;" width="NaN"><p class="line number1 index0 alt2" style="margin-top: 15px; margin-bottom: 15px; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); line-height: 1.5em; border-radius: 8px; font-size: 16px; color: rgb(61, 70, 77); box-sizing: border-box; padding-right: 0.5em !important; padding-left: 1em !important; border-left: 3px solid rgb(67, 90, 95) !important; white-space: pre-wrap !important; text-align: right !important;">1</p><p class="line number2 index1 alt1" style="margin-top: 15px; margin-bottom: 15px; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); line-height: 1.5em; border-radius: 8px; font-size: 16px; color: rgb(61, 70, 77); box-sizing: border-box; padding-right: 0.5em !important; padding-left: 1em !important; border-left: 3px solid rgb(67, 90, 95) !important; white-space: pre-wrap !important; text-align: right !important;">2</p><p class="line number3 index2 alt2" style="margin-top: 15px; margin-bottom: 15px; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); line-height: 1.5em; border-radius: 8px; font-size: 16px; color: rgb(61, 70, 77); box-sizing: border-box; padding-right: 0.5em !important; padding-left: 1em !important; border-left: 3px solid rgb(67, 90, 95) !important; white-space: pre-wrap !important; text-align: right !important;">3</p><p class="line number4 index3 alt1" style="margin-top: 15px; margin-bottom: 15px; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); line-height: 1.5em; border-radius: 8px; font-size: 16px; color: rgb(61, 70, 77); box-sizing: border-box; padding-right: 0.5em !important; padding-left: 1em !important; border-left: 3px solid rgb(67, 90, 95) !important; white-space: pre-wrap !important; text-align: right !important;">4</p><p class="line number5 index4 alt2" style="margin-top: 15px; margin-bottom: 15px; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); line-height: 1.5em; border-radius: 8px; font-size: 16px; color: rgb(61, 70, 77); box-sizing: border-box; padding-right: 0.5em !important; padding-left: 1em !important; border-left: 3px solid rgb(67, 90, 95) !important; white-space: pre-wrap !important; text-align: right !important;">5</p><p class="line number6 index5 alt1" style="margin-top: 15px; margin-bottom: 15px; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); line-height: 1.5em; border-radius: 8px; font-size: 16px; color: rgb(61, 70, 77); box-sizing: border-box; padding-right: 0.5em !important; padding-left: 1em !important; border-left: 3px solid rgb(67, 90, 95) !important; white-space: pre-wrap !important; text-align: right !important;">6</p><p class="line number7 index6 alt2" style="margin-top: 15px; margin-bottom: 15px; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); line-height: 1.5em; border-radius: 8px; font-size: 16px; color: rgb(61, 70, 77); box-sizing: border-box; padding-right: 0.5em !important; padding-left: 1em !important; border-left: 3px solid rgb(67, 90, 95) !important; white-space: pre-wrap !important; text-align: right !important;">7</p><p class="line number8 index7 alt1" style="margin-top: 15px; margin-bottom: 15px; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); line-height: 1.5em; border-radius: 8px; font-size: 16px; color: rgb(61, 70, 77); box-sizing: border-box; padding-right: 0.5em !important; padding-left: 1em !important; border-left: 3px solid rgb(67, 90, 95) !important; white-space: pre-wrap !important; text-align: right !important;">8</p><p class="line number9 index8 alt2" style="margin-top: 15px; margin-bottom: 15px; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); line-height: 1.5em; border-radius: 8px; font-size: 16px; color: rgb(61, 70, 77); box-sizing: border-box; padding-right: 0.5em !important; padding-left: 1em !important; border-left: 3px solid rgb(67, 90, 95) !important; white-space: pre-wrap !important; text-align: right !important;">9</p></td><td class="code" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); word-break: break-all; margin: 0px !important; border-radius: 0px !important; background: none !important; inset: auto !important; float: none !important; line-height: 1.1em !important; outline: 0px !important; overflow: visible !important; position: static !important; vertical-align: baseline !important; box-sizing: content-box !important; min-height: auto !important;" width="719"><p class="line number1 index0 alt2" style="margin-top: 15px; margin-bottom: 15px; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); line-height: 1.5em; border-radius: 8px; font-size: 16px; color: rgb(61, 70, 77); box-sizing: border-box; padding-right: 1em !important; padding-left: 1em !important; border-left: 3px solid rgb(67, 90, 95) !important; white-space: pre-wrap !important;"><code class="php plain" style="padding: 2px 4px; font-size: 13px; color: rgb(199, 37, 78); background-color: rgb(249, 242, 244); border-radius: 4px; font-family: Monaco, Menlo, Consolas, Courier New, monospace; margin: 0px !important; background-image: none !important; background-position: initial !important; background-size: initial !important; background-repeat: initial !important; background-attachment: initial !important; background-origin: initial !important; background-clip: initial !important; border: 0px !important; inset: auto !important; float: none !important; line-height: 1.5em !important; outline: 0px !important; overflow: visible !important; position: static !important; vertical-align: baseline !important; width: auto !important; box-sizing: content-box !important; min-height: auto !important;">@Component({</code></p><p class="line number2 index1 alt1" style="margin-top: 15px; margin-bottom: 15px; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); line-height: 1.5em; border-radius: 8px; font-size: 16px; color: rgb(61, 70, 77); box-sizing: border-box; padding-right: 1em !important; padding-left: 1em !important; border-left: 3px solid rgb(67, 90, 95) !important; white-space: pre-wrap !important;"><code class="php spaces" style="padding: 2px 4px; font-size: 13px; color: rgb(199, 37, 78); background-color: rgb(249, 242, 244); border-radius: 4px; font-family: Monaco, Menlo, Consolas, Courier New, monospace; margin: 0px !important; background-image: none !important; background-position: initial !important; background-size: initial !important; background-repeat: initial !important; background-attachment: initial !important; background-origin: initial !important; background-clip: initial !important; border: 0px !important; inset: auto !important; float: none !important; line-height: 1.5em !important; outline: 0px !important; overflow: visible !important; position: static !important; vertical-align: baseline !important; width: auto !important; box-sizing: content-box !important; min-height: auto !important;"> </code><code class="php plain" style="padding: 2px 4px; font-size: 13px; color: rgb(199, 37, 78); background-color: rgb(249, 242, 244); border-radius: 4px; font-family: Monaco, Menlo, Consolas, Courier New, monospace; margin: 0px !important; background-image: none !important; background-position: initial !important; background-size: initial !important; background-repeat: initial !important; background-attachment: initial !important; background-origin: initial !important; background-clip: initial !important; border: 0px !important; inset: auto !important; float: none !important; line-height: 1.5em !important; outline: 0px !important; overflow: visible !important; position: static !important; vertical-align: baseline !important; width: auto !important; box-sizing: content-box !important; min-height: auto !important;">selector: </code><code class="php string" style="padding: 2px 4px; font-size: 13px; color: rgb(199, 37, 78); background-color: rgb(249, 242, 244); border-radius: 4px; font-family: Monaco, Menlo, Consolas, Courier New, monospace; margin: 0px !important; background-image: none !important; background-position: initial !important; background-size: initial !important; background-repeat: initial !important; background-attachment: initial !important; background-origin: initial !important; background-clip: initial !important; border: 0px !important; inset: auto !important; float: none !important; line-height: 1.5em !important; outline: 0px !important; overflow: visible !important; position: static !important; vertical-align: baseline !important; width: auto !important; box-sizing: content-box !important; min-height: auto !important;">app-child</code><code class="php plain" style="padding: 2px 4px; font-size: 13px; color: rgb(199, 37, 78); background-color: rgb(249, 242, 244); border-radius: 4px; font-family: Monaco, Menlo, Consolas, Courier New, monospace; margin: 0px !important; background-image: none !important; background-position: initial !important; background-size: initial !important; background-repeat: initial !important; background-attachment: initial !important; background-origin: initial !important; background-clip: initial !important; border: 0px !important; inset: auto !important; float: none !important; line-height: 1.5em !important; outline: 0px !important; overflow: visible !important; position: static !important; vertical-align: baseline !important; width: auto !important; box-sizing: content-box !important; min-height: auto !important;">,</code></p><p class="line number3 index2 alt2" style="margin-top: 15px; margin-bottom: 15px; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); line-height: 1.5em; border-radius: 8px; font-size: 16px; color: rgb(61, 70, 77); box-sizing: border-box; padding-right: 1em !important; padding-left: 1em !important; border-left: 3px solid rgb(67, 90, 95) !important; white-space: pre-wrap !important;"><code class="php spaces" style="padding: 2px 4px; font-size: 13px; color: rgb(199, 37, 78); background-color: rgb(249, 242, 244); border-radius: 4px; font-family: Monaco, Menlo, Consolas, Courier New, monospace; margin: 0px !important; background-image: none !important; background-position: initial !important; background-size: initial !important; background-repeat: initial !important; background-attachment: initial !important; background-origin: initial !important; background-clip: initial !important; border: 0px !important; inset: auto !important; float: none !important; line-height: 1.5em !important; outline: 0px !important; overflow: visible !important; position: static !important; vertical-align: baseline !important; width: auto !important; box-sizing: content-box !important; min-height: auto !important;"> </code><code class="php plain" style="padding: 2px 4px; font-size: 13px; color: rgb(199, 37, 78); background-color: rgb(249, 242, 244); border-radius: 4px; font-family: Monaco, Menlo, Consolas, Courier New, monospace; margin: 0px !important; background-image: none !important; background-position: initial !important; background-size: initial !important; background-repeat: initial !important; background-attachment: initial !important; background-origin: initial !important; background-clip: initial !important; border: 0px !important; inset: auto !important; float: none !important; line-height: 1.5em !important; outline: 0px !important; overflow: visible !important; position: static !important; vertical-align: baseline !important; width: auto !important; box-sizing: content-box !important; min-height: auto !important;">templateUrl: </code><code class="php string" style="padding: 2px 4px; font-size: 13px; color: rgb(199, 37, 78); background-color: rgb(249, 242, 244); border-radius: 4px; font-family: Monaco, Menlo, Consolas, Courier New, monospace; margin: 0px !important; background-image: none !important; background-position: initial !important; background-size: initial !important; background-repeat: initial !important; background-attachment: initial !important; background-origin: initial !important; background-clip: initial !important; border: 0px !important; inset: auto !important; float: none !important; line-height: 1.5em !important; outline: 0px !important; overflow: visible !important; position: static !important; vertical-align: baseline !important; width: auto !important; box-sizing: content-box !important; min-height: auto !important;">./child.component.html</code><code class="php plain" style="padding: 2px 4px; font-size: 13px; color: rgb(199, 37, 78); background-color: rgb(249, 242, 244); border-radius: 4px; font-family: Monaco, Menlo, Consolas, Courier New, monospace; margin: 0px !important; background-image: none !important; background-position: initial !important; background-size: initial !important; background-repeat: initial !important; background-attachment: initial !important; background-origin: initial !important; background-clip: initial !important; border: 0px !important; inset: auto !important; float: none !important; line-height: 1.5em !important; outline: 0px !important; overflow: visible !important; position: static !important; vertical-align: baseline !important; width: auto !important; box-sizing: content-box !important; min-height: auto !important;">,</code></p><p class="line number4 index3 alt1" style="margin-top: 15px; margin-bottom: 15px; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); line-height: 1.5em; border-radius: 8px; font-size: 16px; color: rgb(61, 70, 77); box-sizing: border-box; padding-right: 1em !important; padding-left: 1em !important; border-left: 3px solid rgb(67, 90, 95) !important; white-space: pre-wrap !important;"><code class="php spaces" style="padding: 2px 4px; font-size: 13px; color: rgb(199, 37, 78); background-color: rgb(249, 242, 244); border-radius: 4px; font-family: Monaco, Menlo, Consolas, Courier New, monospace; margin: 0px !important; background-image: none !important; background-position: initial !important; background-size: initial !important; background-repeat: initial !important; background-attachment: initial !important; background-origin: initial !important; background-clip: initial !important; border: 0px !important; inset: auto !important; float: none !important; line-height: 1.5em !important; outline: 0px !important; overflow: visible !important; position: static !important; vertical-align: baseline !important; width: auto !important; box-sizing: content-box !important; min-height: auto !important;"> </code><code class="php plain" style="padding: 2px 4px; font-size: 13px; color: rgb(199, 37, 78); background-color: rgb(249, 242, 244); border-radius: 4px; font-family: Monaco, Menlo, Consolas, Courier New, monospace; margin: 0px !important; background-image: none !important; background-position: initial !important; background-size: initial !important; background-repeat: initial !important; background-attachment: initial !important; background-origin: initial !important; background-clip: initial !important; border: 0px !important; inset: auto !important; float: none !important; line-height: 1.5em !important; outline: 0px !important; overflow: visible !important; position: static !important; vertical-align: baseline !important; width: auto !important; box-sizing: content-box !important; min-height: auto !important;">styleUrls: [</code><code class="php string" style="padding: 2px 4px; font-size: 13px; color: rgb(199, 37, 78); background-color: rgb(249, 242, 244); border-radius: 4px; font-family: Monaco, Menlo, Consolas, Courier New, monospace; margin: 0px !important; background-image: none !important; background-position: initial !important; background-size: initial !important; background-repeat: initial !important; background-attachment: initial !important; background-origin: initial !important; background-clip: initial !important; border: 0px !important; inset: auto !important; float: none !important; line-height: 1.5em !important; outline: 0px !important; overflow: visible !important; position: static !important; vertical-align: baseline !important; width: auto !important; box-sizing: content-box !important; min-height: auto !important;">./child.component.scss</code><code class="php plain" style="padding: 2px 4px; font-size: 13px; color: rgb(199, 37, 78); background-color: rgb(249, 242, 244); border-radius: 4px; font-family: Monaco, Menlo, Consolas, Courier New, monospace; margin: 0px !important; background-image: none !important; background-position: initial !important; background-size: initial !important; background-repeat: initial !important; background-attachment: initial !important; background-origin: initial !important; background-clip: initial !important; border: 0px !important; inset: auto !important; float: none !important; line-height: 1.5em !important; outline: 0px !important; overflow: visible !important; position: static !important; vertical-align: baseline !important; width: auto !important; box-sizing: content-box !important; min-height: auto !important;">],</code></p><p class="line number5 index4 alt2" style="margin-top: 15px; margin-bottom: 15px; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); line-height: 1.5em; border-radius: 8px; font-size: 16px; color: rgb(61, 70, 77); box-sizing: border-box; padding-right: 1em !important; padding-left: 1em !important; border-left: 3px solid rgb(67, 90, 95) !important; white-space: pre-wrap !important;"><code class="php spaces" style="padding: 2px 4px; font-size: 13px; color: rgb(199, 37, 78); background-color: rgb(249, 242, 244); border-radius: 4px; font-family: Monaco, Menlo, Consolas, Courier New, monospace; margin: 0px !important; background-image: none !important; background-position: initial !important; background-size: initial !important; background-repeat: initial !important; background-attachment: initial !important; background-origin: initial !important; background-clip: initial !important; border: 0px !important; inset: auto !important; float: none !important; line-height: 1.5em !important; outline: 0px !important; overflow: visible !important; position: static !important; vertical-align: baseline !important; width: auto !important; box-sizing: content-box !important; min-height: auto !important;"> </code><code class="php plain" style="padding: 2px 4px; font-size: 13px; color: rgb(199, 37, 78); background-color: rgb(249, 242, 244); border-radius: 4px; font-family: Monaco, Menlo, Consolas, Courier New, monospace; margin: 0px !important; background-image: none !important; background-position: initial !important; background-size: initial !important; background-repeat: initial !important; background-attachment: initial !important; background-origin: initial !important; background-clip: initial !important; border: 0px !important; inset: auto !important; float: none !important; line-height: 1.5em !important; outline: 0px !important; overflow: visible !important; position: static !important; vertical-align: baseline !important; width: auto !important; box-sizing: content-box !important; min-height: auto !important;">encapsulation: ViewEncapsulation.None</code></p><p class="line number6 index5 alt1" style="margin-top: 15px; margin-bottom: 15px; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); line-height: 1.5em; border-radius: 8px; font-size: 16px; color: rgb(61, 70, 77); box-sizing: border-box; padding-right: 1em !important; padding-left: 1em !important; border-left: 3px solid rgb(67, 90, 95) !important; white-space: pre-wrap !important;"><code class="php plain" style="padding: 2px 4px; font-size: 13px; color: rgb(199, 37, 78); background-color: rgb(249, 242, 244); border-radius: 4px; font-family: Monaco, Menlo, Consolas, Courier New, monospace; margin: 0px !important; background-image: none !important; background-position: initial !important; background-size: initial !important; background-repeat: initial !important; background-attachment: initial !important; background-origin: initial !important; background-clip: initial !important; border: 0px !important; inset: auto !important; float: none !important; line-height: 1.5em !important; outline: 0px !important; overflow: visible !important; position: static !important; vertical-align: baseline !important; width: auto !important; box-sizing: content-box !important; min-height: auto !important;">})</code></p><p class="line number7 index6 alt2" style="margin-top: 15px; margin-bottom: 15px; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); line-height: 1.5em; border-radius: 8px; font-size: 16px; color: rgb(61, 70, 77); box-sizing: border-box; padding-right: 1em !important; padding-left: 1em !important; border-left: 3px solid rgb(67, 90, 95) !important; white-space: pre-wrap !important;"><code class="php plain" style="padding: 2px 4px; font-size: 13px; color: rgb(199, 37, 78); background-color: rgb(249, 242, 244); border-radius: 4px; font-family: Monaco, Menlo, Consolas, Courier New, monospace; margin: 0px !important; background-image: none !important; background-position: initial !important; background-size: initial !important; background-repeat: initial !important; background-attachment: initial !important; background-origin: initial !important; background-clip: initial !important; border: 0px !important; inset: auto !important; float: none !important; line-height: 1.5em !important; outline: 0px !important; overflow: visible !important; position: static !important; vertical-align: baseline !important; width: auto !important; box-sizing: content-box !important; min-height: auto !important;">export </code><code class="php keyword" style="padding: 2px 4px; font-size: 13px; color: rgb(199, 37, 78); background-color: rgb(249, 242, 244); border-radius: 4px; font-family: Monaco, Menlo, Consolas, Courier New, monospace; margin: 0px !important; background-image: none !important; background-position: initial !important; background-size: initial !important; background-repeat: initial !important; background-attachment: initial !important; background-origin: initial !important; background-clip: initial !important; border: 0px !important; inset: auto !important; float: none !important; line-height: 1.5em !important; outline: 0px !important; overflow: visible !important; position: static !important; vertical-align: baseline !important; width: auto !important; box-sizing: content-box !important; font-weight: bold !important; min-height: auto !important;">class</code> <code class="php plain" style="padding: 2px 4px; font-size: 13px; color: rgb(199, 37, 78); background-color: rgb(249, 242, 244); border-radius: 4px; font-family: Monaco, Menlo, Consolas, Courier New, monospace; margin: 0px !important; background-image: none !important; background-position: initial !important; background-size: initial !important; background-repeat: initial !important; background-attachment: initial !important; background-origin: initial !important; background-clip: initial !important; border: 0px !important; inset: auto !important; float: none !important; line-height: 1.5em !important; outline: 0px !important; overflow: visible !important; position: static !important; vertical-align: baseline !important; width: auto !important; box-sizing: content-box !important; min-height: auto !important;">ChildComponent </code><code class="php keyword" style="padding: 2px 4px; font-size: 13px; color: rgb(199, 37, 78); background-color: rgb(249, 242, 244); border-radius: 4px; font-family: Monaco, Menlo, Consolas, Courier New, monospace; margin: 0px !important; background-image: none !important; background-position: initial !important; background-size: initial !important; background-repeat: initial !important; background-attachment: initial !important; background-origin: initial !important; background-clip: initial !important; border: 0px !important; inset: auto !important; float: none !important; line-height: 1.5em !important; outline: 0px !important; overflow: visible !important; position: static !important; vertical-align: baseline !important; width: auto !important; box-sizing: content-box !important; font-weight: bold !important; min-height: auto !important;">implements</code> <code class="php plain" style="padding: 2px 4px; font-size: 13px; color: rgb(199, 37, 78); background-color: rgb(249, 242, 244); border-radius: 4px; font-family: Monaco, Menlo, Consolas, Courier New, monospace; margin: 0px !important; background-image: none !important; background-position: initial !important; background-size: initial !important; background-repeat: initial !important; background-attachment: initial !important; background-origin: initial !important; background-clip: initial !important; border: 0px !important; inset: auto !important; float: none !important; line-height: 1.5em !important; outline: 0px !important; overflow: visible !important; position: static !important; vertical-align: baseline !important; width: auto !important; box-sizing: content-box !important; min-height: auto !important;">OnInit {</code></p><p class="line number8 index7 alt1" style="margin-top: 15px; margin-bottom: 15px; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); line-height: 1.5em; border-radius: 8px; font-size: 16px; color: rgb(61, 70, 77); box-sizing: border-box; padding-right: 1em !important; padding-left: 1em !important; border-left: 3px solid rgb(67, 90, 95) !important; white-space: pre-wrap !important;"><code class="php spaces" style="padding: 2px 4px; font-size: 13px; color: rgb(199, 37, 78); background-color: rgb(249, 242, 244); border-radius: 4px; font-family: Monaco, Menlo, Consolas, Courier New, monospace; margin: 0px !important; background-image: none !important; background-position: initial !important; background-size: initial !important; background-repeat: initial !important; background-attachment: initial !important; background-origin: initial !important; background-clip: initial !important; border: 0px !important; inset: auto !important; float: none !important; line-height: 1.5em !important; outline: 0px !important; overflow: visible !important; position: static !important; vertical-align: baseline !important; width: auto !important; box-sizing: content-box !important; min-height: auto !important;"> </code><code class="php plain" style="padding: 2px 4px; font-size: 13px; color: rgb(199, 37, 78); background-color: rgb(249, 242, 244); border-radius: 4px; font-family: Monaco, Menlo, Consolas, Courier New, monospace; margin: 0px !important; background-image: none !important; background-position: initial !important; background-size: initial !important; background-repeat: initial !important; background-attachment: initial !important; background-origin: initial !important; background-clip: initial !important; border: 0px !important; inset: auto !important; float: none !important; line-height: 1.5em !important; outline: 0px !important; overflow: visible !important; position: static !important; vertical-align: baseline !important; width: auto !important; box-sizing: content-box !important; min-height: auto !important;">......</code></p><p class="line number9 index8 alt2" style="margin-top: 15px; margin-bottom: 15px; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); line-height: 1.5em; border-radius: 8px; font-size: 16px; color: rgb(61, 70, 77); box-sizing: border-box; padding-right: 1em !important; padding-left: 1em !important; border-left: 3px solid rgb(67, 90, 95) !important; white-space: pre-wrap !important;"><code class="php plain" style="padding: 2px 4px; font-size: 13px; color: rgb(199, 37, 78); background-color: rgb(249, 242, 244); border-radius: 4px; font-family: Monaco, Menlo, Consolas, Courier New, monospace; margin: 0px !important; background-image: none !important; background-position: initial !important; background-size: initial !important; background-repeat: initial !important; background-attachment: initial !important; background-origin: initial !important; background-clip: initial !important; border: 0px !important; inset: auto !important; float: none !important; line-height: 1.5em !important; outline: 0px !important; overflow: visible !important; position: static !important; vertical-align: baseline !important; width: auto !important; box-sizing: content-box !important; min-height: auto !important;">}</code></p></td></tr></tbody></table><p style="margin-top: 15px; margin-bottom: 15px; padding: 0px 0px 0px 10px; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); color: rgb(61, 70, 77); box-sizing: border-box; border-radius: 8px; font-family: Helvetica Neue, Helvetica, PingFang SC, 微软雅黑, Tahoma, Arial, sans-serif; white-space: normal; background-color: rgb(255, 255, 255);"></p><h2 data-id="heading-6" style="margin: 0px; padding: 0px 0px 0px 10px; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); font-family: Helvetica Neue, Helvetica, PingFang SC, 微软雅黑, Tahoma, Arial, sans-serif; white-space: normal; background-color: rgb(255, 255, 255);"><strong style="margin: 0px; padding: 0px;">被废弃的Native</strong></h2><p style="margin-top: 15px; margin-bottom: 15px; padding: 0px 0px 0px 10px; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); color: rgb(61, 70, 77); box-sizing: border-box; border-radius: 8px; font-family: Helvetica Neue, Helvetica, PingFang SC, 微软雅黑, Tahoma, Arial, sans-serif; white-space: normal; background-color: rgb(255, 255, 255);">在Angular2中使用ViewEncapsulation.Native。</p><table class="wcn_c_table" cellpadding="0" cellspacing="0" width="760"><tbody style="margin: 0px !important; padding: 0px !important; border-radius: 0px !important; background: none !important; border: 0px !important; inset: auto !important; float: none !important; line-height: 1.1em !important; outline: 0px !important; overflow: visible !important; position: static !important; vertical-align: baseline !important; width: auto !important; box-sizing: content-box !important; min-height: auto !important;"><tr style="margin: 0px !important; padding: 0px !important; border-radius: 0px !important; background: none !important; border: 0px !important; inset: auto !important; float: none !important; line-height: 1.1em !important; outline: 0px !important; overflow: visible !important; position: static !important; vertical-align: baseline !important; width: auto !important; box-sizing: content-box !important; min-height: auto !important;" class="firstRow"><td class="gutter" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); margin: 0px !important; border-radius: 4px 0px 0px 4px !important; background: none !important; inset: auto !important; float: none !important; line-height: 1.1em !important; outline: 0px !important; overflow: visible !important; position: static !important; vertical-align: baseline !important; box-sizing: content-box !important; min-height: auto !important; color: rgb(175, 175, 175) !important; user-select: none !important;" width="NaN"><p class="line number1 index0 alt2" style="margin-top: 15px; margin-bottom: 15px; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); line-height: 1.5em; border-radius: 8px; font-size: 16px; color: rgb(61, 70, 77); box-sizing: border-box; padding-right: 0.5em !important; padding-left: 1em !important; border-left: 3px solid rgb(67, 90, 95) !important; white-space: pre-wrap !important; text-align: right !important;">1</p><p class="line number2 index1 alt1" style="margin-top: 15px; margin-bottom: 15px; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); line-height: 1.5em; border-radius: 8px; font-size: 16px; color: rgb(61, 70, 77); box-sizing: border-box; padding-right: 0.5em !important; padding-left: 1em !important; border-left: 3px solid rgb(67, 90, 95) !important; white-space: pre-wrap !important; text-align: right !important;">2</p><p class="line number3 index2 alt2" style="margin-top: 15px; margin-bottom: 15px; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); line-height: 1.5em; border-radius: 8px; font-size: 16px; color: rgb(61, 70, 77); box-sizing: border-box; padding-right: 0.5em !important; padding-left: 1em !important; border-left: 3px solid rgb(67, 90, 95) !important; white-space: pre-wrap !important; text-align: right !important;">3</p><p class="line number4 index3 alt1" style="margin-top: 15px; margin-bottom: 15px; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); line-height: 1.5em; border-radius: 8px; font-size: 16px; color: rgb(61, 70, 77); box-sizing: border-box; padding-right: 0.5em !important; padding-left: 1em !important; border-left: 3px solid rgb(67, 90, 95) !important; white-space: pre-wrap !important; text-align: right !important;">4</p><p class="line number5 index4 alt2" style="margin-top: 15px; margin-bottom: 15px; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); line-height: 1.5em; border-radius: 8px; font-size: 16px; color: rgb(61, 70, 77); box-sizing: border-box; padding-right: 0.5em !important; padding-left: 1em !important; border-left: 3px solid rgb(67, 90, 95) !important; white-space: pre-wrap !important; text-align: right !important;">5</p></td><td class="code" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); word-break: break-all; margin: 0px !important; border-radius: 0px !important; background: none !important; inset: auto !important; float: none !important; line-height: 1.1em !important; outline: 0px !important; overflow: visible !important; position: static !important; vertical-align: baseline !important; box-sizing: content-box !important; min-height: auto !important;" width="719"><p class="line number1 index0 alt2" style="margin-top: 15px; margin-bottom: 15px; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); line-height: 1.5em; border-radius: 8px; font-size: 16px; color: rgb(61, 70, 77); box-sizing: border-box; padding-right: 1em !important; padding-left: 1em !important; border-left: 3px solid rgb(67, 90, 95) !important; white-space: pre-wrap !important;"><code class="php plain" style="padding: 2px 4px; font-size: 13px; color: rgb(199, 37, 78); background-color: rgb(249, 242, 244); border-radius: 4px; font-family: Monaco, Menlo, Consolas, Courier New, monospace; margin: 0px !important; background-image: none !important; background-position: initial !important; background-size: initial !important; background-repeat: initial !important; background-attachment: initial !important; background-origin: initial !important; background-clip: initial !important; border: 0px !important; inset: auto !important; float: none !important; line-height: 1.5em !important; outline: 0px !important; overflow: visible !important; position: static !important; vertical-align: baseline !important; width: auto !important; box-sizing: content-box !important; min-height: auto !important;">@Component({</code></p><p class="line number2 index1 alt1" style="margin-top: 15px; margin-bottom: 15px; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); line-height: 1.5em; border-radius: 8px; font-size: 16px; color: rgb(61, 70, 77); box-sizing: border-box; padding-right: 1em !important; padding-left: 1em !important; border-left: 3px solid rgb(67, 90, 95) !important; white-space: pre-wrap !important;"><code class="php spaces" style="padding: 2px 4px; font-size: 13px; color: rgb(199, 37, 78); background-color: rgb(249, 242, 244); border-radius: 4px; font-family: Monaco, Menlo, Consolas, Courier New, monospace; margin: 0px !important; background-image: none !important; background-position: initial !important; background-size: initial !important; background-repeat: initial !important; background-attachment: initial !important; background-origin: initial !important; background-clip: initial !important; border: 0px !important; inset: auto !important; float: none !important; line-height: 1.5em !important; outline: 0px !important; overflow: visible !important; position: static !important; vertical-align: baseline !important; width: auto !important; box-sizing: content-box !important; min-height: auto !important;"> </code><code class="php plain" style="padding: 2px 4px; font-size: 13px; color: rgb(199, 37, 78); background-color: rgb(249, 242, 244); border-radius: 4px; font-family: Monaco, Menlo, Consolas, Courier New, monospace; margin: 0px !important; background-image: none !important; background-position: initial !important; background-size: initial !important; background-repeat: initial !important; background-attachment: initial !important; background-origin: initial !important; background-clip: initial !important; border: 0px !important; inset: auto !important; float: none !important; line-height: 1.5em !important; outline: 0px !important; overflow: visible !important; position: static !important; vertical-align: baseline !important; width: auto !important; box-sizing: content-box !important; min-height: auto !important;">...,</code></p><p class="line number3 index2 alt2" style="margin-top: 15px; margin-bottom: 15px; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); line-height: 1.5em; border-radius: 8px; font-size: 16px; color: rgb(61, 70, 77); box-sizing: border-box; padding-right: 1em !important; padding-left: 1em !important; border-left: 3px solid rgb(67, 90, 95) !important; white-space: pre-wrap !important;"><code class="php spaces" style="padding: 2px 4px; font-size: 13px; color: rgb(199, 37, 78); background-color: rgb(249, 242, 244); border-radius: 4px; font-family: Monaco, Menlo, Consolas, Courier New, monospace; margin: 0px !important; background-image: none !important; background-position: initial !important; background-size: initial !important; background-repeat: initial !important; background-attachment: initial !important; background-origin: initial !important; background-clip: initial !important; border: 0px !important; inset: auto !important; float: none !important; line-height: 1.5em !important; outline: 0px !important; overflow: visible !important; position: static !important; vertical-align: baseline !important; width: auto !important; box-sizing: content-box !important; min-height: auto !important;"> </code><code class="php plain" style="padding: 2px 4px; font-size: 13px; color: rgb(199, 37, 78); background-color: rgb(249, 242, 244); border-radius: 4px; font-family: Monaco, Menlo, Consolas, Courier New, monospace; margin: 0px !important; background-image: none !important; background-position: initial !important; background-size: initial !important; background-repeat: initial !important; background-attachment: initial !important; background-origin: initial !important; background-clip: initial !important; border: 0px !important; inset: auto !important; float: none !important; line-height: 1.5em !important; outline: 0px !important; overflow: visible !important; position: static !important; vertical-align: baseline !important; width: auto !important; box-sizing: content-box !important; min-height: auto !important;">encapsulation: ViewEncapsulation.Native</code></p><p class="line number4 index3 alt1" style="margin-top: 15px; margin-bottom: 15px; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); line-height: 1.5em; border-radius: 8px; font-size: 16px; color: rgb(61, 70, 77); box-sizing: border-box; padding-right: 1em !important; padding-left: 1em !important; border-left: 3px solid rgb(67, 90, 95) !important; white-space: pre-wrap !important;"><code class="php plain" style="padding: 2px 4px; font-size: 13px; color: rgb(199, 37, 78); background-color: rgb(249, 242, 244); border-radius: 4px; font-family: Monaco, Menlo, Consolas, Courier New, monospace; margin: 0px !important; background-image: none !important; background-position: initial !important; background-size: initial !important; background-repeat: initial !important; background-attachment: initial !important; background-origin: initial !important; background-clip: initial !important; border: 0px !important; inset: auto !important; float: none !important; line-height: 1.5em !important; outline: 0px !important; overflow: visible !important; position: static !important; vertical-align: baseline !important; width: auto !important; box-sizing: content-box !important; min-height: auto !important;">})</code></p><p class="line number5 index4 alt2" style="margin-top: 15px; margin-bottom: 15px; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); line-height: 1.5em; border-radius: 8px; font-size: 16px; color: rgb(61, 70, 77); box-sizing: border-box; padding-right: 1em !important; padding-left: 1em !important; border-left: 3px solid rgb(67, 90, 95) !important; white-space: pre-wrap !important;"><code class="php plain" style="padding: 2px 4px; font-size: 13px; color: rgb(199, 37, 78); background-color: rgb(249, 242, 244); border-radius: 4px; font-family: Monaco, Menlo, Consolas, Courier New, monospace; margin: 0px !important; background-image: none !important; background-position: initial !important; background-size: initial !important; background-repeat: initial !important; background-attachment: initial !important; background-origin: initial !important; background-clip: initial !important; border: 0px !important; inset: auto !important; float: none !important; line-height: 1.5em !important; outline: 0px !important; overflow: visible !important; position: static !important; vertical-align: baseline !important; width: auto !important; box-sizing: content-box !important; min-height: auto !important;">export </code><code class="php keyword" style="padding: 2px 4px; font-size: 13px; color: rgb(199, 37, 78); background-color: rgb(249, 242, 244); border-radius: 4px; font-family: Monaco, Menlo, Consolas, Courier New, monospace; margin: 0px !important; background-image: none !important; background-position: initial !important; background-size: initial !important; background-repeat: initial !important; background-attachment: initial !important; background-origin: initial !important; background-clip: initial !important; border: 0px !important; inset: auto !important; float: none !important; line-height: 1.5em !important; outline: 0px !important; overflow: visible !important; position: static !important; vertical-align: baseline !important; width: auto !important; box-sizing: content-box !important; font-weight: bold !important; min-height: auto !important;">class</code> <code class="php plain" style="padding: 2px 4px; font-size: 13px; color: rgb(199, 37, 78); background-color: rgb(249, 242, 244); border-radius: 4px; font-family: Monaco, Menlo, Consolas, Courier New, monospace; margin: 0px !important; background-image: none !important; background-position: initial !important; background-size: initial !important; background-repeat: initial !important; background-attachment: initial !important; background-origin: initial !important; background-clip: initial !important; border: 0px !important; inset: auto !important; float: none !important; line-height: 1.5em !important; outline: 0px !important; overflow: visible !important; position: static !important; vertical-align: baseline !important; width: auto !important; box-sizing: content-box !important; min-height: auto !important;">UserComponent {</code></p></td></tr></tbody></table><p style="margin-top: 15px; margin-bottom: 15px; padding: 0px 0px 0px 10px; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); color: rgb(61, 70, 77); box-sizing: border-box; border-radius: 8px; font-family: Helvetica Neue, Helvetica, PingFang SC, 微软雅黑, Tahoma, Arial, sans-serif; white-space: normal; background-color: rgb(255, 255, 255);"></p><p style="margin-top: 15px; margin-bottom: 15px; padding: 0px 0px 0px 10px; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); color: rgb(61, 70, 77); box-sizing: border-box; border-radius: 8px; font-family: Helvetica Neue, Helvetica, PingFang SC, 微软雅黑, Tahoma, Arial, sans-serif; white-space: normal; background-color: rgb(255, 255, 255);">ViewEncapsulation.Native 设置的结果是使用原生的 Shadow DOM 特性。Angular 会把组件按照浏览器支持的 Shadow DOM 形式渲染。其实这种就是后来的<a href="https://angular.cn/api/core/ViewEncapsulation#ShadowDom" target="_blank" textvalue="ViewEncapsulation.ShadowDom" style="margin: 0px; padding: 0px; color: rgb(61, 167, 13); text-decoration-line: none !important;">ViewEncapsulation.ShadowDom</a>。</p><h2 data-id="heading-7" style="margin: 0px; padding: 0px 0px 0px 10px; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); font-family: Helvetica Neue, Helvetica, PingFang SC, 微软雅黑, Tahoma, Arial, sans-serif; white-space: normal; background-color: rgb(255, 255, 255);"><strong style="margin: 0px; padding: 0px;">总结</strong></h2><p style="margin-top: 15px; margin-bottom: 15px; padding: 0px 0px 0px 10px; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); color: rgb(61, 70, 77); box-sizing: border-box; border-radius: 8px; font-family: Helvetica Neue, Helvetica, PingFang SC, 微软雅黑, Tahoma, Arial, sans-serif; white-space: normal; background-color: rgb(255, 255, 255);">我们介绍了Angular视图封装的三种方式，各自的特点，日常工作中要根据特定的场景去选择哪种封装方式。</p><!--!doctype--><link rel="stylesheet" href="//www.zhidianyun.cn/source/plugin/wcn_editor/public/wcn_editor_fit.css?v134_TZ8" id="wcn_editor_css"/>
页:
[1]