Web Component（1）template和shadow dom

封装和重用代码已经成为开发者的共识，然而对于HTML而言，大块的重复代码处处都是。Web Component 旨在解决HTML的封装和重用问题，这里分几个小节总结一下它是怎么做的。

template

使用template声明模块，并在需要的时候引用。而slot则能用来解决重复代码之间略有差异的部分。

结果如下：

使用HTML template

shadow dom

所谓的封装在于隐藏内部的细节，并将内部和外部相隔离。具体到web component而言，我们应该不希望外部的css会影响到组件的样式，同理组价内部的css不应该对外部有作用。对于Javascript而言，我们也不希望在组建内使用一个选择器，结果选中了文档其他的节点。
使用shadow DOM可以实现组件的封装，请看下边的代码：

outside content

appendShadow()方法可以在DOM节点下创建一个shadow-root节点，shadow-root节点能将自身内部和外部隔离开。appendShadow()接受一个对象，该对象必须有mode属性，如果 mode值为open则可以通过 Element.shadowRoot拿到shadow-root节点里的内容。如果mode取值为close则会拿到null。

运行结果如下：

image.png

MDN using shadow dom