原生HTML自定义标签必须用customElements.define()注册且标签名含短横线（如user-card），否则浏览器不识别；constructor仅调用super()、创建Shadow DOM、初始化字段，DOM操作和属性读取须在connectedCallback中完成。
原生 HTML 自定义标签组件必须用 CustomElementRegistry 注册，否则浏览器根本不识别——不是样式没生效，是压根没当它是元素。
自定义标签名为什么总报错 DOMException？
错误通常来自命名不合规。浏览器对 customElements.define() 的第一个参数有硬性校验：
- 必须含且仅含 ASCII 短横线（
-），如user-card、date-picker；mybutton、MyButton、my_button全部非法 - 全部小写，
User-Card会触发DOMException: The name "User-Card" is not valid - 不能与任何原生标签重名，
div、slot、template、html均被保留
验证方式很简单：在控制台直接执行 customElements.define('xxx', class {})，报错信息里会明确提示哪条规则没过。
constructor 里能写什么？connectedCallback 又该干啥？
生命周期方法分工非常明确，混用就会导致 DOM 渲染失败或属性读取为空：
-
constructor：只做三件事——调用super()、调用this.attachShadow({ mode: 'open' })、初始化私有字段（如this._rendered = false）；禁止访问this.getAttribute()、禁止操作 Shadow DOM 内容、禁止添加事件监听器 -
connectedCallback：元素真正挂载到文档后才触发，此时才能安全读属性、渲染模板、绑定事件；首次渲染逻辑必须放这里，否则avatar、name这类初始属性拿不到值
典型错误：在 constructor 里写 this.shadowRoot.appendChild(...) —— 此时 shadowRoot 已存在但尚未 ready，多数情况下为 null 或空 DocumentFragment。
attributeChangedCallback 为啥不响应初始值？
这个回调只响应 DOM 属性的「变更」，不处理「首次设置」。比如：name="Alice" 是初始化时静态写的，attributeChangedCallback 根本不会触发。
- 必须在
connectedCallback中手动读一次this.getAttribute('name')并完成初始渲染 - 若需监听多个属性，
static get observedAttributes()返回数组，如['name', 'avatar', 'disabled']；漏写就收不到对应变更 - 注意：只有通过
setAttribute()、element.name = 'Bob'（需配合namesetter）等 JS 方式修改，才会触发回调；HTML 中静态属性只走初始化路径
样式隔离靠的是 Shadow DOM，不是外部 ；忘了 attachShadow 或用了 mode: 'closed'，就等于没封装——这是最常被忽略的“隐形失效点”。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
