最近2018中文字幕在日韩欧美国产成人片_国产日韩精品一区二区在线_在线观看成年美女黄网色视频_国产精品一区三区五区_国产精彩刺激乱对白_看黄色黄大色黄片免费_人人超碰自拍cao_国产高清av在线_亚洲精品电影av_日韩美女尤物视频网站

 
 

  
  
document.registerElement('x-foo', {
  
  
  prototype: Object.create(HTMLElement.prototype, {
  
  
    createdCallback: {      
  
  
      value: function() { ... }
  
  
    },
  
  
    ...
  
  
  })
  
  
}) 
 
 

是不是嗅到了 React 的味道?好吧，React 說它自己主要不是做這個事情的。

生命周期和回調

在這個 API 的基礎上，Web Components 標準提供了一系列控制自定義元素的方法。我們來一一看下：

一個自定義元素會經歷以下這些生命周期：

• 注冊前創(chuàng)建
• 注冊自定義元素定義
• 在注冊后創(chuàng)建元素實例
• 元素插入到 document 中
• 元素從 document 中移除
• 元素的屬性變化時

這個是很重要的內容，開發(fā)者可以在注冊新的自定義元素時指定對應的生命周期回調來為自定義元素添加各種自定義的行為，這些生命周期回調包括了：

createdCallback

自定義元素注冊后，在實例化之后會調用，通常多用于做元素的初始化，如插入子元素，綁定事件等。

• attachedCallback
  元素插入到 document 時觸發(fā)。
• detachedCallback

元素從 document 中移除時觸發(fā)，可能會用于做類似 destroy 之類的事情。

• attributeChangedCallback
  元素屬性變化時觸發(fā)，可以用于從外到內的通信。外部通過修改元素的屬性來讓內部獲取相關的數據并且執(zhí)行對應的操作。

這個回調在不同情況下有對應不同的參數：

• 設置屬性時，參數列表是：屬性名稱，null，值，命名空間
• 修改屬性時，參數列表是：屬性名稱，舊值，新值，命名空間
• 刪除屬性時，參數列表是：屬性名稱，舊值，null，命名空間

好了，就上邊了解到的基礎上，假設我們要創(chuàng)建一個自定義的 button-hello 按鈕，點擊時會 alert('hello world')，代碼如下：

 
 

  
  
document.registerElement('button-hello', {
  
  
  prototype: Object.create(HTMLButtonElement.prototype, {
  
  
    createdCallback: {
  
  
      value: function createdCallback() {
  
  
        this.innerHTML = 'hello world'
  
  
        this.addEventListener('click', () => {
  
  
          alert('hello world')
  
  
        })
  
  
      }
  
  
    }
  
  
  })
  
  
}) 
 
 

要留意上述代碼執(zhí)行之后才能使用

擴展原有元素

其實，如果我們需要一個按鈕，完全不需要重新自定義一個元素，Web Components 標準提供了一種擴展現(xiàn)有標簽的方式，把上邊的代碼調整一下：

 
 

  
  
document.registerElement('button-hello', {
  
  
  prototype: Object.create(HTMLButtonElement.prototype, {
  
  
    createdCallback: {
  
  
      value: function createdCallback() {
  
  
        this.addEventListener('click', () => {
  
  
          alert('hello world')
  
  
        })
  
  
      }
  
  
    }
  
  
  }),
  
  
  extends: 'button'
  
  
}) 
 
 

然后在 HTML 中要這么使用：

 
 

  
  
hello world
 
 

使用 is 屬性來聲明一個擴展的類型，看起來也蠻酷的。生命周期和自定義元素標簽的保持一致。

當我們需要多個標簽組合成新的元素時，我們可以使用自定義的元素標簽，但是如果只是需要在原有的 HTML 標簽上進行擴展的話，使用 is 的這種元素擴展的方式就好。

