HTML本身没有组件树层级边界控制能力，纯HTML不提供组件级错误捕获或子树渲染隔离机制；错误边界需依赖React等框架或手动try/catch实现，原生HTML标签无法拦截内部JS错误或模板崩溃。
HTML本身没有组件树层级边界控制能力
纯HTML不提供任何“组件级错误捕获”或“子树渲染隔离”机制。所谓“组件树层级逻辑”，在原生HTML中只是DOM嵌套关系的视觉映射，浏览器不会为某个
或
<my-card>自动拦截其内部脚本崩溃、模板语法错误或document.write失败。你写的<template>内容出错，父级<div>完全无感；<script type="module">抛出ReferenceError，只会触发window.onerror，不会停在某个自定义标签边界。
Web Components必须手动加try/catch才能模拟边界
用customElements.define注册的元素，其生命周期钩子（如connectedCallback、attributeChangedCallback）是JS执行入口，但默认不带防护。一旦内部操作出错（比如this.shadowRoot.appendChild(badNode)），错误直接冒泡到全局。
- 必须在每个可能出错的钩子外层包
try { ... } catch (e) { this.innerHTML = '<slot></slot>'; } -
shadowRoot操作前加判空：if (this.shadowRoot) { ... }，否则Cannot read property 'appendChild' of null会中断整个页面 - 监听
error事件只能捕获资源加载失败（<img src="404">），对JS执行错误无效——别指望<my-comp onerror="handle">能生效，自定义元素不支持该属性绑定
React/HTM中错误边界只对render阶段有效
如果你用的是htm/react这类JSX轻量替代方案，仍运行在React生态下，那么componentDidCatch仅对子组件树的**同步渲染过程**和**生命周期方法**中的错误起作用。它不捕获：
- 事件处理器里的异步错误（如
onClick={() => fetch().catch(...)}需单独try/catch） -
render()内部throw新错误——这会导致边界自身崩溃，进入无限循环 - CSS解析失败、HTML标签未闭合、字体加载失败等非JS错误
关键约束：必须在render()里返回this.props.children，否则子组件根本不在监控范围内；备用UI（如h('div', {className:'error-boundary'}, [])）得是静态结构，避免再次触发渲染错误。
立即学习“前端免费学习笔记（深入）”；
最容易被忽略的边界失效点
开发者常以为把逻辑塞进某个<section>或<article>就天然有了“语义边界”，其实这些标签只影响可访问性和SEO，完全不干预JS错误传播路径。真正难控的是那些隐式依赖：
-
<main>里嵌套另一个<main>——语义冲突但JS照样跑，错误照常冒泡 - 用
<details><summary>模拟树形菜单，结果Safari下多级嵌套时open状态不可靠，JS读不到真实值 - 表格中用
data-parent-id模拟树形结构，但JS展开逻辑没处理递归深度，RangeError: Maximum call stack size exceeded直接卡死
边界不是写个标签就自动生效的东西，它要么靠框架（React/Vue）强制约定，要么靠你在每个可能崩塌的入口点亲手加固——而后者，往往比写功能逻辑更费神。
