日本综合一区二区|亚洲中文天堂综合|日韩欧美自拍一区|男女精品天堂一区|欧美自拍第6页亚洲成人精品一区|亚洲黄色天堂一区二区成人|超碰91偷拍第一页|日韩av夜夜嗨中文字幕|久久蜜综合视频官网|精美人妻一区二区三区

 
 

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

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

生命周期和回調(diào)

在這個(gè) API 的基礎(chǔ)上，Web Components 標(biāo)準(zhǔn)提供了一系列控制自定義元素的方法。我們來(lái)一一看下：

一個(gè)自定義元素會(huì)經(jīng)歷以下這些生命周期：

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

這個(gè)是很重要的內(nèi)容，開(kāi)發(fā)者可以在注冊(cè)新的自定義元素時(shí)指定對(duì)應(yīng)的生命周期回調(diào)來(lái)為自定義元素添加各種自定義的行為，這些生命周期回調(diào)包括了：

createdCallback

自定義元素注冊(cè)后，在實(shí)例化之后會(huì)調(diào)用，通常多用于做元素的初始化，如插入子元素，綁定事件等。

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

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

• attributeChangedCallback
  元素屬性變化時(shí)觸發(fā)，可以用于從外到內(nèi)的通信。外部通過(guò)修改元素的屬性來(lái)讓內(nèi)部獲取相關(guān)的數(shù)據(jù)并且執(zhí)行對(duì)應(yīng)的操作。

這個(gè)回調(diào)在不同情況下有對(duì)應(yīng)不同的參數(shù)：

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

好了，就上邊了解到的基礎(chǔ)上，假設(shè)我們要?jiǎng)?chuàng)建一個(gè)自定義的 button-hello 按鈕，點(diǎn)擊時(shí)會(huì) 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í)行之后才能使用

擴(kuò)展原有元素

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

 
 

  
  
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 屬性來(lái)聲明一個(gè)擴(kuò)展的類型，看起來(lái)也蠻酷的。生命周期和自定義元素標(biāo)簽的保持一致。

當(dāng)我們需要多個(gè)標(biāo)簽組合成新的元素時(shí)，我們可以使用自定義的元素標(biāo)簽，但是如果只是需要在原有的 HTML 標(biāo)簽上進(jìn)行擴(kuò)展的話，使用 is 的這種元素?cái)U(kuò)展的方式就好。

原有的 createElement 和 createElementNS，在 Web Components 標(biāo)準(zhǔn)中也擴(kuò)展成為支持元素?cái)U(kuò)展，例如要?jiǎng)?chuàng)建一個(gè) button-hello：

 
 

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

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

和最新版的區(qū)別

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

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

• 從原本的擴(kuò)展 prototype 來(lái)定義元素調(diào)整為建議使用 class extends 的方式
• 注冊(cè)自定義元素接口調(diào)整，更加方便使用，傳入 type 和 class 即可
• 生命周期回調(diào)調(diào)整，createdCallback 直接用 class 的 constructor

前兩個(gè)點(diǎn)，我們直接看下代碼，原本的代碼按照新的標(biāo)準(zhǔn)，應(yīng)該調(diào)整為：

 
 

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

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

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

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

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

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

HTML Imports

概述

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

我們最常見(jiàn)的引入一個(gè) css 文件的方式是：

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

HTMLLinkElement

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

• 該 link 不是用來(lái) import 一個(gè) HTML 的。
• 該 link 元素不在 document 中。

否則，這個(gè)屬性會(huì)返回一個(gè)表示引入的 HTML 文件的文檔對(duì)象，類似于 document。比如說(shuō)，在上邊的代碼基礎(chǔ)上，可以這樣做：

 
 

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

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

阻塞式

我們要知道的是，默認(rèn)的 link 加載是阻塞式的，除非你給他添加一個(gè) async 標(biāo)識(shí)。

阻塞式從某種程度上講是有必要的，當(dāng)你 improt 的是一個(gè)完整的自定義組件并且需要在主 HTML 中用標(biāo)簽直接使用時(shí)，非阻塞的就會(huì)出現(xiàn)錯(cuò)誤了，因?yàn)闃?biāo)簽還沒(méi)有被注冊(cè)。

document

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

如果我們要獲取 import 的 HTML 的 document 的話，得這么來(lái)：

 
 

  
  
const d = document.currentScript.ownerDocument
 
 

這樣設(shè)計(jì)是因?yàn)?import 進(jìn)來(lái)的 HTML 需要用到主 HTML 的 document。例如我們上邊提到的 registerElement。

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

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

