CSS styles for nested components getting stripped for webcomponents

[hood]

Describe the bug

I'm getting my CSS completely stripped for nested components, when building for webcomponents as a target. Basically everything that's inside <style> tags for my Svelte components that are mounted inside of another Svelte component gets wiped.

Reproduction URL

Here

Reproduction

vite.config.ts

import { defineConfig } from "vite";
import { svelte } from "@sveltejs/vite-plugin-svelte";
import SveltePreprocess from "svelte-preprocess";

// https://vitejs.dev/config/
export default defineConfig({
  mode: "development",
  build: {
    minify: false,
    rollupOptions: {
      input: [
        "./src/demo/Father.svelte",
        "./src/demo/Child1.svelte",
        "./src/demo/Child2.svelte",
      ],
      output: {
        entryFileNames: "[name].js",
      },
    },
  },
  plugins: [
    svelte({
      preprocess: SveltePreprocess({ typescript: true }),
      prebundleSvelteLibraries: true,
      compilerOptions: {
        customElement: true,
        css: true,
      },
      emitCss: true,
    }),
  ],
});

---

svelte.config.js

import { vitePreprocess } from '@sveltejs/vite-plugin-svelte'

export default {
  preprocess: vitePreprocess(),
}

---

index.html

<script src="./dist/Father.js" type="module"></script>

<custom-father></custom-father>

Logs

No response

System Info

System:
    OS: macOS 13.2.1
    CPU: (10) arm64 Apple M1 Pro
    Memory: 1.92 GB / 32.00 GB
    Shell: 5.8.1 - /bin/zsh
  Binaries:
    Node: 16.14.0 - ~/Library/Caches/fnm_multishells/40777_1677073615873/bin/node
    Yarn: 1.22.17 - ~/Library/Caches/fnm_multishells/40777_1677073615873/bin/yarn
    npm: 8.3.1 - ~/Library/Caches/fnm_multishells/40777_1677073615873/bin/npm
  Browsers:
    Chrome: 110.0.5481.100
    Firefox: 108.0.2
    Firefox Developer Edition: 109.0
    Safari: 16.3
  npmPackages:
    @sveltejs/vite-plugin-svelte: ^2.0.2 => 2.0.2
    svelte: ^3.55.1 => 3.55.1
    vite: ^4.1.1 => 4.1.1

[dominikg]

Your project contains inline config for vite-plugin-svelte and config in svelte.config.js.

Please remove the inline config and configure svelte in svelte.config.js only. Also please don't use emitCss: true and compilerOptions.css=true at the same time.

For custom elements you probably want to use emitCss: false as otherwise you would have to somehow load the externalized/emitted css into the web component.

and last but not least i am not sure that nesting svelte built web components is supposed to work the way you put in your reproduction. https://github.com/hood/svelte-vite-webcomponents-issue-repro/blob/8d28147320f68653e7017f8b08d4ca9498a268f6/src/demo/Father.svelte#L14 would have to be rewritten to <custom-child1> tags somehow.

Do you have a project where this setup works, eg with rollup-plugin-svelte?

[hood]

Do you have a project where this setup works, eg with rollup-plugin-svelte?

No, I'm currently experimenting with Svelte for WebComponents, so I don't have any term of comparison.

and last but not least i am not sure that nesting svelte built web components is supposed to work the way you put in your reproduction. https://github.com/hood/svelte-vite-webcomponents-issue-repro/blob/8d28147320f68653e7017f8b08d4ca9498a268f6/src/demo/Father.svelte#L14 would have to be rewritten to <custom-child1> tags somehow.

But at this point I have to serialize/deserialize props manually, right?

[dominikg]

in this case please ask for help on https://svelte.dev/chat

this issue tracker is for reproducible bugs in vite-plugin-svelte.

how to properly nest svelte compiled web components is out of scope here. If the svelte compiler is supposed to handle it but doesn't, a bug should be filed in the svelte repo. But i don't think it's supposed to. This can be clarified in the chat.

In general I'd not advise to use svelte for significant wc frameworks. simple oneoffs maybe. For more conplex stuff there are better options