英文:

sveltekit component doesn't inherit parent styling when using ssr

问题

### 上下文:
从一个基本项目开始，我有默认的主页面 `routes/+page.svelte` 和我的组件位于 `lib/Component.svelte` 下。

结构如下：
```plaintext
├── src
   ├── lib
   │   └── Component.svelte
   └── routes
       └── +page.svelte

Component.svelte:

该组件只是一个简单的 div，带有一个 slot，div 设置了一些属性，使其具有弹性并赋予它颜色。

<div id="line">
    <slot></slot>
</div>

<style>
    #line {
        display: flex;
        gap: 16px;
    }
</style>

+page.svelte:

我导入了 Component，并在 p 内显示它，p 设置了 font-size 和 font-weight。

<script>
    import Component from "$lib/Component.svelte";
</script>

<p id="para">
    <Component>
        <p>some text...</p>
        <p>some text...</p>
    </Component>
</p>

<style>
    #para {
        font-size: 36px;
        font-weight: 500;
    }
</style>

问题:

问题在于当页面首次加载时，首先显示了 SSR 页面，但你会注意到组件在 DOM 中呈现在父元素 p（id=para）之外。然后它会将其添加到 p 中，并继承字体大小和粗细属性。
这会创建一个静态内容的视觉闪烁，它没有正确的属性。

在检查静态构建文件夹与实时站点（使用 npm run dev）时，你可以看到组件是在其应该位于其中的父级之外呈现的。

一些额外信息:

• 我使用了静态适配器，并在 routes/+layout.js 中设置了 export const prerender = true
• 我的 svelte.config.js 配置为使用静态适配器

明显的解决方法是将父级样式直接应用于组件，但不幸的是，我的用例具有无法直接应用于组件的不同样式（来自父级）。

我是否遗漏了一些非常基本/明显的事情，我目前没有做的事情？

非常感谢您提前的任何帮助！

<details>
<summary>英文:</summary>

### Context:
Starting with a barebones project, I have the default main page `routes/+page.svelte` and my component under `lib/Component.svelte`.

The structure looks like this:

├── src
   ├── lib
   │   └── Component.svelte
   └── routes
   └── +page.svelte

`Component.svelte`:

The component is just a simple `div` with a `slot`, and the `div` has some properties set, to make it flex and give it colour.

```svelte
<div id="line">
    <slot></slot>
</div>

<style>
    #line {
        display: flex;
        gap: 16px;
    }
</style>

+page.svelte:

I import the Component, and display it inside of a p that has a font-size and font-weight set.

<script>
    import Component from "$lib/Component.svelte";
</script>

<p id="para">
    <Component>
        <p>some text...</p>
        <p>some text...</p>
    </Component>
</p>

<style>
    #para {
        font-size: 36px;
        font-weight: 500;
    }
</style>

Problem:

What ends up happening is when the page first loads, the ssr page is displayed first, but you'll notice the component is rendered outside of the parent p (id=para) in the DOM. Then it'll add it inside the p, and inherit the font size and weight.
This creates a visual flash of the static content that doesn't have the correct properties.

Upon examining the static build folder vs the live site (with npm run dev), you can see how the component is rendered outside of the parent it's supposed to be in.

Some additional info:

• I'm using the static adapter, with export const prerender = true set in routes/+layout.js
• My svelte.config.js is setup to use the static adapter

The obvious workaround is to apply to parent styles directly to the component, but unfortunately my use case has varying styles (of the parent) that I cannot apply directly to the component.

Am I missing something very fundamental/obvious that I am not currently doing?

Any help is greatly appreciated! Thanks in advance.

答案1

得分: 1

会怀疑这是因为这是无效的HTML。

不允许在段落中添加块级内容，即<div>或其他<p>不能在<p>内部，这可能导致解析器关闭当前（外部）段落。

段落应该主要包含文本，其内容模型是短语内容。

英文:

Would suspect that this happens because this is invalid HTML.

You are not allowed to add block content to a paragraph, i.e. a <div> or other <p> cannot be within a <p> which might cause the parser to close the current (outer) paragraph.

Paragraphs are supposed to contain primarily text, their content model is phrasing content.