如何组合已有的 Custom Elements

前言

在 Web 开发中，Custom Elements 是一个非常有用的功能，它允许开发者创建自定义的 HTML 元素，并在页面中使用它们。Custom Elements 可以帮助开发者更好地组织代码，提高代码的可读性和可维护性。在这篇文章中，我们将探讨如何组合已有的 Custom Elements，以实现更复杂的功能。

Custom Elements 的基础知识

在开始讲解如何组合已有的 Custom Elements 之前，我们需要先了解一些 Custom Elements 的基础知识。

定义 Custom Elements

定义一个 Custom Elements 非常简单，只需要使用 customElements.define 方法即可：

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

  // ...
}

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

在上面的代码中，我们定义了一个名为 my-element 的 Custom Elements，它继承自 HTMLElement，并且实现了一些自定义的行为。

使用 Custom Elements

使用 Custom Elements 也非常简单，只需要在 HTML 中使用自定义元素的标签名即可：

<my-element></my-element>

在页面中使用自定义元素后，浏览器会自动创建一个 MyElement 的实例，并将其插入到页面中。

生命周期

Custom Elements 还有一些生命周期钩子函数，可以帮助开发者在元素的生命周期中执行一些自定义的操作。这些生命周期钩子函数包括：

• connectedCallback: 当元素被插入到文档时调用。
• disconnectedCallback: 当元素从文档中删除时调用。
• adoptedCallback: 当元素从一个文档移动到另一个文档时调用。
• attributeChangedCallback: 当元素的一个属性被添加、移除或更改时调用。

如何组合 Custom Elements

Custom Elements 可以通过组合来实现更复杂的功能。在下面的示例中，我们将展示如何组合两个 Custom Elements，以实现一个带有搜索功能的下拉菜单。

Custom Elements 1: Dropdown

首先，我们定义一个名为 dropdown 的 Custom Elements，它表示一个下拉菜单。这个下拉菜单有一个按钮，当用户点击按钮时，菜单会展开或收起。

class Dropdown extends HTMLElement {
  constructor() {
    super();

    this.isOpen = false;

    this.button = document.createElement('button');
    this.button.innerText = 'Dropdown';

    this.menu = document.createElement('ul');
    this.menu.style.display = 'none';
    this.menu.innerHTML = `
      <li>Option 1</li>
      <li>Option 2</li>
      <li>Option 3</li>
    `;

    this.button.addEventListener('click', () => {
      this.isOpen = !this.isOpen;
      this.menu.style.display = this.isOpen ? 'block' : 'none';
    });

    this.appendChild(this.button);
    this.appendChild(this.menu);
  }
}

customElements.define('my-dropdown', Dropdown);

在上面的代码中，我们定义了一个名为 my-dropdown 的 Custom Elements，它包含一个按钮和一个菜单。当用户点击按钮时，菜单会展开或收起。

Custom Elements 2: Searchable

接下来，我们定义一个名为 searchable 的 Custom Elements，它表示一个带有搜索功能的列表。这个列表有一个输入框，用户可以在输入框中输入关键字来搜索列表中的项。

class Searchable extends HTMLElement {
  constructor() {
    super();

    this.items = [
      { id: 1, text: 'Option 1' },
      { id: 2, text: 'Option 2' },
      { id: 3, text: 'Option 3' },
    ];

    this.input = document.createElement('input');
    this.input.type = 'text';
    this.input.placeholder = 'Search...';

    this.list = document.createElement('ul');
    this.list.innerHTML = this.items.map(item => `<li>${item.text}</li>`).join('');

    this.input.addEventListener('input', () => {
      const keyword = this.input.value.toLowerCase();
      const filteredItems = this.items.filter(item => item.text.toLowerCase().includes(keyword));
      this.list.innerHTML = filteredItems.map(item => `<li>${item.text}</li>`).join('');
    });

    this.appendChild(this.input);
    this.appendChild(this.list);
  }
}

customElements.define('my-searchable', Searchable);

在上面的代码中，我们定义了一个名为 my-searchable 的 Custom Elements，它包含一个输入框和一个列表。当用户在输入框中输入关键字时，列表会根据关键字进行过滤。

组合 Custom Elements

最后，我们将两个 Custom Elements 组合起来，以实现一个带有搜索功能的下拉菜单。

class DropdownSearchable extends HTMLElement {
  constructor() {
    super();

    this.dropdown = document.createElement('my-dropdown');
    this.searchable = document.createElement('my-searchable');

    this.dropdown.menu.innerHTML = this.searchable.list.innerHTML;

    this.searchable.input.addEventListener('input', () => {
      const keyword = this.searchable.input.value.toLowerCase();
      const filteredItems = this.dropdown.items.filter(item => item.text.toLowerCase().includes(keyword));
      this.dropdown.menu.innerHTML = filteredItems.map(item => `<li>${item.text}</li>`).join('');
    });

    this.appendChild(this.dropdown);
    this.appendChild(this.searchable);
  }
}

customElements.define('my-dropdown-searchable', DropdownSearchable);

在上面的代码中，我们定义了一个名为 my-dropdown-searchable 的 Custom Elements，它包含一个 my-dropdown 和一个 my-searchable。我们将 my-searchable 的列表项复制到 my-dropdown 的菜单中，并添加一个事件监听器，当用户在输入框中输入关键字时，菜单会根据关键字进行过滤。

总结

在本文中，我们学习了如何组合已有的 Custom Elements。我们首先了解了 Custom Elements 的基础知识，包括如何定义和使用 Custom Elements，以及 Custom Elements 的生命周期。然后，我们通过一个具体的示例，展示了如何组合两个 Custom Elements，以实现一个带有搜索功能的下拉菜单。希望本文对你有所帮助，让你更好地理解 Custom Elements 的使用。

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