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

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

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

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

在瀏覽器中運行這段代碼會顯示空白頁面，因為瀏覽器并沒有渲染模板元素內容。這種方式的強大之處在于它允許我們保存自定義內容(或內容結構)，以供后續使用，而不需要使用 JavaScript 來動態編寫 HTML 代碼。

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

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

我們可以直接使用 ，但是這樣做的話，我們隨后需要把內容從元素中移除并將它拼接到其他文檔的 body 部分。任何 DOM 節點僅可以被接入到一個位置，所以隨后對模板內容的使用將會導致空文檔片段(基本上是一個空值)，因為之前已移動了內容對象。使用? 允許我們在不同的位置來復用同一個模板內容的實例。

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

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

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

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

讓我們加點樣式：

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

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

一旦這個元素被加入到 DOM 結構中，我們會看到一個 ID 為? 的新按鈕，一個全局的 CSS selector 被綁定到這個按鈕的 ID，一個簡單的事件監聽回調函數會提示元素的點擊事件。

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

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

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

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

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。