Web Component 实战笔记

Web Component 模块分为模版元素，Shadow DOM， 自定义元素， HTML Import

一、模版元素

1. 模版元素

HTML 元素中包含css， html， javascript， 这些都是可复用的，W3C Web Component规范中包含了元素。对于web 开发来说，template 还是太新了，所以相较于Handlebars.js 这个相当成熟的库来说，Web Component 模版少了一些功能，当然，他一定会很快强大起来的。

2. IDL

<template> 元素是一个HTMLTemplateElement接口， 具体的IDL（W3C用于定义规范所用的语言）定义如下

#DOM Interface
interface HTMLTemplateElement : HTMLElement {
   
  readonly attribute DocumentFragment content;
};

• HTMLTemplateElement: 这是template 接口， 继承了HTMLElement class
• content - 这是HTML template 中唯一一个元素，他返回模版的内容，而且是只读的
• DocumentFragment - 这是content返回的类型，可以视为轻量级文档，而且没有父元素

3. 模版元素的延迟加载

模版元素是延迟加载的，下面例子如下

<div id="message"></div>
<template id="aTemplate">
    <img id="profileImage" src="http://www.gravatar.com/avatar/c6e6c57a2173fcbf2afdd5fe6786e92f.png">
    <script>
        alert("This is a script.");
    </script>
</template>
<script>
    (function(){
   
        var imageElement = document.getElementById("profileImage"),
            messageElement = document.getElementById("message");
        messageElement.innerHTML = "IMG element "+imageElement;
    })();
</script>

Google运行结果如下

我们可以看到上面document.getElementById(“profileImage”) 是没有得到值的，也就是说现在aTemplate 并没有加载。

4. 激活模版中节点

所以这证明模版是延迟加载的，那怎么激活模版中的节点呢，两种方法， 克隆节点和导入节点

a 克隆节点

<div id="message"></div>
<template id="aTemplate">
    <img id="profileImage" src="./WechatIMG828.png" width="100" height="100">
    <script>
        alert("This is a script.");
    </script>
</template>
<script>
    (function(){
   
        const messageEl = document.getElementById("message");
        const aTemplate = document.querySelector("#aTemplate"),
            templateContent = aTemplate.content,
            activeContent = templateContent.cloneNode