astro island 模式下 HTML 不能直接用
HTML 字符串（比如 innerHTML 插入的）在 Astro Islands 中不会触发 hydration，也不会被 Astro 识别为可交互组件。你看到的“静态 HTML”其实是服务端渲染后就冻结了，JS 逻辑根本没挂载上去。
常见错误现象：document.querySelector('.btn').addEventListener 在客户端执行但找不到元素，或事件绑定了却没反应——因为那段 HTML 是字符串拼出来的，不是 Astro 组件树的一部分。
- 必须把交互逻辑封装进
.astro或.ts组件文件，用client:load等指令显式声明 hydration 时机 - 不要在
<script></script>标签里手动操作 DOM 来“补救”HTML 片段，Astro 的岛屿模型不认这种写法 - 如果后端返回的是富文本 HTML（如 CMS 内容），需用
dangerouslySetInnerHTML+ 单独的轻量级 Island 包裹交互区域，而不是整块塞进去
client:load 和 client:idle 的选择依据
两者都用于标记组件需要 hydration，但触发时机不同，直接影响首屏响应和资源加载节奏。
使用场景：client:load 适合按钮、表单、搜索框这类用户一进入就可能操作的元素；client:idle 更适合图表、评论区、懒加载列表等非首屏强依赖项。
-
client:load会在页面 DOM ready 后立即 fetch JS 并执行 hydration，JS 文件会阻塞关键渲染路径 -
client:idle等浏览器空闲时才加载，对 LCP 影响小，但用户快速点击可能遇到“短暂无响应” - 不写指令 = 默认不 hydration，哪怕组件里写了
<script></script>也不会运行
示例：
如何让纯 HTML 片段变成可 hydrate 的 Island
不能“转”，只能“重构”。Astro 不提供 HTML → Island 的自动转换工具，必须把行为逻辑抽离成组件，并用 props 或 slot 接入原始 HTML 内容。
典型做法是：保留 HTML 结构语义，把交互部分剥离为子 Island，再用 props.html 注入静态内容。
- 避免在组件内用
innerHTML渲染传入的 HTML 字符串后再加事件监听——这绕过了 Astro 的 hydration 生命周期 - 若必须动态渲染 HTML，用
dangerouslySetInnerHTML，再在外层包一个带client:load的 wrapper 组件，把 JS 逻辑写在 wrapper 的<script></script>里 - 注意 XSS：所有注入的 HTML 必须经过服务端清洗，Astro 不自动过滤
dangerouslySetInnerHTML
示例结构：HtmlIsland.astro 内部只做事件委托绑定，不重新解析 HTML
CSS 隔离和 scoped style 的实际效果
Astro 默认不隔离 CSS， 块会全局生效，除非显式加 is:scoped。但 scoped 不等于 Shadow DOM，它只是属性选择器模拟，不影响 JavaScript 访问 DOM。
容易踩的坑：以为加了 is:scoped 就能防止样式穿透，结果发现第三方库的 class 还是污染了全局；或者用了 client:load 后，JS 动态添加的 class 没匹配上 scoped 属性。
-
is:scoped编译后会给元素加类似data-astro-HASH属性，并重写 CSS 选择器，但仅作用于组件内直接写的 - 通过
className或class:list动态添加的 class 不受 scoped 影响，也不会被自动加上 data 属性 - 想真正隔离样式，得配合
client:load+ Shadow DOM（需手动在组件<script></script>里 attachShadow），Astro 默认不启用
复杂点在于：HTML 内容来自外部（如 CMS），你既不能改它的 class 名，又没法保证 scoped style 覆盖它——这时候只能靠命名空间前缀或 CSS-in-JS 方案兜底。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
