0Pricing
HTML Academy · 课时

扩展内置元素

使用 is 属性自定义现有元素

扩展内置元素 是 CoddyKit 上的免费 HTML Academy 课时。 这是第 4 节课，共 4 节。 你可以在下方免费阅读本课时的完整内容 — 然后在浏览器中使用内置代码编辑器和全天候 AI 导师进行实践。 这是 HTML Academy 学习路径的一部分，你的进度在网页和 CoddyKit 应用中同步。 HTML Academy 课程共包含 4 节课。

两种自定义元素

规范定义了自主自定义元素（继承 HTML 元素类，使用 <my-card>）以及定制内置元素（继承特定的内置类，使用 <button is="my-button">）。定制内置元素会自动继承内置语义。

为什么要扩展内置元素

自主的 <my-button> 不会获得内置 <button> 的任何行为——不支持回车键或空格键激活、不参与表单，也不会为辅助技术提供 role="button"。定制按钮（is="my-button"）会自动继承所有这些行为。

扩展类

请扩展具体的 HTML 类，而不是 HTMLElement：class MyButton extends HTMLButtonElement {}。元素会保留所有内置行为——表单提交、焦点管理和禁用状态——您只需在此基础上添加增强功能。

class MyButton extends HTMLButtonElement {
  connectedCallback() {
    this.style.fontWeight = "bold";
  }
}

使用扩展选项进行注册

customElements.define("my-button", MyButton, { extends: "button" })。第三个参数告诉注册表该元素扩展的是哪个内置标签。省略该参数会导致注册抛出异常。

is 属性

请在现有标签上使用 is 属性来使用定制内置元素：<button is="my-button">Click</button>。如果改写为 <my-button>，就会创建自主元素并失去内置行为。

Safari 不支持此功能

Safari 以无障碍方面的顾虑为由，拒绝实现定制内置元素。Chrome、Edge 和 Firefox 支持它们；在 Safari 中，is 属性会被忽略，元素表现为普通的 <button>。如果需要支持 Safari，请使用官方填充程序。

填充程序选项

@ungap 提供的定制元素填充程序可以在 Safari 中恢复对定制内置元素的支持。它体积小且维护良好；如果团队需要跨浏览器支持，又不想放弃 is 属性模式，就应引入它。

自主元素替代方案

如果必须支持不使用填充程序的 Safari，请改为构建自主元素，并手动复制所需行为：添加 role="button"、tabindex="0"、用于处理回车键和空格键的键盘处理程序，并通过 ElementInternals 接口实现表单关联。

表单关联接口

自主元素可以通过设置 static formAssociated = true 并使用 this.attachInternals() 来参与表单提交。返回的 ElementInternals 对象提供 setFormValue 和 setValidity，以实现完整的表单集成。

如何选择

如果组件的行为主要类似某个内置元素（例如功能丰富的按钮或智能输入框），并且平台支持范围是 Chrome/Firefox，或者您可以接受填充程序，请选择定制内置元素。对于全新的组件（例如卡片和对话框），没有对应的内置元素时，请选择自主元素。

陷阱：自主按钮

Web 组件中最常见的错误，是创建 <my-button> 作为自主元素。它不会提交表单，不会响应回车键或空格键，也不会被朗读为按钮。请扩展 HTML 按钮元素类，或仔细复制真实按钮的每一项行为。

知识检查

对于类似按钮的组件，相比扩展 HTML 元素类（自主元素），扩展 HTML 按钮元素类（定制内置元素）的实际优势是什么？

总结

定制内置元素会扩展特定的 HTML 类（按钮元素类、输入元素类），并通过 is 属性使用，同时继承所有原生行为。请使用指定要扩展的按钮类型这一选项进行注册。Safari 原生不支持它们——如果需要完整的跨浏览器支持，请使用填充程序，或使用自主元素并手动复制行为。

常见问题解答

「扩展内置元素」课时是免费的吗？

是的 — 「扩展内置元素」的完整文本可在网页上免费阅读。要进行交互式练习（内置代码编辑器和全天候 AI 导师）并解锁 HTML Academy 课程的其余内容，请升级到 CoddyKit PRO。 HTML Academy 课程共包含 4 节课。

「扩展内置元素」这节课中我会学到什么？

使用 is 属性自定义现有元素 你通过在浏览器中直接运行的动手代码来练习 HTML Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。

学习 HTML Academy 需要有经验吗？

无需任何先前经验。CoddyKit 上的 HTML Academy 课程适合初学者到高级学习者，你可以从这里开始或从头开始，按照自己的节奏学习。 这是第 4 节课，共 4 节。

「扩展内置元素」课时需要多长时间？

大多数 CoddyKit 课程大约需要 5–10 分钟。每节课都很精短且互动，所以你能稳步进步，并在网页和应用中从离开的地方继续。

我能在这节 HTML Academy 课中编写并运行代码吗？

能。每节 HTML Academy 课都包含内置代码编辑器，你可以在浏览器中直接编写并运行真实代码，并获得即时 AI 反馈 — 无需本地设置。

此课程中的所有课时

  1. 使用 customElements.define 定义元素
  2. connectedCallback 和 disconnectedCallback
  3. 观测属性与 attributeChangedCallback
  4. 扩展内置元素
← 返回 HTML Academy