原有的 createElement 和 createElementNS，在 Web Components 標準中也擴展成為支持元素擴展，例如要創(chuàng)建一個 button-hello：

 
 

  
  
const hello = document.createElement('button', 'button-hello')
 
 

標準文檔中還有很多細節(jié)上的內容，例如接口的參數說明和要求，回調隊列的實現(xiàn)要求等，這些更多是對于實現(xiàn)這個標準的瀏覽器開發(fā)者的要求，這里不做詳細描述了，內容很多，有興趣的自行查閱：Cutsom Elements 2016.02.26。

和最新版的區(qū)別

前邊我提到說文檔的更新變化很快，截止至我寫這個文章的時候，最新的文檔是這個：Custom Elements 2016.07.21。

細節(jié)不做描述了，講講我看到的最大變化，就是向 ES6 靠攏。大致有下邊三點：

• 從原本的擴展 prototype 來定義元素調整為建議使用 class extends 的方式
• 注冊自定義元素接口調整，更加方便使用，傳入 type 和 class 即可
• 生命周期回調調整，createdCallback 直接用 class 的 constructor

前兩個點，我們直接看下代碼，原本的代碼按照新的標準，應該調整為：

 
 

  
  
class ButtonHelloElement extends HTMLButtonElement {
  
  
  constructor() {
  
  
    super()
  
  

  
  
    this.addEventListener('click', () => {
  
  
      alert('hello world')
  
  
    })
  
  
  }
  
  
}
  
  

  
  
customElements.define('button-hello', ButtonHelloElement, { extends: 'button' }) 
 
 

從代碼上看會感覺更加 OO，編寫上也比原本要顯得方便一些，原本的生命周期回調是調整為新的：

• constructor in class 作用相當于原本的 createdCallback
• connectedCallback 作用相當于 attachedCallback
• disconnectedCallback 作用相當于 detachedCallback
• adoptedCallback 使用 document.adoptNode(node) 時觸發(fā)
• attributeChangedCallback 和原本保持一致

connect 事件和插入元素到 document 有些許區(qū)別，主要就是插入元素到 document 時，元素狀態(tài)會變成 connected，這時會觸發(fā) connectedCallback，disconnect 亦是如此。

HTML Imports

概述

HTML Imports 是一種在 HTMLs 中引用以及復用其他的 HTML 文檔的方式。這個 Import 很漂亮，可以簡單理解為我們常見的模板中的include 之類的作用。

我們最常見的引入一個 css 文件的方式是：

Web Components 現(xiàn)在提供多了一個這個：

HTMLLinkElement

原本的 link 標簽在添加了 HTML Import 之后，多了一個只讀的 import 屬性，當出現(xiàn)下邊兩種情況時，這個屬性為 null：

• 該 link 不是用來 import 一個 HTML 的。
• 該 link 元素不在 document 中。

否則，這個屬性會返回一個表示引入的 HTML 文件的文檔對象，類似于 document。比如說，在上邊的代碼基礎上，可以這樣做：

 
 

  
  
const link = document.querySelector('link[rel=import]')
  
  
const header = link.import;
  
  

  
  
const pulse = header.querySelector('div.logo'); 
 
 

阻塞式

我們要知道的是，默認的 link 加載是阻塞式的，除非你給他添加一個 async 標識。

阻塞式從某種程度上講是有必要的，當你 improt 的是一個完整的自定義組件并且需要在主 HTML 中用標簽直接使用時，非阻塞的就會出現(xiàn)錯誤了，因為標簽還沒有被注冊。

document

有一點值得留意的是，在 import 的 HTML 中，我們編寫的 script 里邊的 document 是指向 import 這個 HTML 的主 HTML 的 document。

如果我們要獲取 import 的 HTML 的 document 的話，得這么來：

 
 

  
  
const d = document.currentScript.ownerDocument
 
 

這樣設計是因為 import 進來的 HTML 需要用到主 HTML 的 document。例如我們上邊提到的 registerElement。

