Web Components不是單一的規(guī)范，而是一系列的技術(shù)組成，包括Template、Custom Element、Shadow DOM、HTML Import四種技術(shù)規(guī)范。使用時(shí)，并不一定這四者都要用到。其中，Custom Element和Shadow DOM最重要，Template和HTML Import只起到輔助作用。
template標(biāo)簽
document.importNode方法用于克隆外部文檔的DOM節(jié)點(diǎn)。
//檢查瀏覽器是否支持
'content' in document.createElement('template');
//模板
<template id="profileTemplate">
<div class="profile">
<img src="" class="profile__img">
</div>
</template>
//使用模板，并且修改模板內(nèi)部?jī)?nèi)容
var template = document.querySelector('#profileTemplate');
template.content.querySelector('.profile__img').src = 'profile.jpg';
Custom Element
HTML預(yù)定義的網(wǎng)頁(yè)元素，有時(shí)并不符合我們的需要，這時(shí)可以自定義網(wǎng)頁(yè)元素，這就叫做Custom Element。它是Web component技術(shù)的核心。舉例來(lái)說(shuō)，你可以自定義一個(gè)叫做super-button的網(wǎng)頁(yè)元素。
//檢查瀏覽器是否支持
'registerElement' in document
//使用自定義元素前，必須用document對(duì)象的registerElement方法登記該元素。該方法返回一個(gè)自定義元素的構(gòu)造函數(shù)。
var SuperButton = document.registerElement('super-button');
document.body.appendChild(new SuperButton());
//如果想讓自定義元素繼承某種特定的網(wǎng)頁(yè)元素，就要指定extends屬性。比如，想讓自定義元素繼承h1元素，需要寫成下面這樣。
var MyElement = document.registerElement('another-heading', {
prototype: Object.create(HTMLElement.prototype),
extends: 'h1'
});
//添加屬性和方法
var XFoo = document.registerElement('x-foo', {
prototype: Object.create(HTMLElement.prototype, {
bar: {
get: function() { return 5; }
},
foo: {
value: function() {
console.log('foo() called');
}
}
})
});
回調(diào)函數(shù)：
- createdCallback：實(shí)例生成時(shí)觸發(fā)
- attachedCallback：實(shí)例插入HTML文檔時(shí)觸發(fā)
- detachedCallback：實(shí)例從HTML文檔移除時(shí)觸發(fā)
- attributeChangedCallback(attrName, oldVal, newVal)：實(shí)例的屬性發(fā)生改變時(shí)（添加、移除、更新）觸發(fā)
Shadow DOM
所謂Shadow DOM指的是，瀏覽器將模板、樣式表、屬性、JavaScript代碼等，封裝成一個(gè)獨(dú)立的DOM元素。外部的設(shè)置無(wú)法影響到其內(nèi)部，而內(nèi)部的設(shè)置也不會(huì)影響到外部，與瀏覽器處理原生網(wǎng)頁(yè)元素（比如<video>元素）的方式很像。Shadow DOM最大的好處有兩個(gè)，一是可以向用戶隱藏細(xì)節(jié)，直接提供組件，二是可以封裝內(nèi)部樣式表，不會(huì)影響到外部。
var shadowRoot = element.createShadowRoot();
document.body.appendChild(shadowRoot);
HTML Import
網(wǎng)頁(yè)可以加載外部的樣式表、腳本、圖片、多媒體，卻無(wú)法方便地加載其他網(wǎng)頁(yè)，iframe和ajax都只能提供部分的解決方案，且有很大的局限。HTML Import就是為了解決加載外部網(wǎng)頁(yè)這個(gè)問(wèn)題，而提出來(lái)的。
//檢測(cè)瀏覽器是否支持
'import' in document.createElement('link');
