Web component styles missing when mounted more than once

[lassebomh]

Describe the bug

I am a part of a project that uses Svelte 5 to create web components. We have emitCss set to false, and in production mode, web component styles are only inserted once (first time it mounts). Here's an overview of what happens:

• A page imports my-web-component.js
• <my-web-component> is placed in the dom, its style tags are inserted in its shadow dom.
• <my-web-component> is removed from the dom, together with the styles within it.
• <my-web-component> is inserted in the dom again, but no style tags are inserted.

I was able to trace the discrepancy to these lines:

https://github.com/sveltejs/svelte/blob/ec8a029db4721ef6839c10b0d69112a4cb04eaa1/packages/svelte/src/internal/client/dom/css.js#L12C1-L15C3

It appears that the runtime assumes the styles are still present, even though it has been removed.

All the best,
Lasse

Reproduction

1. Clone https://github.com/lassebomh/svelte-5-styles-bug
2. Run pnpm run preview
3. Press the button twice and notice the color change on the text.

It works fine with pnpm run dev.

Logs

No response

System Info

System:
    OS: Windows 11 10.0.22631
    CPU: (16) x64 AMD Ryzen 9 6900HS with Radeon Graphics
    Memory: 15.58 GB / 31.25 GB
  Binaries:
    Node: 20.12.2 - C:\Program Files\nodejs\node.EXE
    npm: 10.5.2 - C:\Program Files\nodejs\npm.CMD
    pnpm: 9.4.0 - C:\Program Files\nodejs\pnpm.CMD
  Browsers:
    Edge: Chromium (127.0.2651.74)
    Internet Explorer: 11.0.22621.3527

Severity

annoyance

[satouriko]

Consider this case,

A page imports my web-component.js
<my-web-component> is placed in the dom, its style tags are inserted in its shadow dom.
<my-web-component> is inserted in the dom again, yes I have 2 <my-web-component> now, the 2nd one couldn't use the 1st's style because of shadow dom encapsulation

In fact that <my-web-component> is removed from the dom, together with the styles within it doesn't matter at all, the bug is because of shadow dom encapsulation, not the removal of the 1st element. The 2nd element is out of styling even if the 1st element exists.

I don't think #12777 properly fixes the issue.

[trueadm]

Consider this case,

A page imports my web-component.js <my-web-component> is placed in the dom, its style tags are inserted in its shadow dom. <my-web-component> is inserted in the dom again, yes I have 2 <my-web-component> now, the 2nd one couldn't use the 1st's style because of shadow dom encapsulation

In fact that <my-web-component> is removed from the dom, together with the styles within it doesn't matter at all, the bug is because of shadow dom encapsulation, not the removal of the 1st element. The 2nd element is out of styling even if the 1st element exists.

I don't think #12777 properly fixes the issue.

That’s not what is happening though. We aren’t appending the styles at all because we thought we already had. The fact this works fine is n DEV backs this up.

[satouriko]

We aren’t appending the styles at all because we thought we already had.

That indeed is a problem when it comes to web components. Styles are encapsulated in shadow dom for each element. And previously appended style doesn't take effect in further mounted elements. Have you tested the case I mentioned?

[trueadm]

@satouriko Please can you provide a repo showing this not working?

[satouriko]

Sure, here's a reproduction: https://github.com/satouriko/svelte-custom-element-bug-1

Expected:

Actual:

PS: only under production build

[trueadm]

@satouriko Thank you for that :) fixed!