Custom Elements：生成高度可定制的元素-JavaScript中文网-JavaScript教程资源分享门户

Custom Elements：生成高度可定制的元素

介绍

Custom Elements 是一个新的 Web API，它允许开发者定义并注册自定义元素，并通过自定义元素扩展 HTML 标准，实现高度可定制的元素。

Custom Elements API 允许开发人员使用 JavaScript 创建自定义标签并定义其行为。自定义元素可以定义自己代码、属性和方法，支持继承和扩展现有 HTML 元素，可以高度定制，提供更好的可读性和可维护性。

目标用户

Custom Elements 主要面向前端开发者。如果你希望在 HTML 标记语言中使用自定义的高级控件，通过自定义元素 API，您可以轻松实现它。

使用方法

定义自定义元素

以创建一个新的元素为例:

class MyElement extends HTMLElement {
  constructor() {
    super();
  }
}

customElements.define('my-element', MyElement);

上面的代码，我们首先通过定义一个构造函数来创建一个新的类。然后我们扩展了 HTMLElement 类，这是 Web API 中用于表示 HTML 元素的基本类。最后我们使用 customElements.define() 方法将新元素注册到自定义元素列表中。

创建自定义元素的属性

自定义元素可以包含任意的自定义属性，每个属性都会存储在 JavaScript 类实例上，用于表示元素的内部状态。

以创建一个带有自定义属性的元素为例：

class MyElement extends HTMLElement {
  static get observedAttributes() {
    return ['name'];
  }

  constructor() {
    super();
    this._name = '';
  }

  get name() {
    return this._name;
  }
  
  set name(value) {
    this.setAttribute('name', value);
  }

  attributeChangedCallback(name, oldValue, newValue) {
    if (name === 'name') {
      this._name = newValue;
    }
  }
}

customElements.define('my-element', MyElement);

上面的代码中，我们使用 observedAttributes 方法定义了监控的元素属性，这里监控了 name 属性。

在构造函数中，我们使用 this._name 定义了一个私有变量来存储元素的内部状态。

接下来，我们定义了一个 getter/setter 函数，用于设置和读取元素的 name 属性。通过 setAttribute() 方法设置属性时，这个 name 属性将会存储在元素的属性上，attributeChangedCallback() 方法会被调用以保存新的属性值。

创建自定义元素的方法

除了属性，自定义元素还可以定义一些方法，这些方法通常用于处理元素的内部状态或响应用户输入。以创建一个回显用户输入的元素为例：

class MyElement extends HTMLElement {
  constructor() {
    super();
    this._name = '';
    this.attachShadow({ mode: 'open' });
    this.shadowRoot.innerHTML = `
      <input type="text" id="input" name="input"/>
      <button id="btn">Save</button>
      <div id="output"></div>
    `;
    this._input = this.shadowRoot.querySelector('#input');
    this._output = this.shadowRoot.querySelector('#output');
    this._btn = this.shadowRoot.querySelector('#btn');
    this._btn.addEventListener('click', this._onClick.bind(this));
  }

  _onClick() {
    this._name = this._input.value;
    this._output.innerText = this._name;
  }

  get name() {
    return this._name;
  }
  
  set name(value) {
    this.setAttribute('name', value);
  }

  attributeChangedCallback(name, oldValue, newValue) {
    if (name === 'name') {
      this._name = newValue;
      this._output.innerText = this._name;
    }
  }
}

customElements.define('my-element', MyElement);

以上代码定义了一个自定义元素 MyElement，我们通过 attachShadow({mode: 'open'}) 方法创建了一个 Shadow DOM（影子 DOM），然后生成一个用户输入框和一个按钮。当用户单击按钮时，我们存储用户的输入并在输出区域打印。

注意这里使用了.bind(this)将函数绑定到组件实例，以正确处理 this 指向。

总结

Custom Elements API 是开发自定义 HTML 元素的强大工具。使用 Custom Elements API，您可以创建高度可定制的元素，从而简化 HTML 编写工作，使其更易于维护。

示例代码

<html>
<head>
  <script type="module" src="my-element.js"></script>
</head>
<body>
  <my-element></my-element>
</body>
</html>

// my-element.js
class MyElement extends HTMLElement {
  static get observedAttributes() {
    return ['name'];
  }

  constructor() {
    super();
    this._name = '';
    this.attachShadow({ mode: 'open' });
    this.shadowRoot.innerHTML = `
      <input type="text" id="input" name="input"/>
      <button id="btn">Save</button>
      <div id="output"></div>
    `;
    this._input = this.shadowRoot.querySelector('#input');
    this._output = this.shadowRoot.querySelector('#output');
    this._btn = this.shadowRoot.querySelector('#btn');
    this._btn.addEventListener('click', this._onClick.bind(this));
  }

  _onClick() {
    this._name = this._input.value;
    this._output.innerText = this._name;
  }

  get name() {
    return this._name;
  }
  
  set name(value) {
    this.setAttribute('name', value);
  }

  attributeChangedCallback(name, oldValue, newValue) {
    if (name === 'name') {
      this._name = newValue;
      this._output.innerText = this._name;
    }
  }
}

customElements.define('my-element', MyElement);

来源：JavaScript中文网，转载请注明来源本文地址：https://www.javascriptcn.com/post/65a6f223add4f0e0fffc6406