HTML5 customElements.define()注册自定义元素须继承HTMLElement、名称含短横线；HTML4不支持自定义标签语义，仅作未知元素处理；主流浏览器兼容但有细节差异；相比div+class，custom element提供语义化、封装性与原生生命周期。
HTML5 的 customElements.define() 怎么注册一个自定义元素
必须继承 HTMLElement 或其子类，不能直接用空对象；注册名必须包含短横线（-），比如 my-button 合法，mybutton 会报错。
常见写法：
class MyButton extends HTMLElement {
constructor() {
super();
this.attachShadow({ mode: 'open' });
this.shadowRoot.innerHTML = `<button><slot></slot></button>`;
}
}
customElements.define('my-button', MyButton);
注意点：
-
constructor中必须先调super()，否则报Failed to construct 'HTMLElement': Please use the 'new' operator - 不能在
connectedCallback里反复调this.attachShadow()，否则重复挂载会失败 - 若用
document.createElement('my-button')创建，需确保define已执行（脚本顺序或放在<script defer></script>里）
HTML4 能不能自定义标签（比如写个 直接用）
不能。HTML4 没有规范支持自定义标签语义，浏览器遇到未知标签会：
立即学习“前端免费学习笔记（深入）”；
DeepBI DHTML 页面生成器
下载
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
- 当成
HTMLUnknownElement（不是HTMLElement子类） - 不触发任何生命周期回调（
connectedCallback等全无效） - CSS 中
my-tag { display: block }可能生效，但无法绑定行为、无法封装逻辑 - 部分老 IE 甚至不生成 DOM 节点，直接忽略标签内容
即使强行用 document.createElement('my-tag') 在 IE8+ 注册，也只是让标签“存在”，仍无自定义能力——这和 HTML5 的 customElements 完全不同。
自定义元素在 Safari / Firefox / Chrome 的兼容性差异
主流浏览器都支持，但细节有坑：
- Safari 10.1+ 支持，但早期版本（如 10.0）不支持
customElements.define()的第三个参数（{ extends: 'button' }） - Firefox 63+ 才完整支持
shadowRoot和<slot></slot>，旧版需手动 fallback - Chrome 54+ 开始支持，但若用
is="xxx"语法（如<button is="my-button"></button>），需显式传{ extends: 'button' }，且仅适用于内置标签扩展
检查是否可用：
if ('customElements' in window) {
// 安全使用
}
为什么不能用 div + class 模拟，非要用 custom element
核心区别在封装边界和语义表达：
-
<my-input type="email"></my-input>是声明式语义，而<div class="my-input" data-type="email"> 是弱耦合的约定，无法被辅助工具、框架或未来标准识别 <li>custom element 自动获得 <code>attributeChangedCallback，属性变更可响应；普通div需手动监听MutationObserver - shadow DOM 天然隔离样式和事件冒泡，避免全局污染；class 方案要靠 BEM、CSS-in-JS 等额外机制模拟
- 框架（如 Lit、Stencil）底层仍基于
customElements.define()，绕不开这个原生机制
真正难的不是注册一个标签，而是设计好属性/事件/插槽契约，以及处理好 SSR、无障碍、焦点管理这些隐性需求。
