Web 組件簡介編寫可以復(fù)用的 HTML 模板(本文)從 0 開始創(chuàng)建自定義元素使用 Shadow DOM 封裝樣式和結(jié)構(gòu)Web 組件的高階工具

Web 組件規(guī)范中最不被認(rèn)可但是最強(qiáng)大的功能之一是? 元素。在這個系列的第一篇文章中，我們將這種模板元素定義為『僅在調(diào)用時才渲染的用戶自定義 HTML 模板』。換句話說，模板就是一種當(dāng)瀏覽器被告知時才執(zhí)行的 HTML 代碼，其他情況下是被忽略的。

這種模塊可以通過許多有趣的方式去傳遞和應(yīng)用。基于本文的目的，我們將看下如何為一種最終應(yīng)用到自定義元素中的對話框創(chuàng)建模板。

就像它聽起來這樣簡單，一個? 是一種 HTML 元素，所以一個含內(nèi)容的模板所具備的最基本形式如下：

在瀏覽器中運(yùn)行這段代碼會顯示空白頁面，因?yàn)闉g覽器并沒有渲染模板元素內(nèi)容。這種方式的強(qiáng)大之處在于它允許我們保存自定義內(nèi)容(或內(nèi)容結(jié)構(gòu))，以供后續(xù)使用，而不需要使用 JavaScript 來動態(tài)編寫 HTML 代碼。

為了使用模板，我們 將 需要用到 JavaScript。

真正神奇的地方在于? 方法。這個函數(shù)將會為模板的? 創(chuàng)建一份副本，并且做好將拷貝插入其他文檔(或文檔片段)的準(zhǔn)備。函數(shù)的第一個參數(shù)獲取到模板的內(nèi)容，第二個參數(shù)告訴瀏覽器要對元素的 DOM 子樹做一份深度拷貝(也就是拷貝它的所有子節(jié)點(diǎn))。

我們可以直接使用 ，但是這樣做的話，我們隨后需要把內(nèi)容從元素中移除并將它拼接到其他文檔的 body 部分。任何 DOM 節(jié)點(diǎn)僅可以被接入到一個位置，所以隨后對模板內(nèi)容的使用將會導(dǎo)致空文檔片段(基本上是一個空值)，因?yàn)橹耙岩苿恿藘?nèi)容對象。使用? 允許我們在不同的位置來復(fù)用同一個模板內(nèi)容的實(shí)例。

以上代碼執(zhí)行后，節(jié)點(diǎn)內(nèi)容會被拼接到? 對象，并被渲染顯示給用戶。這樣最終使我們能夠做許多有趣的事情，比如為我們的用戶(或者我們程序的消費(fèi)者)提供創(chuàng)建內(nèi)容的模板，類似下面的 demo，在第一篇文章我們討論過：

請參閱筆記模板樣例，來自 CodePen 的 Caleb Williams (@calebdwilliams)。

這個例子中，我們提供了兩個模板來渲染同樣的內(nèi)容 —— 作者和他寫的書。當(dāng)表格變化時，我們選擇渲染與該變化值相關(guān)聯(lián)的模板。使用相同的技術(shù)允許我們最終創(chuàng)建一個自定義元素，該元素將使用稍后定義的模板。

模板中一個有趣的點(diǎn)是我們可以包含 任意 HTML，包括腳本和樣式元素。一個非常簡單的模板例子是添加一個可以提示被點(diǎn)擊的按鈕。

讓我們加點(diǎn)樣式：

…然后通過一個非常簡單的腳本來調(diào)用按鈕：

當(dāng)然，我們可以直接使用? 和? 標(biāo)簽來將他們放在同一個文件中，而非放在分離的文件中：

一旦這個元素被加入到 DOM 結(jié)構(gòu)中，我們會看到一個 ID 為? 的新按鈕，一個全局的 CSS selector 被綁定到這個按鈕的 ID，一個簡單的事件監(jiān)聽回調(diào)函數(shù)會提示元素的點(diǎn)擊事件。

至于我們的腳本，我們僅需使用? 來拼接內(nèi)容，并且我們有一個包含大致內(nèi)容的 HTML 模板，在頁與頁之間可以復(fù)用。

請參閱筆記包含腳本和樣式的模板例子，來自 CodePen 的 Caleb Williams (@calebdwilliams)。

回到我們編寫一個對話框元素這個任務(wù)，我們希望定義自己的模板內(nèi)容和樣式。

這段代碼將成為我們對話框的基礎(chǔ)部分。簡單介紹一下，我們有一個全局的關(guān)閉按鈕，一個標(biāo)題和一些內(nèi)容。我們也添加了一些行為來實(shí)現(xiàn)可視化觸發(fā)對話框(盡管它還無法被訪問)。不幸的是，樣式和腳本內(nèi)容并非僅限作用于我們的模板，而是應(yīng)用于整個文件，當(dāng)我們將多個模板實(shí)例添加到 DOM 時，并沒有產(chǎn)生理想的中的效果。在下篇文章中，我們將應(yīng)用自定義元素f生成方法并創(chuàng)建我們自己的元素，實(shí)時使用該模板并封裝元素的行為。

總結(jié)

以上是生活随笔為你收集整理的html如何复用其它页面,编写可以复用的 HTML 模板的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。