前言

 通过，我们明白到其实Custom Element并不是什么新东西，我们甚至可以在IE5.5上定义自己的alert元素。但这种简单粗暴的自定义元素并不是我们需要的，我们需要的是具有以下特点的自定义元素：

1. 自定义元素可通过原有的方式实例化(<custom-element></custom-element>,new CustomElement()和document.createElement('CUSTOM-ELEMENT'))
2. 可通过原有的方法操作自定义元素实例(如document.body.appendChild,可被CSS样式所修饰等)
3. 能监听元素的生命周期
   而Google为首提出的H5 Custom Element让我们可以在原有标准元素的基础上向浏览器注入各种抽象层次更高的自定义元素，并且在元素CRUD操作上与原生API无缝对接，编程体验更平滑。下面我们一起来通过H5 Custom Element来重新定义alert元素吧！

命名这件“小事”

 在正式撸代码前我想让各位最头痛的事应该就是如何命名元素了,下面3个因素将影响我们的命名：

1. 命名冲突。自定义组件如同各种第三方类库一样存在命名冲突的问题，那么很自然地会想到引入命名空间来解决，但由于组件的名称并不涉及组件资源加载的问题，因此我们这里简化一下——为元素命名添加前缀即可，譬如采用很JAVA的com-cnblogs-fsjohnhuang-alert。
2. 语义化。语义化我们理解就是元素名称达到望文生义的境界，譬如x-alert一看上去就是知道x是前缀而已跟元素的功能无关，alert才是元素的功能。
3. 足够的吊:)高大上的名称总让人赏心悦目，就像我们项目组之前开玩笑说要把预警系统改名为"超级无敌全球定位来料品质不间断跟踪预警综合平台"，呵呵！
   除了上述3点外，H5规范中还有这条规定：自定义元素必须至少包含一个连字符，即最简形式也要这样a-b。而不带连字符的名称均留作浏览器原生元素使用。换个说法就是名称带连字符的元素被识别为有效的自定义元素，而不带连字符的元素要么被识别为原生元素，要么被识别为无效元素。

const compose = (...fns) => {  const lastFn = fns.pop()  fns = fns.reverse()  return a => fns.reduce((p, fn) => fn(p), lastFn(a))}const info = msg => console.log(msg)const type = o => Object.prototype.toString.call(o)const printType = compose(info, type)const newElem = tag => document.createElement(tag)// 创建有效的自定义元素const xAlert = newElem('x-alert')infoType(xAlert) // [object HTMLElement]// 创建无效的自定义元素const alert = newElem('alert')infoType(alert) // [object HTMLUnknownElement]// 创建有效的原生元素const div = newElem('div')infoType(div) // [object HTMLDivElement]

 那如果我偏要用alert来自定义元素呢？浏览器自当会说一句“悟空，你又调皮了”

 现在我们已经通过命名规范来有效区分自定义元素和原生元素，并且通过前缀解决了命名冲突问题。嘿稍等，添加前缀真的是解决命名冲突的好方法吗？这其实跟通过添加前缀解决id冲突一样，假如有两个元素发生命名冲突时，我们就再把前缀加长直至不再冲突为止，那就有可能出现很JAVA的com-cnblogs-fsjohnhuang-alert的命名，噪音明显有点多，直接降低语义化的程度，重点还有每次引用该元素时都要敲这么多字符，打字的累看的也累。这一切的根源就是有且仅有一个Scope——Global Scope，因此像解决命名冲突的附加信息则无法通过上下文来隐式的提供，直接导致需要通过前缀的方式来硬加上去。

#!usr/bin/env python# -*- coding: utf-8 -*-from django.http import HttpResponsedef index(request):  return HttpResponse('Hello World!')

存在命名冲突时

#!usr/bin/env python# -*- coding: utf-8 -*-import django.db.modelsimport peeweetype(django.db.models.CharField)type(peewee.CharField)

前缀也能有选择的省略就好了！

把玩Custome Element v0

 对元素命名吐嘈一地后，是时候把玩API了。

从头到脚定义新元素

