通过创建自定义标签来扩展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></button>

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中文网其他相关文章！