Web Components之Custom Elements

什么是Web Component?

Web Components 包含了多种不一样的技术。你能够把Web Components当作是用一系列的Web技术建立的、可重用的用户界面组件的统称。Web Components使开发人员拥有扩展浏览器标签的能力，能够自由的进行定制组件。但截至本文时间，Web Components依然是W3C工做组的一个草案，并为被正式归入标准，但这并不妨碍咱们去学习它。

Web组件

何为Web组件？Web组件相对于Web开发者来讲并不陌生，Web组件是一套封装好的HTML，CSS，以及JavaScript，它最大的特色就是可复用。基本在每个网站上咱们均可以看到各式各样的组件，例以下拉菜单、按钮、图片滚播、日历控件等。慢着，既然咱们已经能够实现web组件的封装，那Web Component这家伙出现的意义是什么呢？Web Component回答道：“大家的实现方式不够优雅也不够完美，仍是看看个人吧”。

由于当咱们使用各类编程技巧对组件进行封装时，一个没法规避的事实是，组件的内部是可被访问和影响的，例如咱们对样式表进行改动时常常会担忧影响到页面组件的样式。而经过Web Component封装出来的组件，咱们能够选择让组件的内部隐藏起来，也就是说，组件内部是与世隔绝的！

Web Component的组成

• Custom Elements
• HTML Templates
• Shadow Dom
• HTML Imports

总的来讲，Web Components包含以上四种技术，本文着重谈谈Custom Element，这也是Web component中最核心的部分。

Custom Elements

自定义元素是一个可由建立者来自定义接口的对象。在建立时咱们须要经过 document.registerElement() 来对自定义元素进行注册。该方法会返回一个元素的构造器，经过该构造器咱们就能够建立咱们的自定义元素的实例了。

var MyButton= document.registerElement('my-button');
document.body.appendChild(new MyButton());

实际上 document.registerElement(tag-name, prototype) 包含两个参数：

tag-name: 自定义元素的标签名，这个标签名必须包含连字符'-'，这样作的母的是用以区分自定义元素和HTML规范的元素

prototype: 这是一个可选的参数，用于描述该元素的原型，在该元素中你能够为自定义元素进行接口的定义

var MyElement = document.registerElement('my-element', { 
  prototype: Object.create(HTMLElement.prototype, { 
    createdCallback: { 
      value: function() { 
        this.innerHTML = "<p>I'm a Custom Element</p>";
      } 
    } 
  }) 
});
document.body.appendChild(new MyElement())

在上面的例子中，咱们经过Object.create()方法建立了一个继承自HTMLElement的对象做为自定义对象的原型，并设置了元素默认的 innerHTML ，若是你对Object.create()方法的第二个参数不熟悉，你最好先去查阅一下。实际上它的上面的例子跟下面给出的写法的效果是同样的：

var MyElementProto = Object.create(HTMLElement.prototype)

MyElementProto.createdCallback = function() {
    this.innerHTML = "<p>I'm a Custom Element</p>"
}

var MyElement = document.registerElement('my-element', { prototype: MyElementProto })

document.body.appendChild(new MyElement())

接着，在页面上咱们能够看到渲染出以下结构：

自定义元素的生命周期

在上面的例子中咱们能够看到自定义元素的原型上有一个 createdCallback 属性，它的值是一个回调函数，在自定义元素被建立的时候被调用。实际上自定义元素在它的生命周期中可能会经历如下几种变化：

• 自定义元素在其注册前被建立
• 自定义元素被注册
• 自定义元素的实例在自定义元素注册后被建立
• 自定义元素被插入到文档中
• 自定义元素从文档中移除
• 自定义元素的属性被建立、移除、修改

在自定义元素经历上面某些变化时，不一样的回调函数会被调用。这些回调函数被保存在一个名为生命周期回调的键值对集合中。咱们可实现的回调函数总共有如下4种，其中 attributeChangedCallback 的回调函数中咱们能够经过其参数访问到操做的属性名、老的属性值、新的属性值。

DOM:

<div id="modify">
  <label class="CEgreen"><input type="radio" name="CEclass" value="green">green box</label>
  <label class="CEred"><input type="radio" name="CEclass" value="red">red box</label>
</div>

JS:

var MyElement = document.registerElement('my-element', { 
  prototype: Object.create(HTMLElement.prototype, { 
    createdCallback: { 
      value: function() {
        this.innerHTML = "<span>I'm a Custom Element</span>"
      }
    },
    attributeChangedCallback: {
      value: function(property, oldValue, newValue) {
        this.innerHTML = "attribute '" + property + "' is modified to " + newValue
      }
    }
  }) 
})
document.body.appendChild(new MyElement())

var temp = document.querySelector("#modify")
var myElement = document.querySelector("my-element")

temp.addEventListener('click', function(e){
  console.log(e.target.value)
  myElement.className = e.target.value
})

 

另外，给自定义元素添加样式和普通元素是同样的，这是上面例子中为自定义元素添加的样式：

my-element {display: inline-block;margin-top: 20px;padding: 10px;font-size: 24px;}

这就是一个最基础的自定义元素的实现了。若是咱们但愿自定义元素内部不受外部样式的影响，咱们须要使用Shadow Dom来对内部dom结构和样式进行封装。