优秀的编程知识分享平台

网站首页 > 技术文章 正文

HTML自定义组件（html 组件）

nanyue 2024-10-21 06:21:20 技术文章 9 ℃

HTML自定义组件可以简单的理解为自定义标签。

如何创建自定义组件

创建自定义组件只需要两步

第一，定义自定义组件

第二，注册自定义组件

看下面的例子

<!DOCTYPE html>
<html>
  <body>
    <!-- 使用自定义组件 -->
    <custom-button>I am a custom button!</custom-button>
    <script>
      // 第一步：定义自定义按钮组件
      class CustomButton extends HTMLElement {
        //这里略. 下面单独说
      }

      // 第二步：注册自定义按钮组件
      customElements.define('custom-button', CustomButton);
    </script>
  </body>
</html>

下面，我们再看看class CustomButton的实现

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

    // 创建 Shadow DOM
    const shadow = this.attachShadow({ mode: 'open' });

    // 创建按钮元素
    const button = document.createElement('button');
    button.innerText = this.textContent;

    // 将按钮元素添加到 Shadow DOM 中
    shadow.appendChild(button);
  }
}

最后运行一下，在浏览器里的效果就是这样：

以后，你就可以在html里插入 <custom-button>button name</custom-button>来创建你自己的button. 当然，你可能会说，我直接写 <button type="button">Click Me!</button> 不比你自定义的button容易吗？是的，这是因为我们这里只是个demo，它很简单，以方便你理解怎么创建自定义组件。在真正的场景中，你自定义的button可能会有自己的样式，属性和行为，可能很复杂。把一个复杂的组件封装成一个标签，我们就可以很方便的重用它，代码也显得整洁。

这里面有一个重要概念是shadow dom，你可能不太理解。或许可以在以后的文章里单独讲它。

Tags：

猜你喜欢

最近发表
标签列表