自定义元素原生支持四个标准生命周期回调：constructor()、connectedCallback()、disconnectedCallback()和attributeChangedCallback()，均需定义在类原型上；HTML的class属性仅用于CSS样式，与生命周期无关。
自定义元素（Custom Elements）本身不提供类似 Vue 或 React 的 class-based 生命周期钩子（如 mounted、updated），它原生只支持几个标准的**自定义元素生命周期回调**，且这些回调必须定义在类的原型上，不能通过 class 属性（即 HTML 中的 class）来声明或触发。
自定义元素真正的生命周期钩子有哪些
浏览器原生支持以下四个标准生命周期回调，它们是类的**静态方法或原型方法**，由浏览器在特定时机自动调用：
-
constructor()：元素实例化时调用（必须调用super()） -
connectedCallback()：元素被插入 DOM 时调用（可多次触发） -
disconnectedCallback()：元素从 DOM 中移除时调用 -
attributeChangedCallback(attrName, oldVal, newVal)：监听的属性变更时调用（需配合observedAttributes静态 getter）
class 属性和生命周期完全无关
class 是 HTML 元素的标准属性，用于设置 CSS 类名，仅影响样式和选择器匹配，**不会触发任何生命周期逻辑**。例如：
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
<my-button class="primary large"></my-button>
这段代码只是给 <my-button></my-button> 添加了两个 CSS 类，对 connectedCallback 等钩子的执行毫无影响。你不能靠写 class="mounted" 来“注册”一个挂载钩子——这在技术上无效，也无规范支持。
如何在自定义元素中模拟“组件生命周期”逻辑
若想实现类似框架的生命周期管理（比如“渲染完成”、“状态更新后”），需手动组织逻辑，常见做法包括：
- 在
connectedCallback中初始化 UI、绑定事件、发起请求 - 用
requestAnimationFrame或queueMicrotask延迟到 DOM 渲染后执行（模拟mounted后的“视图就绪”） - 结合
observedAttributes+attributeChangedCallback响应属性变化，再手动触发“更新”逻辑 - 维护内部状态，在
render()方法中统一更新 DOM，并在 render 后调用自定义的onRendered()等方法
不要混淆：class vs. class 名称
注意术语区别：
- class（HTML 属性） → 字符串值，纯样式用途
- class（JavaScript 类） → 定义自定义元素构造函数的语法结构，生命周期方法写在这里的原型上
例如：
class MyCard extends HTMLElement {
constructor() {
super();
this.attachShadow({ mode: 'open' });
}
connectedCallback() {
this.render(); // 可在此调用你的初始化逻辑
}
render() {
this.shadowRoot.innerHTML = `<slot></slot>`;
}
}
customElements.define('my-card', MyCard);这里的 class MyCard 是 JS 类声明，不是 HTML 的 class 属性。
