浅谈 shadow dom 中的 template 和 slot

最近一个内部系统可视化设计器的布局在用户升级 chrome 到 53 版本之后，里面的坑位增加按钮消失了，经过排查发现，坑位的标签使用了slot，而坑位中的按钮是通过 css 的 empty 伪类实现的，即坑位为空时，出现增加按钮，但现在为什么突然无效了呢？

把slot的名字换成其他标签名，发现样式顿时生效，于是猜测是slot作为特殊标签被 chrome 设置了特定的行为，经过查阅资料发现slot是 shadow dom 中的内置标签。

现在我们来了解下 shadow dom 以及与其相关的两个特殊标签 template 和 slot 。

何为shadow dom

shadow dom，顾名思义，影子节点，它是 web components 规范的一个子集，主要为了解决dom对象的封装，通常的dom，其js行为和css样式极易受到别的代码的干扰，但shadow dom规定了只有其宿主才可定义其表现，外部的api是无法获取到shadow dom中的东西。

由于shadow dom是影子元素，因此其必须捆绑一个宿主元素，宿主元素事实上成为了“傀儡”，宿主元素的内容将被隐藏，而shadow dom的内容将展示出来，以下是一个例子：

html:

    没什么卵用的文字


js:
var host = document.querySelector('#con');
var root = host.attachShadow({mode:'open'});//为宿主附加一个影子元素

root.innerHTML = "我来自shadow dom";//为影响元素附上内容，shadow dom的api和普通dom的大致相同

最终效果：

我来自shadow dom

可以看到，宿主的内容确实被掩盖了，然而通过chrome的devtools，可以看到宿主的原内容以及背后的shadow dom：

shadow dom中的template

前面说了，shadow dom可以实现dom的隔离，比如样式的封装，那么如何实现呢？shadow规定了一种名为template的标签，这种标签类似我们经常用的