カスタム タグを作成して HTML 機能を拡張する

このチュートリアルでは、カスタム タグを使用して HTML 言語を拡張することがいかに簡単かを説明します。カスタム タグはさまざまな動作を実装するために使用できるため、記述するコードを減らし、HTML ドキュメントを簡素化する非常に便利な方法です。

カスタム タグの詳細については、Shadow DOM を使用したカプセル化されたカスタム タグの作成に関する私の記事をご覧ください。

カスタム HTML タグとは何ですか?

たとえば、HTML では、<b></b> タグを使用して太字のテキストを表示できます。リストが必要な場合は、リスト項目ごとに <ul></ul> タグとそのサブタグ <li> を使用できます。タグはブラウザによって解釈され、CSS と連携して、Web コンテンツの表示方法とコンテンツの一部の動作を決定します。

HTML タグを 1 つだけ使用するだけでは、Web アプリケーションに必要な機能を十分に満たせない場合があります。通常、これは複数の HTML タグと JavaScript および CSS を使用することで解決されますが、この解決策はそれほど洗練されたものではありません。

より洗練された解決策は、カスタム タグを使用することです。これは、ブラウザが期待する機能をレンダリングするために解釈する に含まれる識別子です。通常の HTML タグと同様に、カスタム タグをページ上で複数回使用できる必要があります。また、カスタム タグの機能を支援するタグ属性とサブタグも持つことができる必要があります。

簡単に言うと、カスタム要素を使用して次の機能のロックを解除できます:

<li>新しい HTML 要素を定義して構築する <li>他の要素を拡張する要素の構築 <li>カスタム機能をアプリケーションに統合する要素を作成する <li>既存の DOM 要素を使用し、その API を拡張する

この記事では、<codingdude-gravatar></codingdude-gravatar> という名前のカスタム タグを作成することで、カスタム要素について学習します。このカスタム ラベルは、特定の電子メール アドレスの Gravatar 画像を表示します。

最新のブラウザの customElements API を使用すると、これが簡単になります。

1. プロジェクトの作成

タグを実装してテストするには、いくつかのものを作成する必要があります:

<li> index.html カスタム タグを使用したファイル <li>カスタム タグを実装するための codingdude-gravatar.js ファイル

2.index.html を変更します

index.html ファイルを編集して、その内容を次のようにしましょう:

ここで index.html をブラウザにロードしても、カスタム マークアップのコードがまだ実装されていないため、結果はそれほど印象的ではありません。

注意すべき点は、ブラウザは非常に寛容であるため、ドキュメント内に不明なタグが含まれていても、ブラウザはそれらを無視するということです。カスタム ラベルで実際にメールの Gravatar 画像を表示するには、まず Gravatar の仕組みを理解する必要があります。

3.新しいラベルを登録します

ステップ 1: 適切な名前を選択します

カスタム ラベルを作成するには、window.customElements.define() を使用する必要があります。

customElements.define() 最初のパラメータはタグの名前です。これは HTML ファイルで説明した内容です。名前には常にダッシュ (-) が必要です。 <codingdudegravatar></codingdudegravatar> のような名前のタグinvalid。これにより、パーサーは通常の要素とカスタム タグを区別できるようになります。

第 2 步：选择正确的原型

customElements.define() 有第二个可选对象。该对象用于提及新元素的原型。默认情况下，自定义元素继承自 HTMLElement。上面的代码相当于下面的代码：

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

如果您希望创建扩展另一个 HTML 元素的自定义元素，则必须在 customElements.define() 中扩展本机元素。继承本机元素的自定义元素也称为“类型扩展自定义元素”。

customElements.define("codingdude-gravatar", class extends HTMLButtonElement {...});

还有一些需要注意的事情：

<li>您不能多次注册该标签。如果您尝试这样做，浏览器将抛出 DOMException。 <li>自定义元素标签不能自动关闭。

4.实例化自定义元素

HTML 元素的所有标准规则都适用于自定义元素。就像标准元素一样，您可以使用 JavaScript 在 DOM 中创建自定义元素，或在 HTML 中声明它。

在 HTML 中声明自定义元素：

<codingdude-gravatar></codingdude-gravatar>

使用 JavaScript 在 DOM 中创建自定义元素：

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

在 HTML 中实例化类型扩展元素：

<button is="codingdude-gravatar">

使用 JavaScript 在 DOM 中创建类型扩展元素：

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

5.向自定义标签添加标记

在自定义标签中添加标记相当简单。首先，您需要创建一个扩展父 HTML 元素的类。在我们的例子中，我们将扩展 HTMLElement。在 HTMLElement 中，我们将使用 constructor 添加事件侦听器并调整自定义标记的 innerText 。记得调用 super() 因为这将有助于继承父类的方法和属性。永远记住，构造函数内的 this 指向创建的自定义元素。

