Web Component（1）template和shadow
2018-06-09 本文已影响20人
浩神
封装和重用代码已经成为开发者的共识，然而对于HTML而言，大块的重复代码处处都是。Web Component 旨在解决HTML的封装和重用问题，这里分几个小节总结一下它是怎么做的。
template
使用template声明模块，并在需要的时候引用。而slot则能用来解决重复代码之间略有差异的部分。
<div class="template-place"></div>
<template id="my-template">
<h1>template content</h1>
</template>
<script>
let template = document.getElementById('my-template')
document.querySelector('.template-place').appendChild(template.content)
</script>
结果如下：
使用HTML template
shadow dom
所谓的封装在于隐藏内部的细节，并将内部和外部相隔离。具体到web component而言，我们应该不希望外部的css会影响到组件的样式，同理组价内部的css不应该对外部有作用。对于Javascript而言，我们也不希望在组建内使用一个选择器，结果选中了文档其他的节点。
使用shadow DOM可以实现组件的封装，请看下边的代码：
<body>
<h1>outside content</h1>
<div id="template-container"></div>
<template id="template">
<style>
h1 {
color: red;
}
</style>
<h1>template content</h1>
</template>
<script>
let template = document.getElementById('template').content
let templateContainer = document.getElementById('template-container')
templateContainer.attachShadow({mode:'open'}).appendChild(template)
</script>
</body>
appendShadow()方法可以在DOM节点下创建一个shadow-root节点，shadow-root节点能将自身内部和外部隔离开。appendShadow()接受一个对象，该对象必须有mode属性，如果 mode值为open则可以通过 Element.shadowRoot拿到shadow-root节点里的内容。如果mode取值为close则会拿到null。
运行结果如下：
image.png