在一個被 import 的 HTML 文件中使用下邊三個方法會拋出一個 InvalidStateError 異常：

• document.open()
• document.write()
• document.close()

對于 HTML Import，標準文檔中還有很大一部分內容是關于多個依賴加載的處理算法的，在這里就不詳述了，有機會的話找時間再開篇談，這些內容是需要瀏覽器去實現(xiàn)的。

HTML Templates

概述

這個東西很簡單，用過 handlebars 的人都知道有這么一個東西：

 
 

  
  

  
  
  ...
  
  
 
 
 

其他模板引擎也有類似的東西，那么 HTML Templates 便是把這個東西官方標準化，提供了一個 template 標簽來存放以后需要但是暫時不渲染的 HTML 代碼。

以后可以這么寫了：

 
 

  
  

  
  
  ...
  
  
 
 
 

接口和應用

template 元素有一個只讀的屬性 content，用于返回這個 template 里邊的內容，返回的結果是一個 DocumentFragment。

具體是如何使用的，直接參考官方給出的例子：

 
 

  
  

  
  

  
  
  
  
  
    
  
  
  
  
  
    
Smile!
  
  
    
  
  
 
 
 

使用 DocumentFragment 的 clone 方法以 template 里的代碼為基礎創(chuàng)建一個元素節(jié)點，然后你便可以操作這個元素節(jié)點，最后在需要的時候插入到 document 中特定位置便可以了。

Template 相關的東西不多，而且它現(xiàn)在已經是納入生效的 標準文檔 中了。

我們接下來看看重磅的 Shadow DOM。

Shadow DOM

概述

Shadow DOM 好像提出好久了，最本質的需求是需要一個隔離組件代碼作用域的東西，例如我組件代碼的 CSS 不能影響其他組件之類的，而 iframe 又太重并且可能有各種奇怪問題。

可以這么說，Shadow DOM 旨在提供一種更好地組織頁面元素的方式，來為日趨復雜的頁面應用提供強大支持，避免代碼間的相互影響。

看下在 chrome 它會是咋樣的：

我們可以通過 createShadowRoot() 來給一個元素節(jié)點創(chuàng)建 Shadow Root，這些元素類型必須是下邊列表的其中一個，否則會拋出 NotSupportedError 異常。

• 自定義的元素
• article
• aside
• blockquote
• body
• div
• header, footer
• h1, h2, h3, h4, h5, h6
• nav
• p
• section
• span

createShadowRoot() 是現(xiàn)在 chrome 實現(xiàn)的 API，來自文檔：https://www.w3.org/TR/2014/WD...。最新的文檔 API 已經調整為 attachShadow()。

返回的 Shadow Root 對象從 DocumentFragment 繼承而來，所以可以使用相關的一些方法，例如shadowRoot.getElementById('id') 來獲取 Shadow DOM 里邊的元素。

簡單的使用如下：

 
 

  
  
const div = document.getElementById('id')
  
  
const shadowRoot = div.createShadowRoot()
  
  
const span = document.createElement('span')
  
  

  
  
span.textContent = 'hello world'
  
  
shadowRoot.appendChild(span) 
 
 

在這里，我把這個 div 成為是這個 Shadow DOM 的 宿主元素，下邊的內容會延續(xù)使用這個稱呼。

Shadow DOM 本身就為了代碼隔離而生，所以在 document 上使用 query 時，是沒法獲取到 Shadow DOM 里邊的元素的，需要在 Shadow Root 上做 query 才行。

在這里附上一個文檔，里邊有詳細的關于新的標準和現(xiàn)在 blink 引擎實現(xiàn)的 Shadow DOM 的區(qū)別，官方上稱之為 v0 和 v1：Shadow DOM v1 in Blink。

API

Shadow Root 除了從 DocumentFragment 繼承而來的屬性和方法外，還多了另外兩個屬性：

