This is because when customElement option is on, each style in a component is injected into the shadowRoot of the custom element.

class YourComponent extends SvelteElement {
        constructor(options) {
            super();

            this.shadowRoot.innerHTML = `<style>.foo{color:red;}</style>`;
// continues

Thus, in order to make style appear, you must use svelte component as custom element, not as svelte component.

Your App.svelte should be like below.

<script>
    import Foo from './Foo.svelte'
    import Bar from './Bar.svelte'
</script>
<svelte:options tag="web-component" />

<foo-component/>
<bar-component/>

However, this neither solve the problems related with custom element.

1. :global selector is not transformed into actual global selector.

2. Every nested component will produce shadowRoot, whereas mostly you will want only top-level one.

Check out some issues below from svelte repository related to custom elements.

• nested component in custom element does not inherit style #2605
• :global(...) not working in custom elements #2969

It seems like svelte does not fully support style cascading in custom element yet, should be handled in future.

Checked in svelte v3.12.1.

You just have to prevent the compiler from removing unused CSS

Let's say we have a custom element : App.svelte

App.svelte imports a normal svelte component : ./components/Message.svelte

But when you do this, any styles inside Message.svelte will disappear.

Solution

1. Move all content in the <style> tag of Message.svelte into the <style> tag of App.svelte
2. Add this to script of App.svelte

let cssKeep: string = "";

3. Add this to body of App.svelte

<span style="display: none;" class={cssKeep}><span class={cssKeep} /> </span>

This will prevent the compiler from removing any styles

Example

src/components/Message.svelte

<script lang="ts">
  export let content: string;
</script>

<p class="red"> {content} </p>

src/App.svelte

<svelte:options tag="my-element" />

<script lang="ts">
  import Message from "./components/Message.svelte";
  let cssKeep: string = "";
</script>

<Message content="hello" />

<span style="display: none;" class={cssKeep}><span class={cssKeep} /> </span>

<style>
  .red {
    color: red;
  }
</style>

vite.config.ts

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

export default defineConfig({
  build: {
    lib: {
      entry: './src/main.ts',
      name: 'MyElement'
    },
  },
  plugins: [
    svelte(
      {
        compilerOptions: {
          css: true,
        },
        exclude: "./src/App.svelte",
        emitCss: true,
      }
    ),
    svelte(
      {
        compilerOptions: {
          customElement: true,
          css: true,
        },
        exclude: "./src/components/**",
        emitCss: true,
      }
    ),
  ],
})


// guide: https://www.thisdot.co/blog/web-components-with-svelte

This may answer:

• How to export web component in Svelte with nested Svelte components
• Use Svelte components with custom elements
• Styles missing when Svelte component imported into custom web component / custom element