Web Components知识手札
本手札用浏览器原生 API 解释组件边界，从自定义元素进入 Shadow DOM、表单关联、生命周期和框架互操作。 每篇都要求先运行最小例子，再改变输入、时序、宿主或失败条件。
阅读起点
前置：HTML、CSS、JavaScript 函数/模块/Promise 和浏览器 DevTools。第一次学习按下面章节顺序阅读；已有框架经验也应回到对应平台实验核对行为。
全书顺序
第1章：自定义元素与生命周期。 本章从“observedAttributes 与反射”开始，经过可观察实验和失败变体，建立到“define、升级与名称约束”的连续因果链。
第2章：Shadow DOM、模板与 slot。 本章从“open/closed ShadowRoot”开始，经过可观察实验和失败变体，建立到“template 克隆与渲染”的连续因果链。
第3章：属性、属性值与事件契约。 本章从“CustomEvent detail 与 composed”开始，经过可观察实验和失败变体，建立到“attribute 与 property 同步”的连续因果链。
第4章：框架互操作与测试边界。 本章从“框架 property/event 桥”开始，经过可观察实验和失败变体，建立到“whenDefined 与测试时序”的连续因果链。
第5章：Form-associated custom elements。 本章从“ElementInternals 不支持时降级”开始，经过可观察实验和失败变体，建立到“自定义校验与报告”的连续因果链。
第6章：升级、移动与生命周期。 本章从“adoptedCallback 与文档变化”开始，经过可观察实验和失败变体，建立到“customElements.whenDefined”的连续因果链。
第7章：Shadow CSS、主题与可访问样式。 本章从“:host 与 host-context”开始，经过可观察实验和失败变体，建立到“内部语义与焦点”的连续因果链。
第8章：发布、框架互操作与测试。 本章从“ESM、side effects 与定义时机”开始，经过可观察实验和失败变体，建立到“公开契约与迁移”的连续因果链。
深入阅读
从平台输入追到最终状态
遇到“页面没有更新、请求结果过期或交互重复”时，先回到对应章节的输入、事件路径和资源所有权，再沿实验日志确认是哪一步改变了状态。不要先用框架重写来掩盖平台边界。
从正常路径追到失败恢复
把取消、权限拒绝、卸载、离线、配额不足、浏览器不支持和辅助技术差异分别运行；每种失败都应有可观察反馈和降级策略。
从平台能力连接到 Vue 与 React
完成本手札后，再回到 Vue 学习路线 或 React 学习路线，比较框架如何包装事件、更新、Effect、表单、组件和服务端边界。
例子和练习怎样使用
先记录环境、输入序列、预期结果，再运行代码；随后只改变一个条件。正文中的练习要求写出成功、失败、取消/卸载和降级断言，答案集中在本章答案页。真实浏览器、权限、读屏、触摸、跨源、Worker 和 Service Worker 行为不能用 Node 语法检查代替。