不存在原生 anchor-scope 属性；真正限制锚点作用域需用唯一 ID 前缀、aria-labelledby 语义关联或 Shadow DOM 隔离。
anchor-scope 不是标准 HTML 或 CSS 规范中的属性或功能，目前（截至 2026 年 5 月）不存在原生的 anchor-scope CSS 属性或 HTML 特性。你看到的可能是对 CSS 容器查询（@container）、锚点链接（<a href="#id">）或某些框架/工具链（如 PostCSS 插件、Blazor 的 scoped CSS、或实验性草案）的误读或混淆。
真实场景中，开发者常遇到的问题是：
多个组件各自定义了
id="header"、id="menu"等通用锚点名，导致页面内<a href="#menu">跳转错乱，或 JSdocument.getElementById("menu")拿到错误元素。
下面直接说清楚「怎么真正限制锚点作用域」——不靠虚构的 anchor-scope，而用现有、可靠、浏览器原生支持的方式：
立即学习“前端免费学习笔记（深入）”；
用唯一前缀 + 组件生命周期管理 ID 范围
锚点本质依赖全局id 属性，而 id 在整个 document 中必须唯一。没有“作用域”，只有“命名约定 + 管理”。
- 不要复用
id="sidebar"或id="content"这类泛化名称 - 在组件初始化时动态生成带前缀的 ID，例如：
id="user-profile-sidebar"、id="dashboard-content" - 若使用 Razor Pages / Blazor / React / Vue，可在组件挂载（
OnInitialized/useEffect/mounted）中生成并写入 DOM；卸载时可选择性清理（非必需，但利于 SSR 或多次渲染场景） - 对应的
<a href="#user-profile-sidebar">必须同步使用该完整 ID
用 <section> + aria-labelledby 替代纯 ID 锚点导航
当目标不是跳转，而是语义化关联（比如侧边栏和主内容区逻辑配对），优先用 WAI-ARIA 关系而非 ID 锚点：
- 把组件包裹在
<section aria-labelledby="sec-title"> - 标题用
<h2 id="sec-title">用户设置</h2> - 这样屏幕阅读器能正确建立上下文，且不污染全局 ID 空间
- JS 查询可用
section.querySelector('[aria-labelledby]')定位，避免getElementById的跨组件污染风险
用 Shadow DOM 隔离真实锚点作用域（仅限 Web Components）
如果你在写自定义元素（customElements.define），Shadow DOM 是**唯一能让 id 真正局部化**的机制：
- 在
attachShadow({ mode: 'open' })内部定义<a href="#inner-menu">和<div id="inner-menu"> - 此时
#inner-menu只在该 shadow root 内有效，外部页面完全不可见、不可跳转、不可通过document.getElementById访问 - 注意：
<a href的锚点跳转行为在 Shadow DOM 内默认仍会尝试滚动到匹配元素，但不会影响 document 全局滚动位置（需测试具体浏览器行为） - 不适用于 Razor Pages / MVC / Blazor Server —— 这些框架不默认启用 Shadow DOM
关键提醒：id 冲突不是样式问题，而是 DOM 结构与语义问题。试图用 CSS “隔离锚点” 是方向错误；真正要做的，是控制 ID 的生成方式、使用范围和语义替代方案。任何声称支持 anchor-scope 的库或插件，背后必然是在做 ID 前缀注入或运行时重写，而不是浏览器原生能力。