• host 只讀屬性，用來獲取這個 Shadow Root 所屬的元素
• innerHTML 用來獲取或者設置里邊的 HTML 字符串，和我們常用的 element.innerHTML 是一樣的

另外，在最新的標準文檔中，元素除了上邊提到的 attachShadow 方法之外，還多了三個屬性：

• assignedSlot 只讀，這個元素如果被分配到了某個 Shadow DOM 里邊的 slot，那么會返回這個對應的 slot 元素
• slot 元素的 slot 屬性，用來指定 slot 的名稱
• shadowRoot 只讀，元素下面對應的 Shadow Root 對象

slot 是什么?接著看下邊的內容，看完下一節(jié)的最后一部分就會明白上述內容和 slot 相關的兩個 API 有什么作用。

slot

slot 提供了在使用自定義標簽的時候可以傳遞子模板給到內部使用的能力，可以簡單看下 Vue 的一個例子。

我們先來看下現(xiàn)在 chrome 可以跑的 v0 版本，這一個版本是提供了一個 content 標簽，代表了一個占位符，并且有一個 select 屬性用來指定使用哪些子元素。

自定義的元素里邊的子元素代碼是這樣的：

 
 

  
  

  
  
  hello
  
  
  test
  
  
 
 
 

那么展現(xiàn)的結果會和下邊的代碼是一樣的：

 
 

  
  

  
  
  
  
  
  test
  
  
 
 
 

這里只是說展現(xiàn)結果，實際上，input-toggle 里邊應該是創(chuàng)建了一個 Shadow DOM，然后 content 標簽引用了目標的 span 內容，在 chrome 看是這樣的：

 然后，是最新標準中的 slot 使用方式，直接上例子代碼：

在自定義的元素標簽是這么使用 slot 的：

 
 

  
  

  
  
  
  
  
  test
  
  

 
 

通過 slot="text" 的屬性來讓元素內部的 slot 占位符可以引用到這個元素，多個元素使用這個屬性也是可以的。這樣子我們便擁有了使用標簽是從外部傳 template 給到自定義元素的內部去使用，而且具備指定放在那里的能力。

CSS 相關

因為有 Shadow DOM 的存在，所以在 CSS 上又添加了很多相關的東西，其中一部分還是屬于討論中的草案，命名之類的可能會有變更，下邊提及的內容主要來自文檔：Shadow DOM in CSS scoping 1，很多部分在 chrome 是已經實現(xiàn)的了，有興趣可以寫 demo 試試。

因為 Shadow DOM 很大程度上是為了隔離樣式作用域而誕生的，主文檔中的樣式規(guī)則不對 Shadow DOM 里的子文檔生效，子文檔中的樣式規(guī)則也不影響外部文檔。

但不可避免的，在某些場景下，我們需要外部可以控制 Shadow DOM 中樣式，如提供一個組件給你，有時候你會希望可以自定義它內部的一些樣式，同時，Shadow DOM 中的代碼有時候可能需要能夠控制其所屬元素的樣式，甚至，組件內部可以定義上邊提到的通過 slot 傳遞進來的 HTML 的樣式。所以呢，是的，CSS 選擇器中添加了幾個偽類，我們一一來看下它們有什么作用。

在閱讀下邊描述的時候，請留意一下選擇器的代碼是在什么位置的，Shadow DOM 內部還是外部。

:host 用于在 Shadow DOM 內部選擇到其宿主元素，當它不是在 Shadow DOM 中使用時，便匹配不到任意元素。

在 Shadow DOM 中的 * 選擇器是無法選擇到其宿主元素的。

:host( ) 括號中是一個選擇器，這個可以理解為是一個用于兼容在主文檔和 Shadow DOM 中使用的方法，當這個選擇器在 Shadow DOM 中時，會匹配到括號中選擇器對應的宿主元素，如果不是，則匹配括號中選擇器能夠匹配到的元素。

文檔中提供了一個例子：

 
 

  
  

  
  
  <"shadow tree">
  
  
    ...