什么是web组件_javascript中如何创建自定义元素？-js教程-PHP中文网

什么是web组件_javascript中如何创建自定义元素？

夢幻星辰

发布： 2025-12-13 11:17:32

原创

463人浏览过

自定义元素命名必须含短横线，如user-card；需继承HTMLElement、声明observedAttributes、实现attributeChangedCallback，并用customElements.define()注册。

什么是web组件_javascript中如何创建自定义元素？

Web组件是一套浏览器原生支持的前端技术标准，核心包括自定义元素（Custom Elements）、影子DOM（Shadow DOM）和HTML模板（<template></template>）。它让开发者能封装可复用、样式与逻辑隔离的HTML标签，比如 <my-button></my-button> 或 <date-picker></date-picker>，无需框架也能实现“组件化”。

自定义元素必须满足哪些命名规则？

浏览器强制要求自定义元素名中必须包含短横线（-），例如 user-card、loading-spinner。这是为了确保不与现有或未来HTML标准标签冲突。像 mydiv 或 Button 这样的名字会直接报错，无法注册。

用 JavaScript 创建自定义元素的三步法

现代方式基于 ES6 类 + customElements.define()，步骤清晰：

定义一个继承自 HTMLElement 的类，可添加生命周期钩子（如 connectedCallback、disconnectedCallback）
在类中封装属性响应（通过 static get observedAttributes() 和 attributeChangedCallback）
调用 customElements.define('标签名', 类名) 完成注册

示例：一个带文字内容的简单卡片

立即学习“Java免费学习笔记（深入）”；

企业软件介绍主页html模板

一款多用途的企业软件前端HTML模板。IT软件服务公司网站响应式单页模板。基于CSS、JS、HTML模块化原则创建的。如果您的站点不需要所有元素，那么可以轻松地删除不必要的组件。模板的代码干净，友好，注释良好。这使得编辑和自定义模板变得很容易。

350

查看详情

class InfoCard extends HTMLElement {
  constructor() {
    super();
    this.attachShadow({ mode: 'open' });
    this.shadowRoot.innerHTML = `
      <style> :host { display: block; padding: 12px; border: 1px solid #ccc; } </style>
      <slot></slot>
    `;
  }
}

customElements.define('info-card', InfoCard);

登录后复制

之后就能在HTML中直接使用：<info-card>欢迎来到我的卡片</info-card>