如何构建符合W3C标准的HTML自定义组件-html教程-PHP中文网

能用 customelements.define() 注册的自定义标签才是符合 w3c 标准的 html 自定义组件；单纯写不注册、不继承 htmlelement，仅被浏览器宽容处理为 htmlunknownelement，无生命周期、无属性响应、无 shadow dom 封装，也不具备语义化和可访问性。

如何构建符合w3c标准的html自定义组件

直接说结论：能用 customElements.define() 注册的自定义标签，才是符合 W3C 标准的 HTML 自定义组件；单纯写个 <my-card></my-card> 不注册、不继承 HTMLElement，只是浏览器“不报错地放过”，但不算标准组件。

为什么 `<foo-bar></foo-bar>` 不能直接当组件用

浏览器确实会把 <foo-bar></foo-bar> 当作普通元素保留在 DOM 中，也支持加 CSS、绑定事件——但这只是“宽容处理”，不是“标准组件”。它本质是 HTMLUnknownElement 实例，没有生命周期、无法响应属性变更、不能封装 Shadow DOM，也不被辅助技术（如屏幕阅读器）识别为语义化单元。

常见错误现象：写了 <user-card name="张三"></user-card>，但 JS 里取不到 name 属性变化，connectedCallback 也不触发
根本原因：没调用 customElements.define()，浏览器不知道这是你定义的“类”，只当它是未知标签
兼容性影响：IE 完全不支持；Edge 13+、Chrome 67+、Firefox 63+ 才支持标准 Custom Elements v1

`customElements.define()` 的硬性约束

注册时名字、类、时机三者都必须合规，否则会抛 DOMException 或静默失败。

html-deploy

使用 htmlcode.fun 将 HTML 内容或文件部署到网页，适用于用户要求“部署到网页”“托管此 HTML”“生成此前端...的实时链接”等场景。

下载

标签名必须含短横线：my-button ✅，mybutton ❌，MyButton ❌（大小写敏感，且必须小写）
类必须继承 HTMLElement，且不能是匿名类：class MyButton extends HTMLElement { ... } ✅，customElements.define('x-btn', () => {}) ❌
必须在 document 可访问后注册：不能放在 <script></script> 标签里却未加 defer 或未等 DOMContentLoaded，否则报错 "Failed to execute 'define' on 'CustomElementRegistry'"
不能重复定义：第二次调用 customElements.define('x-foo', ...) 会直接 throw

Shadow DOM 封装不是可选，而是标准组件的核心标志

W3C 明确将 Shadow DOM 作为 Web Components 的三大支柱之一。没有 this.attachShadow({ mode: 'open' })，就只是个带样式的普通标签，谈不上“封装”和“隔离”。

容易踩的坑：在 Shadow DOM 外写 document.querySelector('.inner') 查不到组件内部元素——这是设计使然，不是 bug
样式作用域差异：<style></style> 放进 Shadow Root 里才真正局部生效；放全局 CSS 里写 my-card .title 是无效的（除非用 ::part() 或 :host）
性能注意：每个实例都新建 Shadow Root，大量组件时内存开销比普通 <div> 高，别滥用 <h3> <code><template></template> 和 <slot></slot> 是声明式组装的关键
手动拼接字符串注入 innerHTML 是反模式。标准做法是用 <template></template> 预存结构，再用 <slot></slot> 声明内容分发点。
- 常见错误：把 <template></template> 放在里直接渲染——它不会自动激活，必须用 template.content.cloneNode(true) 手动提取
- <slot></slot> 不是占位符而是出口：父级传入的内容会“投影”到对应 <slot name="xxx"></slot> 位置，没匹配上的默认内容才显示
- 不要在 <slot></slot> 里写逻辑：比如 <slot><span onclick="doSomething()">点击</span></slot>，事件绑定应在组件类里统一处理
最常被忽略的一点：W3C 标准组件必须通过 customElements.define() 注册，且标签名带短横线——这不是“推荐做法”，而是解析器识别自定义元素的唯一依据。哪怕你用 Vue 或 React 包了一层，底层仍要走这套标准流程，否则就只是个语法糖，不是真正的 Web Component。