自定义元素能真正解耦是因为它通过标签名、属性名、事件名等契约式api锁定行为，而非简单拆分代码；必须严格遵循类名pascalcase与标签名kebab-case一一对应、属性仅限字符串/布尔值、复杂配置需json解析、connectedcallback中初始化且禁发请求、表单参与须同时满足formassociated: true、attachinternals()和setformvalue()三要素。
为什么自定义元素能真正解耦，而不是“换个写法”
因为解耦不是靠把代码拆成文件，而是靠契约——标签名、属性名、事件名、插槽名全由类定义锁定，别人不能绕过API直接操作内部DOM。比如DatePicker类里attributeChangedCallback怎么响应value变化，跟谁写的页面无关。
常见翻车点是：有人用data-传复杂对象，有人靠innerHTML注入HTML，还有人手动监听click却不暴露CustomEvent。这种写法让Code Review变成挑刺，不是对齐设计。
- 所有自定义元素必须带
export，且类名与标签名严格对应（如class AlertBanner extends HTMLElement→customElements.define('alert-banner', AlertBanner)） - 属性只能是字符串或布尔值；复杂配置走
data-config或显式JSON.parse(this.getAttribute('config')) -
connectedCallback里做初始化，但禁止发起网络请求——时机应由父组件控制，否则不可测、不可控
如何让自定义表单元素真正参与form提交
很多<my-input></my-input>看着像输入框，但表单提交时值根本不到后端——因为没实现formAssociated接口。这是最常踩的坑：只渲染UI，没接入表单生命周期。
必须三件事一步不落：
- 构造函数中调用
this.attachInternals()获取ElementInternals实例 -
connectedCallback中监听子<input>的input事件，并调用this.internals.setFormValue() -
customElements.define()时显式传{ formAssociated: true }，否则attachInternals()会报错
别想继承HTMLInputElement——Chrome v100+已限制，Firefox/Safari基本不支持。现实路径只有一条：自治型自定义元素（autonomous），自己搭DOM结构，再用attachInternals()模拟表单能力。
如何在自定义元素里捕获渲染错误
原生没有componentDidCatch，customElements.define注册的元素本身不自动拦截内部JS错误或模板崩溃。“错误边界”必须手动加try/catch，否则错误直接冒泡到window.onerror。
典型错误：
-
constructor里就写this.innerHTML = template→ DOM未挂载，catch不到，还可能静默失败 - 用
<template></template>+content.cloneNode(true)渲染，但没包try→ 模板含非法JS表达式（如{{data.xxx}}未处理）直接中断 -
shadowRoot.appendChild()前没校验节点合法性 → 传null或文本节点当Element用，抛TypeError却无处捕获
正确做法：所有可能触发DOM操作或模板求值的逻辑，都放在connectedCallback内的try块中，并在catch里降级为静态HTML或占位提示。
attributeChangedCallback为什么总捕不到初始属性
attributeChangedCallback只响应DOM属性变更事件，不处理HTML初始化时的属性赋值。比如<my-card title="hello"></my-card>中的title，首次解析时根本不会触发该回调——你在这儿写的try/catch压根不执行。
解决方案只有两个：
- 在
connectedCallback中主动读取this.getAttribute('title')并做校验和容错 - 把属性解析逻辑（包括可能抛错的
JSON.parse、正则匹配等）全挪进connectedCallback的try块里
别指望observedAttributes列表能兜住初始化错误——它只控制哪些变更会触发回调，不改变执行时机。这个细节90%的人第一次都会忽略，直到上线后发现初始属性失效才排查半天。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
