Web Components使用（二）

在上一章节中主要介绍了Custom elements（自定义元素），Shadow DOM（影子DOM）的使用，我们发现其实只使用上述的两种方式，已经可以构建我们平时需要的组件，那么为什么还需要HTML templates（HTML模板）技术呢？
不知道大家还记不记得之前创建元素的方式：

        const input = document.createElement('input');
        input.setAttribute('type', 'text');
        input.setAttribute('class', 'input-vlaue');

创建一个input就需要写这些js代码，很明显，如果当html文档结构太深或者节点过多时，写出太多的创建html 节点的代码，还是很头疼的。一方面代码量过多且层级结构不清晰，另一方面时css也是用此方式创建，如何使用伪类呢? 多少是方便的。所以便有了HTML templates（HTML模板）技术。
我们先来看下它的定义：

HTML内容模板（