對(duì)于 HTML Import，標(biāo)準(zhǔn)文檔中還有很大一部分內(nèi)容是關(guān)于多個(gè)依賴加載的處理算法的，在這里就不詳述了，有機(jī)會(huì)的話找時(shí)間再開(kāi)篇談，這些內(nèi)容是需要瀏覽器去實(shí)現(xiàn)的。

HTML Templates

概述

這個(gè)東西很簡(jiǎn)單，用過(guò) handlebars 的人都知道有這么一個(gè)東西：

其他模板引擎也有類似的東西，那么 HTML Templates 便是把這個(gè)東西官方標(biāo)準(zhǔn)化，提供了一個(gè) template 標(biāo)簽來(lái)存放以后需要但是暫時(shí)不渲染的 HTML 代碼。

以后可以這么寫了：

 
 

  
  

  
  
  ...
  
  
 
 
 

接口和應(yīng)用

template 元素有一個(gè)只讀的屬性 content，用于返回這個(gè) template 里邊的內(nèi)容，返回的結(jié)果是一個(gè) DocumentFragment。

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

 
 

  
  

  
  

  
  
  
  
  
    
  
  
  
  
  
    
Smile!
  
  
    
  
  
 
 
 

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

Template 相關(guān)的東西不多，而且它現(xiàn)在已經(jīng)是納入生效的 標(biāo)準(zhǔn)文檔 中了。

我們接下來(lái)看看重磅的 Shadow DOM。

Shadow DOM

概述

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

可以這么說(shuō)，Shadow DOM 旨在提供一種更好地組織頁(yè)面元素的方式，來(lái)為日趨復(fù)雜的頁(yè)面應(yīng)用提供強(qiáng)大支持，避免代碼間的相互影響。

看下在 chrome 它會(huì)是咋樣的：

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

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

createShadowRoot() 是現(xiàn)在 chrome 實(shí)現(xiàn)的 API，來(lái)自文檔：https://www.w3.org/TR/2014/WD...。最新的文檔 API 已經(jīng)調(diào)整為 attachShadow()。

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

簡(jiǎn)單的使用如下：

 
 

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

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

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

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

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

API

Shadow Root 除了從 DocumentFragment 繼承而來(lái)的屬性和方法外，還多了另外兩個(gè)屬性：

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

另外，在最新的標(biāo)準(zhǔn)文檔中，元素除了上邊提到的 attachShadow 方法之外，還多了三個(gè)屬性：

• assignedSlot 只讀，這個(gè)元素如果被分配到了某個(gè) Shadow DOM 里邊的 slot，那么會(huì)返回這個(gè)對(duì)應(yīng)的 slot 元素
• slot 元素的 slot 屬性，用來(lái)指定 slot 的名稱
• shadowRoot 只讀，元素下面對(duì)應(yīng)的 Shadow Root 對(duì)象

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

slot

slot 提供了在使用自定義標(biāo)簽的時(shí)候可以傳遞子模板給到內(nèi)部使用的能力，可以簡(jiǎn)單看下 Vue 的一個(gè)例子。

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

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

 
 

  
  

  
  
  hello
  
  
  test
  
  
 
 
 

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

 
 

  
  

  
  
  
  
  
  test
  
  
 
 
 

這里只是說(shuō)展現(xiàn)結(jié)果，實(shí)際上，input-toggle 里邊應(yīng)該是創(chuàng)建了一個(gè) Shadow DOM，然后 content 標(biāo)簽引用了目標(biāo)的 span 內(nèi)容，在 chrome 看是這樣的：

 然后，是最新標(biāo)準(zhǔn)中的 slot 使用方式，直接上例子代碼：

在自定義的元素標(biāo)簽是這么使用 slot 的：

 
 

  
  

  
  
  
  
  
  test
  
  

 
 

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

CSS 相關(guān)

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

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

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

在閱讀下邊描述的時(shí)候，請(qǐng)留意一下選擇器的代碼是在什么位置的，Shadow DOM 內(nèi)部還是外部。

:host 用于在 Shadow DOM 內(nèi)部選擇到其宿主元素，當(dāng)它不是在 Shadow DOM 中使用時(shí)，便匹配不到任意元素。

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

:host( ) 括號(hào)中是一個(gè)選擇器，這個(gè)可以理解為是一個(gè)用于兼容在主文檔和 Shadow DOM 中使用的方法，當(dāng)這個(gè)選擇器在 Shadow DOM 中時(shí)，會(huì)匹配到括號(hào)中選擇器對(duì)應(yīng)的宿主元素，如果不是，則匹配括號(hào)中選擇器能夠匹配到的元素。

文檔中提供了一個(gè)例子：

 
 

  
  

  
  
  <"shadow tree">
  
  
    ...