基于HTML自定义标签的组件封装与状态管理实践-html教程-PHP中文网

customelements.define()是注册自定义元素的唯一入口；类名必须含连字符（如my-button）以满足规范；attributechangedcallback仅响应observedattributes声明且通过setattribute等触发的属性变更；shadow dom需用slot透传内容、dispatchevent通知外部；组件行为一致性需在生命周期钩子间权衡。

基于html自定义标签的组件封装与状态管理实践

customElements.define() 是唯一能注册自定义标签的入口，不调用它，类写得再完整也进不了 DOM。

为什么 `class MyButton extends HTMLElement` 必须带连字符？

浏览器靠连字符（如 my-button、user-card）识别合法的自定义标签名。用 mybutton 或 MyButton 会直接报错：Failed to execute 'define' on 'CustomElementRegistry': The name "mybutton" is not a valid custom element name。

连字符是强制语法要求，不是风格建议
不能以数字开头，不能包含大写字母或下划线
已注册的同名标签不可覆盖，需刷新页面或先 customElements.get('my-button') 判断是否存在

`attributeChangedCallback` 不触发？检查这三处

这个钩子只响应 observedAttributes 显式声明的属性，且仅对通过 setAttribute、removeAttribute 或 HTML 属性变更生效，不响应 JS 对 this.xxx = value 的赋值。

Wechat HTML Publisher

直接上传HTML富文本到微信公众号草稿箱。支持完整的HTML格式,无需Markdown转换。

下载

必须在类中静态定义 static get observedAttributes() { return ['label', 'disabled']; }
HTML 中写 <my-button label="提交"></my-button> 会触发；但 el.label = '提交' 不会
首次初始化时（即从 HTML 解析阶段）的属性值不会进该回调，要用 constructor 或 connectedCallback 补读

Shadow DOM 里怎么响应外部事件？别漏掉 `slot` 和 `dispatchEvent`

Shadow DOM 天然隔离样式和事件流，外部点击进不去内部按钮，内部按钮点击也传不到外层——除非你主动透传或暴露接口。

用 <slot></slot> 让用户把内容“塞进来”，比如 <my-modal><h2 slot="title">提示</h2> <p slot="body">确定删除？</p></my-modal>
内部操作要通知外部，得手动 this.dispatchEvent(new CustomEvent('confirm', { detail: { ok: true } }))
不要在 shadowRoot 上监听 click 后直接调 this.click——那只是触发自己身上的原生事件，外部没监听就等于白发

真正难的不是写出来，是让组件在不同上下文里保持行为一致：属性改了是否立刻重绘？插槽内容更新后要不要重新布局？多个实例共享状态还是完全隔离？这些都得在 constructor、connectedCallback、attributeChangedCallback 之间做取舍，没有银弹，只有权衡。