自定义元素必须用 customelements.define() 注册才能生效，注册名需含短横线，建议封装进独立js文件；应优先使用 shadow dom 管理状态，避免直接操作 innerhtml；attributechangedcallback 仅监听 observedattributes 列表中的属性，且值为字符串；跨页面复用需组件闭环，不依赖全局变量或特定 dom 结构。
自定义元素必须用 customElements.define() 注册才能生效
浏览器不会自动识别你写的 <my-button></my-button> 这类标签，不调用 customElements.define() 就只是普通未知标签，连生命周期回调都不会触发。常见错误是只写了 class 定义但忘了注册，或者注册时机太晚（比如 DOM 已渲染完才注册），导致页面中已存在的自定义标签无法升级。
实操建议：
- 确保在
<script></script>中执行注册，且脚本放在所有使用该元素的 HTML 之后，或加defer属性 - 注册名必须包含短横线（
-），如my-tabs合法，mytabs会抛错Failed to execute 'define' on 'CustomElementRegistry': The name provided ('mytabs') is not a valid custom element name - 若需跨页面复用，推荐把注册逻辑封装进独立 JS 文件（如
components.js），并在每个页面<script src="components.js" defer></script>
组件状态管理别直接操作 this.innerHTML
很多初学者习惯在 connectedCallback() 里写 this.innerHTML = '<button>Click</button>'，这会导致事件监听器丢失、子元素重复初始化，甚至破坏 Shadow DOM 封装性。尤其当组件被多次插入或移出 DOM 时，这种写法极易引发内存泄漏和 UI 错乱。
实操建议：
- 优先使用 Shadow DOM：在
constructor()中调用this.attachShadow({mode: 'open'})，再往this.shadowRoot写内容 - 状态变更统一走
render()方法，仅在必要时调用（如属性变更后），避免每次connectedCallback都重绘 - 绑定事件用
this.shadowRoot.addEventListener()，而非querySelector().addEventListener()，防止因 innerHTML 重写而解绑
attributeChangedCallback() 只监听 observedAttributes 列表里的属性
即使你在 HTML 上写了 <my-input value="test"></my-input>，如果没在 class 中声明 static get observedAttributes() { return ['value']; }，那么 attributeChangedCallback 根本不会被调用——这点容易被忽略，导致“属性变了但组件没反应”。
实操建议：
-
observedAttributes必须是数组，且值为字符串，大小写敏感；Value和value是两个不同属性 - 属性值始终是字符串，即使你传
disabled="true"，拿到的也是字符串"true"，需手动转布尔：newValue === 'true' - 首次初始化时（即元素被解析成 DOM 的瞬间），也会触发一次
attributeChangedCallback，注意判空处理
跨页面复用时，避免依赖全局变量或未声明的 DOM 节点
有人把组件逻辑写成 “先找页面里某个 <div id="config">，再读它的 <code>dataset”，这在单页没问题，但换到另一个没有该节点的页面就会报错 Cannot read property 'dataset' of null。跨页面复用的前提是组件自身闭环，不假设宿主环境有特定结构。
实操建议：
- 所有配置通过属性（
attr）或默认参数提供，例如<my-card title="Hello" theme="dark"></my-card> - 需要共享状态？用
localStorage或CustomEvent+window.dispatchEvent()，而不是依赖某页面的document.getElementById() - 构建工具打包时，确认输出的 JS 不含
window/document相关副作用代码（比如立即执行的查询语句），否则 SSR 或测试环境会失败
真正难的不是写一个能跑的自定义元素，而是让它在任意 HTML 页面里插入就能用，不报错、不污染、不假定上下文——边界条件比主体逻辑更耗时间。
