customElements.define()需传合法类名（含短横线、非单字），否则抛DOMException；constructor中禁操作DOM，应移至connectedCallback；Shadow DOM样式须用adoptedStyleSheets显式注入，否则不生效。
customElements.define() 必须传入合法类名，否则注册失败
浏览器只接受符合规范的自定义元素名：必须包含短横线（-），且不能是单个单词（如mybutton非法，my-button合法）。传入undefined、null或已注册过的名称，会直接抛出DOMException: Failed to execute 'define' on 'CustomElementRegistry'。
常见错误是把类名写成驼峰（MyButton）却在define()里传'mybutton'——名字必须完全一致，且首字母小写。注册前最好加一层校验：
if (!customElements.get('site-header')) { customElements.define('site-header', SiteHeader); }- 避免重复注册，尤其在热更新或多次加载脚本时
- 类名不区分大小写，但推荐全小写+短横线，与 HTML 标签习惯对齐
constructor() 里不能操作 DOM，connectedCallback 才是挂载入口
自定义元素实例化发生在 DOM 解析阶段，此时元素尚未插入文档树。若在constructor()中调用this.querySelector()或this.innerHTML = '...'，会报错Failed to construct 'CustomElement': Please use the 'new' operator（即使你没手动 new，浏览器内部也会 new）。
正确做法是把 DOM 操作移至connectedCallback()：
立即学习“前端免费学习笔记（深入）”；
-
constructor()只做基础初始化（super()、this.attachShadow({ mode: 'open' })、属性默认值设置） -
connectedCallback()里填充 Shadow DOM、绑定事件、发起 fetch 请求 - 若需响应属性变更，必须配合
static get observedAttributes()+attributeChangedCallback()，否则<my-card title="Hello"></my-card>里的title不会触发更新
Shadow DOM 隔离样式但不自动加载 CSS，要用 adoptedStyleSheets
写import './card.css'不会生效——ESM 的 CSS 导入只是副作用，浏览器不解析它。想让样式进入 Shadow DOM，必须显式创建CSSStyleSheet并注入：
- 用
const sheet = new CSSStyleSheet()创建样式表 - 用
sheet.replaceSync(cssText)或await sheet.replace(cssText)加载内容（支持fetch读取本地 CSS 文件） - 再通过
this.shadowRoot.adoptedStyleSheets = [sheet]挂载 - 注意：
adoptedStyleSheets是可写数组，但每次赋值都会覆盖，追加样式得用push()再重新赋值
漏掉这一步，样式会泄漏到全局，或者干脆不显示——这是最常被忽略的环节。
HTML 中直接写 <my-card></my-card> 不会等待 JS 加载完成
浏览器解析 HTML 时遇到未知标签（如<my-card></my-card>），会先按“未知元素”渲染，等 JS 执行customElements.define()后才升级为自定义元素。如果 JS 加载慢或失败，用户看到的就是空白或未样式化的裸标签。
应对策略不是加 loading 占位符，而是控制加载时机：
- 把自定义元素脚本放在
里，用type="module"确保 defer 且不阻塞解析 - 避免用
document.write()或内联脚本动态插入<my-card></my-card>，因为执行顺序不可控 - 如需服务端渲染（SSR）兼容，得配合
is属性或降级方案（比如 fallback slot 里放纯 HTML 结构）
真正模块化不是把代码拆开就完事，而是让每个<my-card></my-card>能独立声明依赖、封装行为、隔离样式——而这些细节，全在constructor、connectedCallback和adoptedStyleSheets的配合里。漏掉任意一环，模块就只是个壳。
