Svelte动态组件如何实现样式作用域？

Svelte的作用域样式默认是组件隔离的——父组件的样式只会给自身模板里的元素添加专属属性选择器，而data.content是独立编译的mdsvex组件，它的DOM元素不会带上父组件的属性标记，所以父组件的作用域样式自然无法生效。下面是几个可行的解决办法：

方法1：用:global()限定作用范围（最快实现） #

给动态组件套一个容器，通过容器选择器配合:global()来给内部的Markdown元素设置样式，既避免全局污染，又能覆盖动态组件内的内容：

// blog/[slug]/+page.svelte
<hgroup>
    <h1>{data.meta.title}</h1>
</hgroup>
<div class="markdown-content">
    <svelte:component this={data.content} />
</div>

<style lang="postcss">
    .markdown-content :global(h1) {
        @apply text-3xl font-bold text-primary-500;
    }
    .markdown-content :global(p) {
        @apply text-gray-700 leading-relaxed;
    }
    // 其他需要样式的Markdown元素同理
</style>

方法2：给mdsvex生成的元素添加自定义类（更规范） #

修改mdsvex的配置，给Markdown转换后的HTML元素自动添加自定义类，之后不管是在父组件还是全局样式里都能精准定位：

1. 在项目根目录的mdsvex.config.js里配置remark插件，比如用remark-class-names：

import { defineMDSveXConfig as defineConfig } from 'mdsvex';
import remarkClassNames from 'remark-class-names';

const config = defineConfig({
    extensions: ['.svelte.md', '.md', '.svx'],
    remarkPlugins: [
        [remarkClassNames, {
            h1: 'post-title',
            p: 'post-paragraph',
            ul: 'post-list',
            // 给需要的元素指定类名
        }]
    ]
});

export default config;

2. 然后在父组件的样式里直接写这些类的样式：

<style lang="postcss">
    .post-title {
        @apply text-3xl font-bold text-primary-500;
    }
    .post-paragraph {
        @apply text-gray-700 leading-relaxed;
    }
</style>

方法3：全局样式统一管理（适合全站点博客） #

如果你的博客所有页面的Markdown样式都一致，直接在src/routes/+layout.svelte里添加全局的Markdown内容样式，这样所有动态渲染的mdsvex内容都会自动应用：

// src/routes/+layout.svelte
<style lang="postcss">
    .blog-post h1 {
        @apply text-3xl font-bold text-primary-500;
    }
    .blog-post p {
        @apply text-gray-700 leading-relaxed;
    }
    // 其他样式
</style>

然后在博客页面给动态组件套上这个类：

<div class="blog-post">
    <svelte:component this={data.content} />
</div>

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