登录注册

当前位置：首页 > 文章列表 > 文章 > 前端 > 自定义HTML元素教程：JS创建与使用方法

自定义HTML元素教程：JS创建与使用方法

2026-01-29 19:03:43 0浏览 收藏

怎么入门文章编程？需要学习哪些知识点？这是新手们刚接触编程时常见的问题；下面golang学习网就来给大家整理分享一些知识点，希望能够给初学者一些帮助。本篇文章就来介绍《自定义HTML元素教程：如何用JavaScript创建和使用》，涉及到，有需要的可以收藏一下

Custom Elements 是 Web Components 的核心，需继承 HTMLElement、含短横线命名，用 customElements.define() 注册；构造函数必须调用 super() 初始化 this，attributeChangedCallback 仅响应 observedAttributes 中声明的属性变更，且受浏览器兼容性与 DOM 结构限制。

javascript的custom elements如何定义_如何创建和使用自己的html元素【教程】

Custom Elements 是 Web Components 的核心之一，它允许你定义自己的 HTML 标签，但不是靠封装或模拟，而是真正注册进浏览器的 DOM 系统——这意味着 document.createElement('my-button') 能返回合法元素，instanceof 会通过校验，且能被 querySelector、框架的 ref、甚至原生表单逻辑识别。

如何用 customElements.define() 注册一个自定义元素

必须继承 HTMLElement（或其子类如 HTMLButtonElement），且类名中必须含短横线（-），这是强制语法限制，否则抛出 DOMException: The element name must contain a hyphen。

  • 类不能是匿名函数或箭头函数，必须有命名（哪怕只是 class MyCard extends HTMLElement）
  • 注册前必须先声明类，顺序不能颠倒；若重复注册同一名称，会报错 Failed to execute 'define' on 'CustomElementRegistry': the name "x-foo" has already been used
  • 名称不能以 x- 开头再加短横线（如 x-foo-bar 合法，x--foo 不合法），也不能是保留名（如 html、slot、template）
class MyCounter extends HTMLElement {
  constructor() {
    super();
    this.count = 0;
    this.attachShadow({ mode: 'open' });
    this.shadowRoot.innerHTML = `
      <style>button { font-size: 14px; }</style><button><slot></slot>: ${this.count}</button>
    `;
  }

  connectedCallback() {
    this.shadowRoot.querySelector('button').addEventListener('click', () => {
      this.count++;
      this.shadowRoot.querySelector('button').textContent = `${this.textContent}: ${this.count}`;
    });
  }
}

customElements.define('my-counter', MyCounter);

为什么必须用 constructor + super()？

因为 Custom Element 构造函数在 DOM 初始化阶段被调用（比如解析 HTML 字符串时），此时元素尚未插入文档，也无父节点。不调用 super() 会导致 this 未初始化，后续所有操作（如 attachShadow、setAttribute）都会失败，并静默报错或直接崩溃。

  • connectedCallback 和 disconnectedCallback 可以安全访问 this.parentNode，但 constructor 里永远不能
  • attributeChangedCallback 的触发前提是：该属性在 observedAttributes 中声明，且元素已定义完成——也就是说，它不会在 constructor 执行期间触发
  • 不要在 constructor 里调用 this.innerHTML 或读取 this.children，它们为空；应改用 slot 或 innerHTML 写入 shadow DOM

如何让自定义元素支持 HTML 属性并响应变更

仅靠 setAttribute 不会自动触发更新，必须显式监听属性变化。浏览器只会在属性值字符串发生变化时调用 attributeChangedCallback，且仅限于 observedAttributes 返回的数组中列出的属性名。

  • 属性名自动转为小写（My-Prop → my-prop），所以 observedAttributes 必须写小写形式
  • 若属性初始值来自 HTML（如 ），attributeChangedCallback 会在 connectedCallback 前触发一次
  • 注意：布尔属性（如 disabled）的变更，newValue 是 ""（空字符串）而非 true；需用 this.hasAttribute('disabled') 判断
class MyInput extends HTMLElement {
  static get observedAttributes() {
    return ['value', 'disabled'];
  }

  attributeChangedCallback(name, oldValue, newValue) {
    switch (name) {
      case 'value':
        this.input.value = newValue || '';
        break;
      case 'disabled':
        this.input.disabled = this.hasAttribute('disabled');
        break;
    }
  }

  constructor() {
    super();
    this.attachShadow({ mode: 'open' });
    this.shadowRoot.innerHTML = `&lt;input type=&quot;text&quot; class=&quot;input&quot;&gt;`;
    this.input = this.shadowRoot.querySelector('input');
  }
}

customElements.define('my-input', MyInput);

使用时要注意哪些兼容性与陷阱

