customElements.define只能注册继承HTMLElement的类，不能直接传HTML字符串；需在connectedCallback中用innerHTML或template动态渲染，constructor中调用super()并attachShadow，避免操作innerHTML导致shadow DOM失效。
HTML字符串怎么用customElements.define注册成组件
不能直接把HTML字符串当组件用——customElements.define只接受一个继承自HTMLElement的类，不是模板或字符串。常见错误是试图这样写：customElements.define('my-card', '<div>hello</div>')，结果报错TypeError: Class constructor cannot be invoked without 'new'。
正确做法是：用innerHTML或template在connectedCallback里动态渲染结构，类本身负责生命周期和行为封装。
- 用
document.createElement('template')预存结构，避免重复解析HTML字符串 - 在
constructor里调用super()并this.attachShadow({mode: 'open'})，否则样式和DOM隔离失效 - 别在
constructor里操作this.innerHTML——此时元素还没插入DOM，且会绕过shadow root
如何让Web组件支持传入HTML内容（类似slot）
原生<slot></slot>只能透传light DOM里的子节点，但如果你是从字符串生成组件内容（比如后端返回一段HTML），就得手动解析+注入，否则<slot></slot>不生效。
典型场景：CMS后台返回富文本HTML，想塞进Web组件内部并保持样式隔离。
立即学习“前端免费学习笔记（深入）”；
- 用
DOMParser把字符串转为DocumentFragment，再用shadowRoot.appendChild()插入，比innerHTML更安全（可过滤script标签） - 如果需要响应属性变化重新渲染，得在
attributeChangedCallback里清空shadowRoot再重载，别忘了innerHTML = ''不等于清空shadow DOM - 注意：直接
shadowRoot.innerHTML = htmlStr会丢失事件绑定，建议用replaceChildren()或逐个appendChild()
adoptNode和importNode在Web组件里什么时候必须用
当你从外部文档（比如iframe、其他shadow root）拿节点往自己的shadow DOM里放时，浏览器会报错Failed to execute 'appendChild' on 'Node': The node to be inserted is already in the document——这是节点所有权冲突。
这不是边缘情况：比如组件里嵌了第三方富文本编辑器，它生成的DOM节点默认属于主文档。
-
importNode(node, true)复制节点（含子树），适合从其他文档导入；adoptNode(node)转移所有权，适合同源iframe内节点 - 用完
importNode后记得手动绑定事件，因为复制后的节点不带原有监听器 - Vue/React组件库封装Web Component时经常漏这步，导致内部UI交互失灵
为什么querySelector在Web组件里找不到子元素
因为默认查的是light DOM，而组件内容大多在shadow root里。常见错误是写document.querySelector('my-button').shadowRoot.querySelector('.icon')，结果返回null——要么shadowRoot还没初始化，要么模式设成了'closed'。
更隐蔽的问题：用querySelectorAll查slot分发后的内容，实际匹配的是slot的placeholder，不是最终渲染出的节点。
- 确保
shadowRoot已创建（在connectedCallback之后才稳定可用） - 不要设
{mode: 'closed'}，除非你明确不需要调试或自动化测试 - 查slot内容用
assignedNodes({flatten: true})比querySelector更可靠
最麻烦的其实是样式穿透和事件冒泡边界——这些没显式写出来，但每次改slot结构或加event.stopPropagation()都可能突然断掉交互链。
