通過創建自定義標籤來擴展HTML

在本教程中，我將向您展示使用自定義標籤擴展HTML語言是多麼容易。自定義標籤可用於實現各種行為，因此它們是一種非常方便的編寫代碼並保持您的HTML文檔更簡單的方式。

可以進一步使用自定義標籤，查看我在使用Shadow dom的封裝自定義標籤的帖子。 ＆lt; codingdude-gravatar＆gt;

。此自定義標籤將顯示特定電子郵件地址的Gravatar圖片。 

>

>

>＆lt; codingDudeGravatar＆gt;

是>無效的。這允許解析器能夠將常規元素與自定義標籤區分開。 自定義元素標籤名稱必須始終具有儀表板（ - ）。上面的代碼等同於以下內容：

如果您想創建一個自定義元素，該元素擴展了另一個HTML元素，則必須在domexception

>。

customElements.define("codingdude-gravatar", CodingDudeGravatar);<br>

自定義元素中擴展本地元素。實例化自定義元素>> html元素的所有標準規則適用於自定義元素。就像標準元素一樣，您可以使用JavaScript在DOM中創建一個自定義元素，或在HTML中聲明。

>在HTML中聲明自定義元素：>

>

<codingdude-gravatar></codingdude-gravatar><br>

>

var codingdudeGravatar = document.createElement('codingdude-gravatar');<br>codingdudeGravatar.addEventListener('click',function(e){});<br>

>

使用JavaScript中的DOM中的擴展元素：

<button is="codingdude-gravatar"><br>

5。在自定義標籤中添加標記

var codingdudeGravatar = document.createElement('button', 'codingdude-gravatar');<br>

在自定義標籤中非常簡單。首先，您需要創建一個擴展父html元素的類。在我們的情況下，我們將擴展htmlelement ，我們將利用自定義標籤的innertext

。請記住，在構造函數內部調用此

指向創建的自定義元素。 這是一個簡單的概述。生命週期方法

開始在自定義標籤中添加標記之前，您需要了解與自定義標籤相關的生命週期方法。有四個生命週期回調。

class CodingDudeGravatar extends HTMLElement {<br>  constructor() {<br>    super()<br>    this.addEventListener('click', e => {<br>        alert('You Clicked Me!')<br>    });<br>    this.innerText="Hello There!"<br>  }<br>}<br>window.customElements.define('codingdude-gravatar', CodingDudeGravatar);<br>

>我們已經看到瞭如何使用ConnectedCallback

。

。一旦將元素添加到文檔中，此檢查就會進行。我們將使用一個自定義標籤

具有電子郵件

屬性設置在自定義標籤中，屏幕將如下：

class CodingDudeGravatar extends HTMLElement {<br>    constructor() {<br>    super(); // always call super() first in the constructor.<br>    ...<br>    }<br>    connectedCallback() {<br>    ...<br>    }<br>    disconnectedCallback() {<br>    ...<br>    }<br>    attributeChangedCallback(attrName, oldVal, newVal) {<br>    ...<br>    }<br>}<br>

：對於要觸發的屬性

customElements.define("codingdude-gravatar", CodingDudeGravatar);<br>

attributechangedCallback

。在我們的情況下，我們希望在自定義元素上的el.setAttribute（'email'，'newemail'）

，瀏覽器將觸發disconnectedCallback

<codingdude-gravatar></codingdude-gravatar><br>

>

在我們的生命週期方法列表中的最後一個是el.remove（）eyremove（）

>

，默認情況下，這些屬性將存在於自定義元素中。但是，可以修改這些屬性的行為。在大多數情況下，使用JavaScript類中的Getters和Setter用於控制屬性。 在以下演示中，可以在Codepen上的DDDEV（@divyadddev）中參見DDDEV（@DivyAddDev）的筆自定義標籤。

>結論hooray！我們已經到了有關如何創建自定義元素的文章的結尾。現在，您應該能夠創建一個自定義元素並在HTML標記中使用它。嘗試一下！您會驚訝地發現可以完成多少工作。 這只是自定義元素工作方式的開始。在這一領域還有很多要探索和學習的東西。繼續觀看此空間，以獲取有關自定義元素及其高級概念的更多帖子。 >

以上是通過創建自定義標籤來擴展HTML的詳細內容。更多資訊請關注PHP中文網其他相關文章！