Shadow DOM的样式ShadowRoot

我们已经可以使用原生的操作DOM的方式和使用模板的方式来创建Shadow DOM了，但是创建出来的毕竟只有HTML，是时候用CSS来修改下他们的样式了。

 

一、样式封装

前面曾说过，正常DOM的样式是不会影响到Shadow DOM中的样式的。例如：

hello world


var oBox = document.querySelector('#box');

var shadowRoot = oBox.createShadowRoot();
shadowRoot.innerHTML="11111";

我们使用了red样式来使文字的颜色变为红色，但是页面显示的并不是我们想的那样。

在Shadow内部的元素并没有受到这个样式的影响。于是我们尝试在添加元素的时候加入style样式。

var oBox = document.querySelector('#box');
var shadowRoot = oBox.createShadowRoot();
shadowRoot.innerHTML="11111";

此时，Shadow 中的元素的颜色变成了蓝色，也就是起作用了。

这种作用域化的特性使得我们可以使用局部的、组件化的思想来考虑书写CSS样式了。

二、宿主样式（:host)

有时我们需要给宿主元素增加些样式，你可能会想到在外部增加，当然这不符合组件化的思想，所以:host样式就有他的用处了。

/*额外在外部增加一个div的样式*/
div {
    font-weight: bold;
}

var oBox = document.querySelector('#box');

var shadowRoot = oBox.createShadowRoot();
shadowRoot.innerHTML="11111

当鼠标悬浮到宿主对象时，边框就会变成绿色的。

三、宿主样式中的类型选择器

我们通过增加:hover伪类给宿主元素增加悬浮样式，注：:host也是伪类。我们可以将:host作用于多个元素上来改变样式。

HTML
CSS
JavaScript

我们发现，可以根据类名、ID、属性等等来进行匹配选择——任何有效的 CSS 选择器都可以正常工作。

四、主题化

HTML
CSS

使用 :host-context() 的语法我们可以基于内容元素修改我们组件的外观，他可以选择影子宿主的祖先元素的（context的祖先）。这种使用方式类似于子类选择器的反向使用，就像.parent < .child这样，而在Shadow DOM中就可以这么使用。

五、分布节点

来自页面并通过  标签添加到 shadow DOM 的内容被称为分布节点。也就是说，如果你的一个span上想展示一些文本，那么这些文本应该来自页面而不是放在 shadow DOM 的模板里。于是我们可以这样写：

    hello,world

这两种给span增加样式的方法都是行不通的，分布节点的样式渲染需要用到 ::content 伪类选择器，将前面CSS代码中我们尝试给span添加颜色的样式换成

 ::content > span {
     color: red;
 }

我们便可以得到：

样式成功的生效了。

六、::shadow

Shadow DOM的良好封装性是很有用处。但有时你可能会想让使用者给你的组件添加一些样式。使用 ::shadow 伪类选择器我们可以赋予用户重写我们默认定义的自由，如果用户这样做的话，他就可以打破影子边界的壁垒。

    hello,world

转载于：http://www.zhuyuntao.cn/2017/07/16/shadow-dom的样式/