题干与适用场景
一个列表由多个相同卡片组成，每张卡片都有触发按钮和绝对定位的提示框。按钮设定相同的 anchor-name，提示框以 position-anchor 引用它；结果所有提示框都贴到文件中最后一个同名锚点。请设计命名范围、组件边界、降级和测试。
题目聚焦 anchor-scope 对明确命名锚点的查找限制，不把它当成 Shadow DOM 隔离，也不假设所有浏览器都已支持 Baseline 2026 特性。
面试官考察点
- 能否说明同名锚点在未设 scope 时会按 source order 产生错误关联。
- 能否区分
none、all与指定 dashed-ident 的范围。 - 能否处理 implicit anchor、shadow tree、overflow fallback 与无支持浏览器。
- 能否以重复组件、可测试 DOM 和可观测降级方案落地。
回答前需要澄清的问题
- 提示框是否必须跨越卡片祖先，还是一定位于同一卡片子树？
- 组件是否会巢状、使用 Shadow DOM 或被 portal 到其他容器？
- 旧浏览器需要保留什么定位体验？
- 同名 anchor 是否由设计系统统一产生，还是各页面手写？
- 需要哪些 overflow、键盘焦点和 resize 测试？
30 秒回答框架
「问题在于同名 anchor 的可见范围没有被限制，positioned 元素会找到 source order 最后的匹配者。我把卡片容器设为 scope root，对重复名称使用 anchor-scope: --card-anchor 或在组件可控时使用 all，让提示框只解析同一子树的 anchor。再以 @supports 和普通 absolute 定位提供降级，测试巢状卡片、portal、overflow、键盘和不同浏览器。需要保留跨子树关联时不乱加 scope，并以组件契约说明名称可见性。」
分步骤深入解答
1. 先定位错误关联
anchor-name 和 position-anchor 建立明确关联。同一文件出现多个相同名称时，未设 scope 的 positioned 元素可能解析到 source order 最后的 anchor，因此重复卡片会叠在一起。先用 DevTools 检查 computed anchor、DOM 顺序和 containing block，排除尺寸或 stacking context 问题。
2. 选择 scope 边界
在每个卡片容器设定 anchor-scope，scope 会把指定名称的查找限制在该元素子树。all 会涵盖子树中的 anchor names；指定 --card-anchor 则只限制该名称，其他 anchor 名称仍可跨出。scope 不会限制 implicit anchor，也不是通用的样式或继承隔离。
.card {
anchor-scope: --card-anchor;
}
.card__trigger {
anchor-name: --card-anchor;
}
.card__tip {
position: absolute;
position-anchor: --card-anchor;
position-area: block-end;
}3. 为组件定义命名契约
把 anchor name 视为组件内部接口：root、anchor、positioned element 必须位于预期子树，且 scope 不可被任意祖先覆写。若组件需要巢状，为每层选择不同名称或在内层重新设定 scope，并在 Storybook 或组件测试中检查 DOM 结构。
4. 处理 fallback 与能力侦测
MDN 将 anchor-scope 标为 Baseline 2026，但旧浏览器可能不支持。用 @supports (anchor-scope: all) 包住增强规则，未支持时回到相对容器加 absolute inset、JavaScript 计算位置或原有 tooltip 组件。fallback 必须保留焦点顺序、可读名称和不遮挡内容。
5. 评估 portal、Shadow DOM 与 implicit anchor
anchor scope 影响 explicit anchor association；若提示框被 portal 到卡片外，可能不在 scope 子树，应改用唯一名称或保留既有定位方案。Shadow tree 有自己的 tree scope，仍要实测跨 shadow boundary 的可见性。不要以 anchor-scope 解决 implicit anchor 的所有问题。
6. 测试与观测
建立多卡片、巢状卡片、动态插入、排序变更、resize、scroll、zoom、键盘 focus 和 portal 的测试。检查每个提示框的实际几何位置、overflow、无障碍树与 fallback 命中率；记录能力侦测结果和定位错误，不记录用户输入内容。
高品质示范回答
「同名 anchor 在未设 scope 时可能解析到 source order 最后的元素，所以重复卡片的提示框会全部叠在一起。我会在卡片 root 设 anchor-scope: --card-anchor，trigger 设 anchor-name，提示框用 position-anchor，把 explicit lookup 限定在同一卡片子树。若需要限制所有内部名称可用 all，但不会影响 implicit anchor 或一般 CSS 继承。对旧浏览器用 @supports 降级到相对容器与既有 tooltip 定位，并测试巢状、portal、Shadow DOM、overflow、resize、键盘与排序。组件文件会列出名称和 DOM 边界，避免 scope 被错误重用。」
常见错误
- 只给每个元素不同 anchor-name → 组件无法封装且动态列表难维护 → 用 scope 限制同名查找。
- 把
all当作 Shadow DOM → 仍可能有继承、portal 或 tree scope 差异 → 分别验证 lookup 与样式边界。 - 忽略 source order → 只在最后一张卡片测试而误以为成功 → 测试多卡片与重新排序。
- 没有 fallback → 旧浏览器提示框完全失位 → 用 supports 与既有 absolute 或 JS 定位降级。
- 把 scope 用在 implicit anchor → 规则不会产生预期效果 → 确认 association 是 explicit 还是 implicit。
追问及应对
anchor-scope: all 和指定名称怎么选？
如果组件内所有 anchor names 都应该只在本卡片解析，选 all；若只有一个名称需要隔离，指定 --card-anchor 能避免限制其他跨组件关联。两者都要配合组件 DOM 契约测试。
提示框一定要在卡片子树内吗？
不一定。若使用 portal 或全域 overlay，scope 可能让它看不到卡片 anchor。此时可让 overlay 使用唯一 anchor name、传递几何资料，或保留 JavaScript 定位；不要强行把 overlay 放回错误的 DOM 层级。
这个属性目前能直接用在所有产品吗？
MDN 将它标示为 Baseline 2026，W3C CSS Anchor Positioning Level 1 仍是 Working Draft。先查目标浏览器支持矩阵，用 @supports 和可用性测试控制渐进增强。