/** x-alert元素定义 **/const xAlertProto = Object.create(HTMLElement.prototype, {  /* 元素生命周期的事件 */  // 实例化时触发  createdCallback: {    value: function(){      console.log('invoked createCallback!')      const raw = this.innerHTML      this.innerHTML = `
      
                          
                                   ×                                                    
       
        ${raw}
       
                        
      
`      this.querySelector('button.close').addEventListener('click', _ => this.close())    }  },  // 元素添加到DOM树时触发  attachedCallback: {    value: function(){      console.log('invoked attachedCallback!')    }  },  // 元素DOM树上移除时触发  detachedCallback: {    value: function(){      console.log('invoked detachedCallback!')    }  },  // 元素的attribute发生变化时触发  attributeChangedCallback: {    value: function(attrName, oldVal, newVal){      console.log(`attributeChangedCallback-change ${attrName} from ${oldVal} to ${newVal}`)    }  },  /* 定义元素的公有方法和属性 */  // 重写textContent属性  textContent: {    get: function(){ return this.querySelector('.content').textContent },    set: function(val){ this.querySelector('.content').textContent = val }  },  close: {    value: function(){ this.style.display = 'none' }  },  show: {    value: function(){ this.style.display = 'block' }  }}) // 向浏览器注册自定义元素const XAlert = document.registerElement('x-alert', { prototype: xAlertProto })/** 操作 **/// 实例化const xAlert1 = new XAlert() // invoked createCallback!const xAlert2 = document.createElement('x-alert') // invoked createCallback!// 添加到DOM树document.body.appendChild(xAlert1) // invoked attachedCallback!// 从DOM树中移除xAlert1.remove() // invoked detachedCallback!// 仅作为DIV的子元素，而不是DOM树成员不会触发attachedCallback和detachedCallback函数const d = document.createElement('div')d.appendChild(xAlert1)xAlert1.remove()// 访问元素实例方法和属性xAlert1.textContent = 1console.log(xAlert1.textContent) // 1xAlert1.close()// 修改元素实例特性xAlert1.setAttribute('d', 1) // attributeChangedCallback-change d from null to 1xAlert1.removeAttribute('d') // attributeChangedCallback-change d from 1 to null // setAttributeNode和removeAttributeNode方法也会触发attributeChangedCallback

 上面通过定义x-alert元素展现了Custom Element的所有API，其实就是继承HTMLElement接口，然后选择性地实现4个生命周期回调方法，而在createdCallback中书写自定义元素内容展开的逻辑。另外可以定义元素公开属性和方法。最后通过document.registerElement方法告知浏览器我们定义了全新的元素，你要好好对它哦！

渐进增强原生元素

 有时候我们只是想在现有元素的基础上作些功能增强，倘若又要从头做起那也太折腾了，幸好Custom Element规范早已为我们想好了。下面我们来对input元素作增强

const xInputProto = Object.create(HTMLInputElement.prototype, {  createdCallback: {    value: function(){ this.value = 'x-input' }  },  isEmail: {    value: function(){      const val = this.value      return /[0-9a-zA-Z]+@\S+\.\S+/.test(val)    }  }})document.registerElement('x-input', {  prototype: xInputProto,  extends: 'input'})// 操作const xInput1 = document.createElement('input', 'x-input') // console.log(xInput1.value) // x-inputconsole.log(xInput1.isEmail()) // false

Custom Element v1 —— 换个装而已啦

 Custom Element API现在已经升级到v1版本了，其实就是提供一个专门的window.customElements作为入口来统一管理和操作自定义元素，并且以对ES6 class更友善的方式定义元素，其中的步骤和概念并没有什么变化。下面我们采用Custom Element v1的API重写上面两个示例

1. 从头定义

class XAlert extends HTMLElement{  // 相当于v0中的createdCallback，但要注意的是v0中的createdCallback仅元素处于resolved状态时才触发，而v1中的constructor就是即使元素处于undefined状态也会触发，因此尽量将操作延迟到connectedCallback里执行  constructor(){    super() // 必须调用父类的构造函数    const raw = this.innerHTML    this.innerHTML = `
      
                        
                                 ×                                                
       
        ${raw}
       
                      
      
`    this.querySelector('button.close').addEventListener('click', _ => this.close())  }  // 相当于v0中的attachedCallback  connectedCallback(){    console.log('invoked connectedCallback!')  }  // 相当于v0中的detachedCallback  disconnectedCallback(){    console.log('invoked disconnectedCallback!')  }  // 相当于v0中的attributeChangedCallback,但新增一个可选的observedAttributes属性来约束所监听的属性数目  attributeChangedCallback(attrName, oldVal, newVal){    console.log(`attributeChangedCallback-change ${attrName} from ${oldVal} to ${newVal}`)  }  // 缺省时表示attributeChangedCallback将监听所有属性变化，若返回数组则仅监听数组中的属性变化  static get observedAttributes(){ return ['disabled'] }  // 新增事件回调，就是通过document.adoptNode方法修改元素ownerDocument属性时触发  adoptedCallback(){    console.log('invoked adoptedCallback!')  }  get textContent(){    return this.querySelector('.content').textContent  }  set textContent(val){    this.querySelector('.content').textContent = val  }  close(){    this.style.display = 'none'  }  show(){    this.style.display = 'block'  }}customElements.define('x-alert', XAlert)

1. 渐进增强

class XInput extends HTMLInputElement{  constructor(){    super()    this.value = 'x-input'  }  isEmail(){    const val = this.value    return /[0-9a-zA-Z]+@\S+\.\S+/.test(val)  }}customElements.define('x-input', XInput, {
     extends: 'input'})// 实例化方式document.createElement('input', {is: 'x-input'})new XInput()

 除此之外之前的unresolved状态改成defined和undefined状态，CSS对应的选择器为:defined和:not(:defined)。

        
       
        Twitter
         
       
        Facebook
         
       
        G+
       
      // Fetch all the children of 
      
        that are not defined yet.let undefinedButtons = buttons.querySelectorAll(':not(:defined)');let promises = [...undefinedButtons].map(socialButton => {  return customElements.whenDefined(socialButton.localName);));// Wait for all the social-buttons to be upgraded.Promise.all(promises).then(() => {  // All social-button children are ready.});
      

从头定义一个刚好可用的元素不容易啊！

 到这里我想大家已经对Custom Element API有所认识了，下面我们尝试自定义一个完整的元素吧。不过再实操前，我们先看看一个刚好可用的元素应该注意哪些细节。

明确各阶段适合的操作

1.constructor

更细的细节

1.constructor中的细节

下面我们来撸个x-btn吧

class XBtn extends HTMLElement{  static get observedAttributes(){ return ['disabled'] }  constructor(){    super()    this.addEventListener('keydown', e => {      if (!~[13, 32].indexOf(e.keyCode)) return        this.dispatchEvent(new MouseEvent('click', {        cancelable: true,        bubbles: true      }))    })    this.addEventListener('click', e => {      if (this.disabled){        e.stopPropagation()        e.preventDefault()      }    })  }  connectedCallback(){    this.setAttribute('tabindex', 0)    this.setAttribute('role', 'button')  }  get disabled(){    return this.hasAttribute('disabled')  }  set disabled(val){    if (val){      this.setAttribute('disabled','')    }    else{      this.removeAttribute('disabled')    }  }  attributeChangedCallback(attrName, oldVal, newVal){    this.setAttribute('aria-disabled', !!this.disabled)    if (this.disabled){      this.removeAttribute('tabindex')    }    else{      this.setAttribute('tabindex', '0')    }  }}customElements.define('x-btn', XBtn)

如何开始使用Custom Element v1?

 Chrome54默认支持Custom Element v1，Chrome53则须要修改启动参数chrome --enable-blink-features=CustomElementsV1。其他浏览器可使用webcomponets.js这个polyfill。

题外话一番

 关于Custom Element我们就说到这里吧，不过我在此提一个有点怪但又确实应该被注意到的细节问题，那就是自定义元素是不是一定要采用<x-alert></x-alert>来声明呢？能否采用<x-alert/>或<x-alert>的方式呢？

1. Void elements
   格式为<tag-name>,包含以下元素area,base,br,col,embed,hr,img,keygen,link,meta,param,source,track,wbr
2. Raw text elements
   格式为<tag-name></tag-name>,包含以下元素script,style
3. escapable raw text elements
   格式为<tag-name></tag-name>,包含以下元素textarea,title
4. Foreign elements
   格式为<tag-name/>,MathML和SVG命名空间下的元素
5. Normal elements
   格式为<tag-name></tag-name>,除上述4种元素外的其他元素。某些条件下可以省略结束标签，因为浏览器会自动为我们补全，但结果往往会很吊轨，所以还是自己写完整比较安全。

总结

 当头一回听到Custom Element时我是那么的兴奋不已，犹如找到根救命稻草似的。但如同其他新技术的出现一样，利弊同行，如何判断和择优利用是让人头痛的事情，也许前人的经验能给我指明方向吧！下篇《WebComponent魔法堂:深究Custom Element 之 从过去看现在》，我们将穿越回18年前看看先驱HTML Component的黑历史，然后再次审视WebComponent吧！

感谢