从 Polymer 到自定义元素：Custom Elements 开发指南-JavaScript中文网-JavaScript教程资源分享门户

介绍

Custom Elements 是 Web Components 规范的一部分，是一种自定义 HTML 元素的方法。自定义元素可以像原生 HTML 元素一样使用，与框架无关，具有高度的可重用性和可维护性。Custom Elements 是现代前端开发中不可或缺的一部分。

本文将介绍 Custom Elements 的开发方式，并提供示例代码和详细的指导意义，帮助读者更好地理解和使用 Custom Elements。

Polymer

在介绍 Custom Elements 之前，我们先来了解一下 Polymer。Polymer 是 Google 推出的一套 Web Components 框架，提供了一系列的组件和工具，使得 Web Components 的开发更加简单和高效。

Polymer 中的组件是基于 Custom Elements 实现的，因此我们需要先了解 Custom Elements 的开发方式。

Custom Elements

定义 Custom Elements

定义 Custom Elements 需要使用 window.customElements.define 方法。该方法接受两个参数：元素名称和元素类。

// javascriptcn.com 代码示例
class MyElement extends HTMLElement {
  constructor() {
    super();
    // 元素创建时的初始化代码
  }

  connectedCallback() {
    // 元素添加到文档时的回调函数
  }

  disconnectedCallback() {
    // 元素从文档中移除时的回调函数
  }

  attributeChangedCallback(name, oldValue, newValue) {
    // 监听元素属性变化的回调函数
  }
}

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

在上面的代码中，MyElement 类继承了 HTMLElement 类，并实现了 constructor、connectedCallback、disconnectedCallback 和 attributeChangedCallback 四个方法。

constructor 方法用于初始化元素，connectedCallback 方法在元素添加到文档时调用，disconnectedCallback 方法在元素从文档中移除时调用，attributeChangedCallback 方法监听元素属性变化。这些方法都是 Custom Elements 的生命周期函数，可以在其中进行相应的操作。

window.customElements.define 方法用于定义 Custom Elements，第一个参数是元素名称，第二个参数是元素类。

使用 Custom Elements

定义好 Custom Elements 后，我们可以像使用原生 HTML 元素一样使用它。例如：

<my-element></my-element>

上面的代码中，我们使用了自定义的 my-element 元素。

Shadow DOM

Shadow DOM 是 Web Components 规范的另一部分，它提供了一种封装元素内部的方法，使得元素内部的 DOM 树与外部的 DOM 树隔离开来。这种隔离使得元素内部的样式和行为不会影响到外部的页面，同时也可以避免外部的样式和行为影响到元素内部。

在 Custom Elements 中使用 Shadow DOM 需要使用 attachShadow 方法。该方法接受一个参数，表示 Shadow Root 的类型。

// javascriptcn.com 代码示例
class MyElement extends HTMLElement {
  constructor() {
    super();
    const shadowRoot = this.attachShadow({ mode: 'open' });
    // 在 Shadow DOM 中添加元素和样式
  }
}

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

在上面的代码中，我们使用 attachShadow 方法创建了一个 Shadow Root，并将其赋值给 shadowRoot 变量。mode 参数可以是 open 或 closed，表示 Shadow Root 是否可以被外部访问。

元素属性

Custom Elements 中的元素属性可以使用 attributeChangedCallback 方法进行监听。例如：

// javascriptcn.com 代码示例
class MyElement extends HTMLElement {
  static get observedAttributes() {
    return ['name'];
  }

  attributeChangedCallback(name, oldValue, newValue) {
    if (name === 'name') {
      // 处理属性变化
    }
  }
}

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

在上面的代码中，我们使用 observedAttributes 方法指定了需要监听的属性名称，然后在 attributeChangedCallback 方法中处理属性变化。

元素事件

Custom Elements 中的元素事件可以使用 addEventListener 方法进行监听。例如：

// javascriptcn.com 代码示例
class MyElement extends HTMLElement {
  constructor() {
    super();
    this.addEventListener('click', () => {
      // 处理点击事件
    });
  }
}

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

在上面的代码中，我们使用 addEventListener 方法监听了 click 事件，并在回调函数中处理了点击事件。

示例代码

下面是一个简单的示例，展示了如何定义一个 Custom Element，并在其中使用 Shadow DOM。

// javascriptcn.com 代码示例
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Custom Elements 示例</title>
  </head>
  <body>
    <my-element></my-element>
    <script>
      class MyElement extends HTMLElement {
        constructor() {
          super();
          const shadowRoot = this.attachShadow({ mode: 'open' });
          const div = document.createElement('div');
          div.innerHTML = 'Hello, World!';
          const style = document.createElement('style');
          style.textContent = `
            div {
              background-color: #f2f2f2;
              padding: 10px;
            }
          `;
          shadowRoot.appendChild(style);
          shadowRoot.appendChild(div);
        }
      }

      window.customElements.define('my-element', MyElement);
    </script>
  </body>
</html>

在上面的代码中，我们定义了一个 my-element 元素，并在其中使用了 Shadow DOM。在 Shadow DOM 中，我们创建了一个 div 元素，并添加了一些样式。

总结

在本文中，我们介绍了 Custom Elements 的开发方式，包括定义 Custom Elements、使用 Custom Elements、Shadow DOM、元素属性和元素事件。同时，我们也提供了示例代码和详细的指导意义，帮助读者更好地理解和使用 Custom Elements。

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