如何让Astro组件内@astropub/md渲染的Markdown带作用域类？

问题核心是@astropub/md默认不会给渲染出的HTML元素添加Astro的作用域类，导致组件内的作用域CSS无法匹配。以下是不丢失作用域的解决方法：

步骤1：获取组件的作用域类 #

在组件的脚本部分，通过Astro.self.scope获取当前组件的专属作用域类（例如.astro-UW5KDBXL）。

步骤2：通过transform选项给Markdown元素添加作用域类 #

调用markdown()函数时，传入transform配置，遍历渲染出的所有DOM节点，给元素节点添加作用域类。

修改后的完整组件代码：

---
import { markdown } from "@astropub/md";
const scopeClass = Astro.self.scope;
---

<p>this text is not bold, <strong>but this is</strong>.</p>
{markdown("this text is not bold, **but this is**.", {
  transform(node) {
    // 仅处理元素节点
    if (node.type === 'element') {
      // 给元素的class列表添加作用域类
      node.properties.class = [
        ...(node.properties.class || []),
        scopeClass
      ].join(' ');
    }
    return node;
  }
})}
<style>
   strong {
      color: red;
   }
</style>

效果说明 #

修改后，Markdown渲染出的<p>和<strong>元素都会带上对应的astro-xxx作用域类，组件内的作用域CSS规则就能正常匹配这些元素，既保证样式生效，又能保留Astro孤岛架构的优势，不会污染全局样式。

内容的提问来源于stack exchange，提问作者Justin Parks