这是我们组件外观的简单概述。

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

6.生命周期方法

在开始向自定义标记添加标记之前，您需要了解与自定义标记关联的生命周期方法。有四个生命周期回调。

带有这些回调的自定义标记的骨架如下所示：

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

我们已经了解了如何在自定义元素中使用 构造函数 。现在，让我们在代码中使用其他回调方法！让我们从 connectedCallback 开始。

connectedCallback

connectedCallback 可用于检查自定义标记中的电子邮件属性。一旦元素添加到文档中，就会进行此检查。我们将使用 getter 函数来检查 custom tag 是否具有 email 属性。

class CodingDudeGravatar extends HTMLElement {
  get email() {
    return this.hasAttribute('email');
  }
  constructor() {
    super()
    this.addEventListener('click', e => {
        alert('You Clicked Me!')
    });
    this.innerText="Hello There!"
  }
  connectedCallback(){
    if(this.email){
        var email = this.attributes.email.value;
        var gravatar = "https://www.gravatar.com/avatar"
        this.innerHTML = "<img src='"+gravatar+"'></br>"+email
    }
    else
    {
      this.innerHTML = "No Email";
    }
  }
}

当自定义标记插入 HTML 中时，您将看到如下内容：

<codingdude-gravatar></codingdude-gravatar>

但是，当在自定义标签中设置 email 属性时，屏幕将如下所示：

<codingdude-gravatar email="admin@coding-dude.com"></codingdude-gravatar>

attributeChangedCallback

浏览器将为 observedAttributes 数组中列出的所有属性调用生命周期方法 attributeChangedCallback。其背后的目标是提高自定义标签的性能。例如，如果用户决定更改样式，您不希望触发 attributeChangedCallback 。在我们的例子中，我们希望仅当电子邮件更改时才调用 attributeChangedCallback 。为了实现这一点，代码如下所示：

class CodingDudeGravatar extends HTMLElement {
  get email() {
    return this.hasAttribute('email');
  }
  constructor() {
    super()
    this.addEventListener('click', e => {
        alert('You Clicked Me!')
    });
    this.innerText="Hello There!"
  }
  connectedCallback(){
    if(this.email){
        var email = this.attributes.email.value;
       var gravatar = "http://www.gravatar.com/avatar"
            this.innerHTML = "<img src='"+gravatar+"'></br>"+email
    }
    else
    {
      this.innerHTML = "No Email";
    }
  }
  static get observedAttributes() {
    return ['email'];
  }
  attributeChangedCallback(name, oldValue, newValue) {
    if(name == 'email'){
      alert(`The ${name} changed to ${newValue}`)
    }
  }
}

根据上面的代码，每次我们更改电子邮件时都会看到一条警报。

自定义元素中的回调是同步的。如果在自定义元素上调用 el.setAttribute('email','newemail') ，浏览器将立即触发 attributeChangedCallback() 。

disconnectedCallback

生命周期方法列表中的最后一个是 disconnectedCallback。当您从文档中删除元素时，将调用此方法。当您想要清除自定义标签造成的影响时，该方法非常有用。您可以使用 el.remove() 方法轻松删除自定义标签。

但是，您必须非常小心 disconnectedCallback() 的使用方式。如果用户选择关闭选项卡或浏览器，则永远不会触发此回调。

7.属性到属性

在任何基于 HTML 的应用程序中，开发人员使用反映在 DOM 上的属性是很常见的。例如， hidden 是可用于隐藏元素的属性，例如<div hide></div> 只会隐藏 DOM 中的元素。开发人员自然希望这些属性也适用于自定义标签。

由于我们从 HTMLElement 扩展，因此默认情况下这些属性将出现在自定义元素中。然而，这些属性的行为是可以修改的。大多数时候，JavaScript 类中的 getter 和 setter 用于控制属性。

codingdude-gravatar[hidden] {
    opacity: 0.5;
    pointer-events: none;
}

...inside the class
{
    get hidden() {
        return this.hasAttribute('hidden');
    }
    
    set hidden(val) {
        // Reflect the value of `hidden` as an attribute.
        if (val) {
        this.setAttribute('hidden', '');
        } else {
        this.removeAttribute('hidden');
        }
    }
}

演示

本文中讨论的所有内容都可以在以下演示中进行实验。

结论

这只是自定义元素工作原理的开始。这个领域还有很多东西需要探索和学习。请继续关注此空间，了解有关自定义元素及其高级概念的更多帖子。