自定义元素需在connectedcallback中手动加try/catch捕获渲染错误，因原生不提供componentdidcatch；attributechangedcallback不触发初始属性解析，须在connectedcallback中主动校验；shadow dom错误ui需内联样式并清空旧内容；css错误、html错位、资源加载失败及未捕获promise reject无法被js错误边界覆盖。
自定义元素里怎么捕获子内容渲染错误
原生 HTML 没有 componentDidCatch，customElements.define 注册的元素本身不自动拦截内部 JS 错误或模板崩溃。所谓“组件级错误边界”，必须靠你在 connectedCallback 或 render 方法里手动加 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 列表能帮你兜住初始化错误 —— 它只控制哪些变更会触发回调，不改变执行时机。
Shadow DOM 里怎么让错误 UI 真实生效
往 this.shadowRoot 里写错误提示时，容易忽略三件事：
- 没清空原有内容：直接
this.shadowRoot.innerHTML = '<div>出错了</div>'可能残留旧节点导致样式冲突或内存泄漏 - 没注入基础样式：Shadow DOM 隔离 CSS，
<div class="error"> 若没在 shadow 内定义 <code>.error，用户看到的就是无样式的纯文本 - 用了外部字体或变量：比如
color: var(--error-color)，但宿主页面没提供该变量，错误 UI 反而显示异常 - CSS 解析错误（如
background: linear-gradient(0deg, #fff, invalid-color);）→ 浏览器静默忽略，不抛 JS 异常 - HTML 结构错位（
<div><span>xxx</span></div>）→ 浏览器自动修复 DOM 树，不触发任何事件 -
<img src="404.jpg">加载失败 → 触发error事件，但不是 JS 执行错误，需单独监听this.addEventListener('error', ...) - 异步 Promise reject（如
fetch().catch(...)漏写）→ 不会进try/catch，必须靠window.addEventListener('unhandledrejection')兜底
推荐写法：this.shadowRoot.innerHTML = `<style>.fallback { color: #d32f2f; font-weight: bold; }</style>
<div class="fallback">加载失败</div>`，样式和结构一次性注入，不依赖外部上下文。
错误边界不能覆盖哪些问题
即使你把 try/catch 套得再严实，这几类问题依然逃逸：
真正难防的，从来不是代码里的 throw，而是那些浏览器根本不当错误处理的东西 —— 它们不会打断 JS 执行，却能让 UI 彻底失焦。
