JavaScript中Class与Web Components结合需继承HTMLElement，constructor首行必须调用super()以初始化原生DOM能力；推荐在此attachShadow创建影子根、设默认状态；通过observedAttributes和attributeChangedCallback响应属性变化；用connectedCallback等生命周期钩子控制真实行为时机。
JavaScript 中 Class 语法与 Web Components 结合时继承 HTMLElement，核心是让自定义类用 extends HTMLElement 声明，并在 constructor 中第一行调用 super() —— 这不是可选项，而是浏览器强制要求的初始化步骤。
必须从 constructor 调用 super()
不写会直接报错：ReferenceError: Must call super constructor in derived class before accessing 'this'。因为 super() 不仅执行父类逻辑，还为实例挂载原生 DOM 方法（如 addEventListener、setAttribute）、属性访问能力（如 this.id）和事件系统基础。跳过它，实例连基本 HTML 元素行为都不具备。
constructor 是初始化影子根和状态的最佳位置
- 推荐在此处调用
this.attachShadow({ mode: 'open' })创建 Shadow DOM，实现样式与结构隔离 - 可设置默认属性、初始化内部状态（如
this._value = null），或创建内部 DOM 片段 - 避免在此发起网络请求、操作
this.parentElement或调用getBoundingClientRect()—— 此时元素尚未插入文档，这些操作无效或报错
靠 observedAttributes + attributeChangedCallback 响应 HTML 特性变化
想让组件像 <input disabled> 那样自动响应属性变更，需两步配合：
- 在类中声明静态 getter：
static get observedAttributes() { return ['disabled', 'label']; } - 实现回调方法：
attributeChangedCallback(name, oldValue, newValue)，在里面更新内部状态或 UI；注意布尔特性（如disabled）的newValue可能是null或空字符串，需按语义判断是否启用
用生命周期钩子控制真实行为时机
constructor 只管“出生”，真正干活要等元素进入 DOM：
立即学习“Java免费学习笔记（深入）”；
-
connectedCallback：元素插入文档时触发，适合绑定事件、启动动画、发起数据请求 -
disconnectedCallback：元素从文档移除时触发，必须在这里清理副作用（如移除监听器、清除定时器、取消 fetch） -
adoptedCallback：跨 iframe 移动时触发，虽不常用，但注册时需保留该方法签名以防意外