Chrome / Edge / Safari 原生支持良好，Firefox 从 63+ 支持，但 IE 完全不支持（无 polyfill 可完美还原行为）。即便现代浏览器，也有几个容易忽略的点：

  • 自定义元素无法直接作为 的子元素（如 放在 里）——浏览器会把它“提升”到 table 外，破坏结构；必须用 is 语法：
  • 服务端渲染（SSR）时，若 JS 未加载，自定义元素会表现为未知标签，样式和交互全部失效；建议配合 customElements.whenDefined() 做降级处理
  • 若元素内使用了 slot，且宿主元素有 innerHTML 设置，内容不会自动投射——必须等 connectedCallback 触发后才生效

    • 最常被跳过的一步：没检查是否已定义就重复 define，尤其在模块热更新或微前端场景下。上线前务必加一层守卫：

    if (!customElements.get('my-card')) {
  customElements.define('my-card', MyCard);
}

    真正的难点不在语法，而在生命周期节奏——什么时候能读 DOM、什么时候能改样式、什么时候能发事件，全都取决于你对 constructor / connectedCallback / attributeChangedCallback 三者触发时机和约束条件的理解是否精确。

    以上就是本文的全部内容了，是否有顺利帮助你解决问题？若是能给你带来学习上的帮助，请大家多多支持golang学习网！更多关于文章的相关知识，也可关注golang学习网公众号。

    王者荣耀网页版入口怎么进王者荣耀网页版入口怎么进
    上一篇
    王者荣耀网页版入口怎么进
    Excel高效快捷键，提升效率技巧
    下一篇
    Excel高效快捷键，提升效率技巧
    查看更多
    最新文章
    资料下载
    查看更多
    课程推荐
    • 前端进阶之JavaScript设计模式
      前端进阶之JavaScript设计模式
      设计模式是开发人员在软件开发过程中面临一般问题时的解决方案，代表了最佳的实践。本课程的主打内容包括JS常见设计模式以及具体应用场景，打造一站式知识长龙服务，适合有JS基础的同学学习。
      543次学习
    • GO语言核心编程课程
      GO语言核心编程课程
      本课程采用真实案例，全面具体可落地，从理论到实践，一步一步将GO核心编程技术、编程思想、底层实现融会贯通，使学习者贴近时代脉搏，做IT互联网时代的弄潮儿。
      516次学习
    • 简单聊聊mysql8与网络通信
      简单聊聊mysql8与网络通信
      如有问题加微信：Le-studyg；在课程中，我们将首先介绍MySQL8的新特性，包括性能优化、安全增强、新数据类型等，帮助学生快速熟悉MySQL8的最新功能。接着，我们将深入解析MySQL的网络通信机制，包括协议、连接管理、数据传输等，让
      500次学习
    • JavaScript正则表达式基础与实战
      JavaScript正则表达式基础与实战
      在任何一门编程语言中,正则表达式,都是一项重要的知识,它提供了高效的字符串匹配与捕获机制,可以极大的简化程序设计。
      487次学习
    • 从零制作响应式网站—Grid布局
      从零制作响应式网站—Grid布局
      本系列教程将展示从零制作一个假想的网络科技公司官网，分为导航，轮播，关于我们，成功案例，服务流程，团队介绍，数据部分，公司动态，底部信息等内容区块。网站整体采用CSSGrid布局，支持响应式，有流畅过渡和展现动画。
      485次学习
    查看更多
    AI推荐
    • ChatExcel酷表：告别Excel难题，北大团队AI助手助您轻松处理数据
      ChatExcel酷表
      ChatExcel酷表是由北京大学团队打造的Excel聊天机器人，用自然语言操控表格，简化数据处理，告别繁琐操作，提升工作效率！适用于学生、上班族及政府人员。
      4163次使用
    • Any绘本：开源免费AI绘本创作工具深度解析
      Any绘本
      探索Any绘本（anypicturebook.com/zh），一款开源免费的AI绘本创作工具，基于Google Gemini与Flux AI模型，让您轻松创作个性化绘本。适用于家庭、教育、创作等多种场景，零门槛，高自由度，技术透明，本地可控。
      4512次使用
    • 可赞AI：AI驱动办公可视化智能工具，一键高效生成文档图表脑图
      可赞AI
      可赞AI，AI驱动的办公可视化智能工具，助您轻松实现文本与可视化元素高效转化。无论是智能文档生成、多格式文本解析，还是一键生成专业图表、脑图、知识卡片，可赞AI都能让信息处理更清晰高效。覆盖数据汇报、会议纪要、内容营销等全场景，大幅提升办公效率，降低专业门槛，是您提升工作效率的得力助手。
      4394次使用
    • 星月写作：AI网文创作神器，助力爆款小说速成
      星月写作
      星月写作是国内首款聚焦中文网络小说创作的AI辅助工具，解决网文作者从构思到变现的全流程痛点。AI扫榜、专属模板、全链路适配，助力新人快速上手，资深作者效率倍增。
      6018次使用
    • MagicLight.ai：叙事驱动AI动画视频创作平台 | 高效生成专业级故事动画
      MagicLight
      MagicLight.ai是全球首款叙事驱动型AI动画视频创作平台，专注于解决从故事想法到完整动画的全流程痛点。它通过自研AI模型，保障角色、风格、场景高度一致性，让零动画经验者也能高效产出专业级叙事内容。广泛适用于独立创作者、动画工作室、教育机构及企业营销，助您轻松实现创意落地与商业化。
      4766次使用
    查看更多
    相关文章
    关于我们 免责声明 意见反馈 联系我们 内容提交
    Golang学习网：公益在线Go学习平台，帮助Go学习者快速成长！
    技术交流群
    Copyright 2023 http://www.17golang.com/ All Rights Reserved ｜ 苏ICP备2023003363号-1
    • Golang学习网
      关注公众号
      Golang学习网
    微信登录更方便
    • 密码登录
    • 注册账号
    忘记密码
    登录即同意 用户协议 和 隐私政策
    返回登录
    • 重置密码
    发送验证码