如何正确使用 Custom Elements 自定义 HTML 元素-JavaScript中文网-JavaScript教程资源分享门户

现在的前端开发需要我们拥有更多的技能，其中一项扩展技能就是使用 Custom Elements 自定义 HTML 元素。Custom Elements 可以让我们创建自定义的 HTML 元素，这些元素可以和原生的 HTML 元素进行交互并可以被 Web 组件使用。在这篇文章中，我们将深入学习如何正确使用 Custom Elements 自定义 HTML 元素。

什么是 Custom Elements？

Custom Elements 是一种新的 Web 标准，它允许开发者创建自己的 HTML 元素，并使得这些自定义元素可以像内置 HTML 元素一样被创建、扩展和重用。Custom Elements 是 Web 组件的核心之一，同时也是 Web 平台组成部分之一。

在原生 HTML 中使用 Custom Elements

一个自定义元素可以通过继承 HTMLElement 类来实现。这就意味着可以在任何 Web 应用中直接使用它们，而不需要引入外部模板或 JavaScript 库。这是使用 Custom Elements 的好处之一。

让我们来创建一个简单的自定义元素来演示这个过程：

// javascriptcn.com 代码示例
<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Custom Elements Demo</title>
</head>
<body>
  <article></article>
  <script>
    class MyElement extends HTMLElement {
      constructor() {
        super();

        // 配置元素
      }
    }

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

在这个示例中，我们定义了一个名为 my-element 的自定义元素，它继承了 HTMLElement 类。在 constructor 方法中，我们可以为元素添加一些初始化配置。

我们借助 customElements.define() 方法将自定义元素注册到浏览器中。在此之后，我们就可以在 HTML 代码中使用这个自定义元素了：

<my-element></my-element>

这是一个非常基础的示例，接下来我们将更深入地了解如何使用 Custom Elements 和 Web 组件。

使用 Custom Elements 生成更高级的 Web 应用

现在我们可以使用原生 HTML 使用 Custom Elements 了，但我们需要更高级的例子来更深入地了解这个现象。

让我们来尝试构建一个带框架的网页，其中框架中是多个自定义元素。这些元素将以瀑布流的方式自动排列，当我们将鼠标悬停在元素上时，将显示元素的详情。

基础布局 HTML 代码

我们首先需要能够容纳所有自定义元素的元素。我们将使用 <section> 标记。

<body>
  <section id="main"></section>

  <script>
    src = 'https://fakeimg.pl/300x300/?text=Product&font=lobster';
  </script>
  <script src="./script.js"></script>
</body>

CSS 代码来设计网页

为了使我们的页面具有排版和样式，我们需要对其进行一些 CSS 配置。在我们的 CSS 代码中，我们将设置：

整体的宽度为 90%
每一列占据网页的宽度的 32%
注入 2% 的空白

// javascriptcn.com 代码示例
img {
  max-width: 100%;
  height: auto;
}

/* 全局样式 */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html, body {
  height: 100%;
}

body {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;

  width: 90%;
  margin: auto;
  padding: 2%;
}

/* 自定义元素样式 */
.product {
  max-width: 30%;
  margin-bottom: 2%;
  padding: 1%;
  border: 1px solid #ddd;
  border-radius: 2px;

  transition: all 0.3s ease-in-out;
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.15);
}

.product:hover {
  box-shadow: 0 12px 20px rgba(0, 0, 0, 0.2);
}

.product .title {
  font-size: 1.5rem;
  margin-bottom: 0.5rem;
  font-weight: normal;
}

.product .description {
  font-size: 0.9rem;
}

JavaScript 代码使用自定义元素

现在我们已经设置了基本的 HTML 和 CSS，让我们为页面添加一些 JavaScript 代码。我们将使用一个名为 Product 的自定义元素来渲染页面中的所有产品。

在这个自定义元素中，当鼠标悬浮在元素上时，它将在页面上显示产品详情。

// javascriptcn.com 代码示例
class Product extends HTMLElement {
  constructor() {
    super();
  }

  connectedCallback() {
    let shadowRoot = this.attachShadow({mode: 'open'});

    // 从特定的 HTML 模板字符串中准备元素
    shadowRoot.innerHTML = `
      <style>
        /* 定义样式 */
        img {
          max-width: 100%;
          height: auto;
        }
        .product {
          max-width: 30%;
          margin-bottom: 2%;
          padding: 1%;
          border: 1px solid #ddd;
          border-radius: 2px;

          transition: all 0.3s ease-in-out;
          box-shadow: 0 8px 16px rgba(0, 0, 0, 0.15);
        }
        .product:hover {
          box-shadow: 0 12px 20px rgba(0, 0, 0, 0.2);
        }
        .product .title {
          font-size: 1.5rem;
          margin-bottom: 0.5rem;
          font-weight: normal;
        }
        .product .description {
          font-size: 0.9rem;
        }

        /* 填充数据 */
        .product .title {
          color: #555;
        }
        .product .description {
          color: #999;
        }
      </style>

      <div class="product">
        <img src="${this.getAttribute('img')}" alt="${this.getAttribute('alt')}">
        <h2 class="title">${this.getAttribute('title')}</h2>
        <p class="description">${this.getAttribute('description')}</p>
      </div>
    `;

    this.addEventListener('mouseover', e => {
      const details = document.createElement('div');
      const rect = this.getBoundingClientRect();

      // 将详情放到产品下方
      const y = rect.y + rect.height + 5;
      const detailText = [
        this.getAttribute('detail1'),
        this.getAttribute('detail2'),
      ];

      details.style.cssText = `
        position: fixed;
        background-color: #fff;
        color: #333;
        border: 1px solid #ddd;
        padding: 1%;
        border-radius: 5px;
        font-size: 0.8rem;
        max-width: 400px;
        top: ${y}px;
        left: ${rect.x}px;
        z-index: 100000;
      `;

      const list = document.createElement('ul');
      detailText.forEach(text => {
        if (text) {
          const listItem = document.createElement('li');

          listItem.textContent = text;
          list.appendChild(listItem);
        }
      });

      details.appendChild(list);
      document.body.appendChild(details);
    });

    this.addEventListener('mouseout', e => {
      const details = document.querySelector('div.product-details');

      if (details) {
        document.body.removeChild(details);
      }
    });
  }
}

customElements.define('product-elm', Product);

在这个自定义元素中，我们还添加了事件监听器来在产品鼠标悬停时显示详情，并在悬停结束时隐藏详情。

总结

在本文中，我们学习了如何正确地使用 Custom Elements 自定义 HTML 元素。我们创建并使用了一个名为 Product 的自定义元素，它可以渲染网页中的多个产品。我们在这个自定义元素中添加了事件监听器，以显示产品详情。

除此之外，我们还探讨了如何使用 CSS 和 JavaScript 来为我们的网页设置排版和样式。现在，我们已经能够更好地掌握 Web 组件，并能够创建更高级的 Web 应用程序。希望这篇文章能够对您有所帮助。

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