?等自定義標(biāo)簽。最大區(qū)別在于，自定義標(biāo)簽有著自己的模板、行為和標(biāo)簽名稱，通過(guò)Javascript的API實(shí)現(xiàn)的。Custom Elements?總是使用連字符-?進(jìn)行自定義標(biāo)簽的標(biāo)識(shí)，即
通過(guò)customElements.define來(lái)簡(jiǎn)單注冊(cè)自定義組件，下面就來(lái)簡(jiǎn)單實(shí)踐下：
// one-button.jshello onechuan `
運(yùn)行展示：
5.Shadow DOM Shadow DOM?與原生DOM的區(qū)別就是用戶自定義封裝的DOM，本質(zhì)上還是DOM元素。不同的是，Shadow DOM?可以將自定義的DOM片段與其他DOM進(jìn)行隔離，可以實(shí)現(xiàn)樣式不受外部DOM的影響，類似于使用iframe?內(nèi)嵌了一個(gè)html。也正是Shadow DOM的存在，能夠進(jìn)行DOM隔離、實(shí)現(xiàn)獨(dú)立的組件王國(guó)，使得自定義組件跨域框架的約束，不再耦合，確保在任何無(wú)框架和任何框架中正常使用。
如圖所示：
圖示來(lái)自MDN文檔
一些 Shadow DOM 特有的術(shù)語(yǔ)：
Shadow host：一個(gè)常規(guī) DOM 節(jié)點(diǎn)，Shadow DOM 會(huì)被附加到這個(gè)節(jié)點(diǎn)上。 Shadow tree：Shadow DOM 內(nèi)部的 DOM 樹。 Shadow boundary：Shadow DOM 結(jié)束的地方，也是常規(guī) DOM 開始的地方。 Shadow root: Shadow tree 的根節(jié)點(diǎn)。 Shadow DOM ?并不是新生事物，在原生?標(biāo)簽中其實(shí)就有內(nèi)置的Shadow DOM ?，包含一系列的按鈕和其他控制器等。而Web Components?只不過(guò)是允許用戶根據(jù)需要使用Shadow DOM來(lái)實(shí)現(xiàn)自定義標(biāo)簽。
那么，就接著上面的例子一起來(lái)實(shí)現(xiàn)下：
// one-button.jshello onechuan `
運(yùn)行得到：
在上面運(yùn)行結(jié)果中，實(shí)現(xiàn)的展示效果是一樣，但是渲染的dom節(jié)點(diǎn)卻有所不同，在使用shadow dom?實(shí)現(xiàn)的標(biāo)簽中會(huì)有#shadow-root字樣標(biāo)識(shí)。
接下來(lái)，我們給他們添加上樣式，進(jìn)行對(duì)比：
hello yichuan 運(yùn)行結(jié)果：
在上面代碼片段中，在全局對(duì)button?標(biāo)簽進(jìn)行設(shè)置樣式，運(yùn)行結(jié)果表明并未影響到shadow dom中的樣式。
6.Template 見到template?模板，使用過(guò)vue框架的開發(fā)者就再熟悉不過(guò)了，template?標(biāo)簽本身不會(huì)在html?中進(jìn)行立即渲染，而是用于對(duì)待使用的代碼進(jìn)行標(biāo)記，在需要被使用的時(shí)候才會(huì)進(jìn)行渲染。也正是因?yàn)閠emplate?的特性，使得我們可以將一些可重復(fù)使用的代碼用template?進(jìn)行組織，通過(guò)javascript獲取它的引用，再添加到DOM中。
For Example：
hello yichuan
在上面代碼片段中，可以看到在需要使用的時(shí)候?qū)⒛０鍍?nèi)容追加到shadow dom中，即模板內(nèi)容不會(huì)立即被渲染，而是在被調(diào)用后才會(huì)在頁(yè)面進(jìn)行渲染。
注意：
為什么這里使用Node.cloneNode() 方法添加了模板的拷貝到陰影的根結(jié)點(diǎn)上？
這是因?yàn)樵谔砑幽０鍍?nèi)容到shadow dom?時(shí)，后續(xù)可以添加樣式信息到模板的style標(biāo)簽上，也會(huì)將其封裝到自定義標(biāo)簽中，倘若直接將模板添加到原生DOM元素中不起作用的。
7.Slots 插槽由其name屬性標(biāo)識(shí)，并且允許您在模板中定義占位符，當(dāng)在標(biāo)記中使用該元素時(shí)，該占位符可以填充所需的任何 HTML 標(biāo)記片段。使用過(guò)vue框架的開發(fā)者，對(duì)這部分內(nèi)容再熟悉不過(guò)了。
hello yichuan 運(yùn)行結(jié)果：
在上面片段中，在使用自定義標(biāo)簽的時(shí)候，如果?中沒(méi)有插入任何內(nèi)容，展示的將是hello onechuan?，倘若在在使用時(shí)插入了自定義內(nèi)容，則展示自定義內(nèi)容hello yichuan。
當(dāng)然，當(dāng)自定義組件中有多個(gè)地方使用插槽，可以通過(guò)給每個(gè)插槽命名進(jìn)行標(biāo)識(shí)，即：命名插槽。
類似于：vue中的mount。
hello yichuan 運(yùn)行結(jié)果：
?connectedCallback
connectedCallback?方法會(huì)在自定義組件插入DOM的首次渲染時(shí)調(diào)用一次。此時(shí) shadow dom?已經(jīng)掛載到DOM樹上，對(duì)此可以通過(guò)connectedCallback?方法來(lái)訪問(wèn)shadow dom上的屬性、子元素以及監(jiān)聽事件。倘若組件被移除或被移動(dòng)，將會(huì)再次被調(diào)用。
運(yùn)行結(jié)果：
在上面代碼片段中，看到在進(jìn)行渲染初始化后，會(huì)進(jìn)行執(zhí)行一次connectedCallback的內(nèi)容。
?attributeChangedCallback
監(jiān)聽custom element?自身屬性的增刪改，當(dāng)發(fā)生狀態(tài)改變時(shí)調(diào)用此方法，在使用前必須在一個(gè)observedAttributes() ?的靜態(tài)方法中定義要觀察的屬性。該方法返回一個(gè)屬性名稱的數(shù)組。一旦observedAttributes?返回了屬性值數(shù)組，則attributeChangedCallback方法會(huì)在每次該屬性變化時(shí)調(diào)用。
這個(gè)方法有三個(gè)參數(shù)：屬性名稱被改變，該屬性的舊值，以及更新的值。當(dāng)this.setAttribute()觸發(fā)時(shí)，屬性會(huì)被更新。
disconnectedCallback
當(dāng) custom element? 從文檔 DOM? 中刪除時(shí)，disconnectedCallback被調(diào)用。
8.寫在最后 在我們上述實(shí)現(xiàn)的自定義組件，可以在整個(gè)項(xiàng)目中重復(fù)使用。簡(jiǎn)而言之，在構(gòu)建Web Components時(shí)，步驟如下：
首先，必須使用customElements.define()注冊(cè)自定義元素； 構(gòu)造函數(shù)會(huì)調(diào)用，將節(jié)點(diǎn)添加到shadow dom中 然后，進(jìn)行一次初始化，執(zhí)行connectedCallback方法； 當(dāng)元素的屬性被更新時(shí)，它的attributeChangedCallback()被觸發(fā)； 當(dāng)一個(gè)事件從元素中被移除時(shí)，disconnectedCallback()方法被調(diào)用以清理事件監(jiān)聽器。 shadow dom - 是DOM的一個(gè)封裝版本，用于防止CSS泄露。 Slots ?- 用于添加和訪問(wèn)自定義元素組件的子元素，也有一種特殊的方式來(lái)訪問(wèn)使用命名為Slot的子元素。 本文參考和整理了許多文檔資料，學(xué)而知不足，繼續(xù)前行。
9.參考文章 《Web Components Basic to Advanced》
《MDN文檔》
《重磅！哈啰 Quark Design 正式開源，下一代跨技術(shù)棧前端組件庫(kù)》
http://fisionsoft.com.cn/article/djddsss.html
建站
咨詢
售后
建站咨詢
