Angular之 ViewEncapsulation 与 Shadow DOM

Shadow DOM

　　1、在浏览器中的表现形式

　　　　以video为例，如下代码：

<video controls autoplay name="media" width="500">
  <source id="mp4" src="#" type="video/mp4">
</video>

　　　　如果不对浏览器任何设置操作，渲染生成的代码和上面的代码分毫不差。

　　　　然后打开Chrome的开发者模式，在 setting 中勾选显示显示 shadow DOM。

　　　　　　　　 

　　 　　浏览器中的渲染结果如下：

　　　　　　　　

　　 　　　　可以发现，在<video>标签中多了一个包裹的对象， #shadow-root。

　　 2、定义

　　 　　　　Shadow DOM 允许在 document渲染时插入一个DOM子树，但这棵子树不在DOM主树中。

　　　　　　 #shadow-root 被成为影子根，而外层的video此时被成为 影子宿主（shadow host)。

　　　　　　 #shadow-root可以嵌套， 形成影子树（shadow trees).

　　　　　　 影子树对其中的HTML，CSS，JS 有选择性的进行渲染。

　　 3、如何创建

　　　　　 最简单的例子如下：

<div id="hostDiv">
  I love you
</div>

<script type="text/javascript">
  let hostDiv = document.getElementById('hostDiv');
  let shadow = hostDiv.createShadowRoot(); // hostDiv.attachShadow({ mode: 'open'})
  shadow.innerHTML = '<a href="#">baidu</a>';
</script>

　　 4、如何修改影子元素的样式

　　　　为了保证影子宿主和影子根 之间样式互不侵袭，他们之间存在影子边界（shadow boundary).

　　　　<template>

　　　　　　此标签在使用前不会被渲染，不会执行加载等操作。

　　　　　　也能够实现隐藏标签内容，位置任意。　

　　　　<content>

　　　　      web组件技术套件废弃的部分。

　　　　　　select属性告诉<content>有选择性的插入内容。 

　　　　      使用CSS选择器选取要展示的内容。

　　　　<slot>

　　　　　　自定义web组件的占位符。

　　　　　　属性 name，指插槽名字。

　　　　参考 w3c标准

<div id="hostDiv">
  <i id="c1">first</i>
  <i class="c2">second</i>
</div>

<template id="template">
  <content select="#c1"></content> I  love you<br>
  <content select=".c2"></content> you love me
</template>
<script type="text/javascript">
  let hostDiv = document.getElementById('hostDiv');
  let shadow = hostDiv.createShadowRoot();
  shadow.appendChild(document.importNode(template.content,true))
</script>

<div id="hostDiv">
  <i slot="c1">first</i>
  <i slot="c2">second</i>
</div>

<template id="template">
  <slot name="c1"></slot> I  love you<br>
  <slot name="c2"></slot> you love me
</template>
<script type="text/javascript">
  let hostDiv = document.getElementById('hostDiv');
  let shadow = hostDiv.attachShadow({   mode: "open"});
  shadow.appendChild(document.importNode(template.content,true))
</script>

　　　　

Angular ViewEncapsulation

　　提供模版和CSS样式使用的样式封装策略。

　　官方上的解释：

　　　　ViewEncapsulation.Native：使用 Shadow DOM。它只在原生支持 Shadow DOM 的平台上才能工作。

　　　　ViewEncapsulation.Emulated：使用垫片（shimmed) CSS 来模拟原生行为。

　　　　ViewEncapsulation.None: 使用全局样式，没有任何视图包装。

　　　　 ViewEncapsulation.None：使用全局 CSS，不做任何封装。

　　默认编译器是 Emulated。