web 自定义标签

Web Components 标准非常重要的一个特性是，它使开发者能够将HTML页面的功能封装为 custom elements（自定义标签）。而自定义标签的好处，就是在大型web开发的时候，可以封装组件(Vue、Angular等大型框架)来重用，方便开发跟管理。

在自定义标签之前，先来看下几个相关的API：

1. Object.create(proto, [propertiesObject]): 创建新对象，将该新对象的__proto__指向proto，这里的proto是 HTMLElement，因为我们需要创建一个element。主要是ES5的写法，ES6可以通过 Class 跟 constructor 来实现。
2. document.currentScript.ownerDocument: 该方法主要针对通过 HTML import导入的文件，用于获取自定义element的上下文document，并通过该document 获取该 element 定义的html模板。因为document是指向全局上下文的，获取不到自定义的元素。document.currentScript: 获取正在执行的<script>脚本。
3. createdCallback: 创建元素成功之后的回调函数。将自定义元素的模板添加到该元素下面。
4. Element.createShadowRoot: 创建 shadow DOM，将该标签模板与外部元素隔离开来，不受外部样式影响，也不影响外部样式。不过MDN上将这个API废弃掉了，建议使用 attachShadow() 替代
5. Element.attachShadow(shadowRootInit): createShadowRoot 的替代者。shadowRootInit: 指定shadowRoot的封装模式 {mode: open/closed}。open 表示可在外部 获取到该shadow，closed 反之。
   1. open: ele.shadowRoot === shadow
   2. closed: ele.shadowRoot === null
6. document.registerElement(tag-name, options): 注册自定义元素。MDN已经废弃这个API了，建议使用 customElements.define() 替代
   1. tag-name: 自定义标签的名字，必须有一个连字符 '-'
   2. options: 指定标签的原型属性跟可扩展对象

 <!DOCTYPE html>
 <html>
 <head>
     <title></title>
     <link rel="import" href="./customized-tag.html">
     <style type="text/css">
         .red-color {
             color: blue
         }
     </style>
 </head>
 <body>
     <div class="red-color">aaa</div>
     <customized-tag></customized-tag>
 </body>
 </html>

 <template>
     <div class="red-color">
         hahaha
     </div>
     <style type="text/css">
         /*.red-color {
             color: red;
         }*/
     </style>
 </template>
 <script type="text/javascript">
     (function() {
         // 创建一个html元素
         let ele = Object.create(HTMLElement.prototype);
         // 获取当前文档的元素节点里面的内容
         // 因为这个文件是通过 import 导入到父html的, document无法直接获取到自定义的模板
         // document.currentScript 获取到当前的script，因为默认 document 是之前全局上下文的
         // document.currentScript.ownerDocument 获取当前文档，而不是全局
         let customizedDoc = document.currentScript.ownerDocument.querySelector('template').content;
         ele.createdCallback = function() {
             // 创建shadow DOM，避免元素相互影响，已废弃，建议使用 attachShadow
             // let shadow = this.createShadowRoot();

             // 创建shadow DOM, mode: open / closed, open 表示可以在js里面获取到该shadowDOM，closed 表示无法在外部获取到该shadow DOM
             // open: ele.shadowRoot === shadow
             // closed: ele.shadowRoot === null
             let shadow = this.attachShadow({mode: 'open'});
             // 拷贝节点，第二个参数表示是否导入后代节点
             let clone = document.importNode(customizedDoc, true);
             shadow.appendChild(clone);

             // 如果不想创建 shadowDOM, 可直接将节点append到父元素
             // this.appendChild(clone)
         }
         document.registerElement('customized-tag', {
             prototype: ele
         })
     })()

 </script>

使用 customElements.define(tag-name, constructor, options) 方式注册组件

     class CustomizedTag extends HTMLElement {
         constructor() {
             super();
             this.attachToTag();
         }

         attachToTag() {
             let shadow = this.attachShadow({mode: 'open'})
             let ele = document.currentScript.ownerDocument.querySelector('template').content;
             let clone = document.importNode(ele, true);
             shadow.appendChild(clone)
         }
     }
     customElements.define('customized-tag', CustomizedTag)