customElements.define()是注册自定义元素的唯一入口；状态管理需依托生命周期钩子、Shadow DOM隔离及显式render()调用，data-*仅适合初始化传参，无响应式能力，不触发attributeChangedCallback。
customElements.define() 是唯一能注册自定义标签的入口，不调用它，类写得再完整也进不了 DOM。真正的组件化状态管理不是靠 data-* 属性堆砌，而是靠自定义元素生命周期 + Shadow DOM 隔离 + 显式状态同步机制。
为什么不能直接用 dataset 管理组件状态
所有 data-* 值都是字符串，没有响应式能力，也不能触发重渲染。比如你写 <counter data-count="5"></counter>，后续 JS 改了 this.dataset.count = '6'，UI 不会自动更新——DOM 不知道该 redraw。
-
data-*只适合初始化传参，比如data-theme="dark"或data-user-id="1024" - 修改
dataset不会触发attributeChangedCallback，因为它是只读映射（底层是属性快照） - 跨组件共享状态时，
dataset无法通知其他元素，必须手动轮询或监听 MutationObserver，成本高且不可靠
attributeChangedCallback 怎么正确响应状态变更
这个钩子只对 observedAttributes 数组里声明的、且通过 setAttribute() / removeAttribute() 触发的变更生效。它不是“监听任意属性”，也不是“监听 dataset”。
- 必须在类上静态定义：
static get observedAttributes() { return ['count', 'disabled']; } - 变更必须走 DOM API：
el.setAttribute('count', '42')，而不是el.count = 42或el.dataset.count = '42' - 值始终是字符串，需手动转换：
parseInt(newValue)或newValue === 'true' - 首次初始化时（如 HTML 中直接写
<counter count="3"></counter>），attributeChangedCallback会被调用一次
如何在 Shadow DOM 内部做状态驱动渲染
状态应存在实例属性（如 this._count = 0），渲染逻辑放在 render() 方法里，由生命周期钩子主动调用，而不是靠属性监听自动触发。
-
constructor()：只做基础初始化（super()、attachShadow），不要操作 DOM 或读取innerHTML -
connectedCallback()：适合首次渲染，调用this.render() -
attributeChangedCallback()：更新内部状态后，再调用this.render()（不是自动重绘） -
render()方法里用this.shadowRoot.innerHTML = `...`或更安全的textContent/append()更新 UI
示例片段：
立即学习“前端免费学习笔记（深入）”；
class Counter extends HTMLElement {
constructor() {
super();
this._count = 0;
const shadow = this.attachShadow({ mode: 'open' });
shadow.innerHTML = `<button><slot></slot>: <span class="value">0</span></button>`;
}
static get observedAttributes() { return ['count']; }
attributeChangedCallback(name, _, newValue) {
if (name === 'count') this._count = parseInt(newValue) || 0;
this.render();
}
render() {
const valueEl = this.shadowRoot.querySelector('.value');
if (valueEl) valueEl.textContent = this._count;
}
}
customElements.define('x-counter', Counter);
外部 JS 如何安全读写组件状态
不要绕过组件 API 直接操作 dataset 或内联属性。暴露明确的 getter/setter 和事件才是可控路径。
- 提供
get count()/set count(v)，并在 setter 里调用this.setAttribute('count', String(v)) - 用户点击按钮等交互，应在组件内部 dispatch
new CustomEvent('change', { detail: { value: this._count } }) - 避免把状态逻辑散落在多个地方：所有状态变更都收口到组件实例方法中
- 如果需要持久化（如 localStorage），应在
connectedCallback里恢复，在 setter 里保存，而不是依赖data-属性来回同步
