为什么使用 Go 渲染的 Svelte 组件时有些样式不起作用？

Question

我正在尝试在 Golang 应用程序中使用 Svelte（不是 SvelteKit）。但我遇到了一个障碍，CSS 无法在 Svelte 组件上正确渲染。它从 pico.css 中引入了一些样式，但缺少其他样式。

我的代码如下：

// templates/mainpage.html
<!DOCTYPE html>
<head>
    <meta charset="UTF-8">
    <title>My Page</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@picocss/pico@1/css/pico.min.css">
    <script defer src='/public/build/bundle.js'></script>
</head>
<body>
    <main class="container">
        <h1>H1 from the HTML template</h1>
        <button>Button</button>
        <hr />
        <my-app/>
    </main>
</body>
</html>

// src/App.svelte
<script>
</script>

<svelte:options tag="my-app" />
<h1>H1 from the Svelte component</h1>
<button>Button</button>

<style>
</style>

生成以下页面：

HTML 模板渲染正确，而 Svelte 组件已正确获取 H1 字体系列和字体大小，但未获取 H1 颜色。并且没有应用任何按钮样式。

我已经陷入了 Shadow Doms 和 CSS 变量的困境，但我不是前端专家，我很困惑为什么只应用了部分样式。

有什么关于我缺少什么的指示吗？

Answer 1

这可能是影子 DOM，你可以这样做来禁用它：

<svelte:options shadow="none" ...>

请注意，这会阻止组件拥有插槽 (docs)。

为什么使用 Go 渲染的 Svelte 组件时有些样式不起作用？

问题描述投票：0回答：1

1个回答

最新问题

为什么使用 Go 渲染的 Svelte 组件时有些样式不起作用？

问题描述 投票：0回答：1

1个回答

最新问题

问题描述投票：0回答：1