自定义元素注册失败主因三类：标签名缺连字符、重复define、注册时机过晚；attributeChangedCallback不触发初始属性属规范行为，需配合observedAttributes声明并手动同步；Shadow DOM样式须注入内部，不继承外部样式；原生API可控性强，框架仅简化开发但增加抽象层。
自定义元素注册失败的常见报错怎么定位
注册失败基本就三类原因：标签名不合法、重复 define、注册时机太晚。浏览器控制台报 Failed to execute 'define' on 'CustomElementRegistry' 时，先看错误消息末尾——它通常直接告诉你问题在哪。
-
mybutton报错？→ 标签名缺连字符，必须写成my-button -
The name "x-foo" has already been used？→ 检查是否在多个模块或 script 中重复调用了customElements.define('x-foo', ...) - 页面里写了
<ds-card></ds-card>但没反应？→ 查 DOM：该节点是不是document.createElement('ds-card')创建的，还是 HTML 解析时就存在？后者要求define()必须在<ds-card>出现之前执行（用<script defer>或放在</body>前）
attributeChangedCallback 为什么没触发初始值
这是最隐蔽的坑：attributeChangedCallback 确实不会响应 HTML 中写的初始属性，比如 <ds-input value="hello"></ds-input> 渲染时，value 不会进回调。这不是 bug，是规范行为。
- 必须配合
static get observedAttributes()显式声明监听哪些属性，漏写或拼错（如写成'Value'）就完全失效 - 首次渲染后，需要手动同步：在
connectedCallback里读取this.getAttribute('value')并更新 shadow 内容，否则内容为空 - 别在
constructor里读属性——此时 DOM 还没挂载，getAttribute返回null
Shadow DOM 里样式为啥全丢了
不是样式“丢了”，是它根本没进来。Shadow DOM 天然隔离，外部 <style> 和 CSS 文件里的规则一条都不会穿透。
PigX UI 前端开发
下载
PigX UI Pro 前端开发指南 - Vue 3 + TypeScript + Element Plus。当用户提到 PigX UI、PigX 前端、lgb-mgui 项目、Vue 3 企业级后台开发、Element Plus 后台开发时使用此技能。
- 所有样式必须注入到 shadowRoot 里：
shadowRoot.innerHTML = '<style>div{color:red}</style>...'或用shadowRoot.appendChild(styleEl) - 想让宿主元素响应外部控制？用
:host伪类：:host([disabled]) { opacity: 0.5; }，但注意:host只能影响宿主自身，不能选中 shadow 内部子元素 - 字体、字号、行高这些基础排版属性不会继承，必须显式写进 shadow 内样式，哪怕只写
font-family: system-ui;
要不要用 LitElement 或 Polymer
如果项目只需要几个轻量组件，原生 API 足够，加框架反而多一层抽象和打包负担。LitElement 的模板语法和响应式属性确实省事，但代价是：你得接受它的更新机制、属性映射规则，以及调试时多一层堆栈。
立即学习“前端免费学习笔记（深入）”；
- 原生写法可控性更强：生命周期钩子调用时机明确，DOM 操作路径清晰，Lighthouse 扫描结果更干净
- LitElement 在
render()里返回模板字符串，对 SSR 或静态生成不友好；原生可直接操作shadowRoot，兼容性更稳 - 真正容易被忽略的是：无论用不用框架，
observedAttributes和connectedCallback的语义边界都一样——框架只是帮你封装了，没绕过规范
