Repository: svelte
Issue: Unable to get "slots" and "extend" working with Custom Element API
Labels: bug,custom element

### Describe the bug

Hello,

I am having difficulties getting the slot feature working for Svelte Components that are compiled as Custom Elements.  When I compile the component into a custom element and use it as follows

```html
<head>
  <script src="./counter-component-wc.js"></script>
</head>

<body>
  <counter-component>
    <p slot="middle">blue world</p>
  </counter-component/>
</body>
```

I expected "blue world" to replace the default slot content of `<counter-component>`. However, the default slot content (i.e. `<span>This is the default slot </span>` still gets rendered:

![image](https://github.com/sveltejs/svelte/assets/57124305/dfe8d8d1-1ebf-4e91-95b3-8996071c9c2e)

In addition, I can't seem to get the `extend` keyword to work with the Custom Element API:

```svelte
<svelte:options
  customElement={{
    tag: 'counter-component',
    extend: (customElementConstructor) => {
      return class extends customElementConstructor {
        constructor() {
          super();
          console.log('hello world')
        }
      };
    }
  }},
/>
```

Specifically, I extended the customElementConstructor with a class that simply prints "hello world" in its constructor body. However, "hello world" doesn't show up in the console whenever the custom element `<counter-component>` is mounted on the web page.

Check out the reproduction instructions below for details. The bottom of the instructions includes a .zip of the repository that you can use as well if it's more convenient.

Am I doing something wrong, or is this a bug?

Thanks for your time!

### Reproduction

```bash
# Create a new project. Specify "SvelteKit demo app", "Typescript", and "Prettier" when prompted.
npm create svelte@latest my-app 
cd my-app
npm install

npm install \
  @rollup/plugin-commonjs \
  @rollup/plugin-node-resolve \
  @rollup/plugin-replace \
  @rollup/plugin-typescript \
  rollup-plugin-css-only \
  rollup-plugin-scss \
  rollup-plugin-svelte
```

In the included `src/routes/Counter.svelte`, insert a `<svelte:options>` element to mark the component as a custom element with a custom element constructor that simply prints "hello world". In addition, add an arbitrary `<slot>` element in the component's template:

```svelte
<!-- src/routes/Counter.svelte -->

<svelte:options
  customElement={{
    tag: 'counter-component',
    extend: (customElementConstructor) => {
      return class extends customElementConstructor {
        constructor() {
          super();
          console.log('hello world')
        }
      };
    }
  }},
/>

...
...

<div class="counter">

  <slot name="header">
    <span>This is the default slot</span>
  </slot>

  ...
  ...
</div>
```

Create a file called `counter-component-wc.ts` in the `src/` directory that imports the .svelte file that we want to compile into a custom element:

```typescript
// src/counter-component-wc.ts

import Counter from './routes/Counter.svelte';
```

Create a rollup.config.js file in the root of the repository, which is used to compile `counter-component-wc.ts` into a standalone `counter-component-wc.js` file:

```javascript
// rollup.config.js 

import resolve from '@rollup/plugin-node-resolve';
import svelte from 'rollup-plugin-svelte';
import scss from 'rollup-plugin-scss'
import typescript from '@rollup/plugin-typescript';
import commonjs from '@rollup/plugin-commonjs';
import sveltePreprocess from 'svelte-preprocess';

export default {
  input: 'src/counter-component-wc.ts',
  output: {
    file: 'public/counter-component-wc.js',
    format: 'iife',
    name: 'app',
  },
  plugins: [
    resolve({
      // Allow browser-specific functionality like onMount() to be 
      // included in bundle.
      browser: true
    }),
    commonjs(),
    scss(),
    typescript(),
    svelte({
      preprocess: sveltePreprocess({scss: true}),
      compilerOptions: {customElement: true}
    }),
  ]
};
```

Run `npx rollup -c rollup.config.js`. `counter-component-wc.js`  should be generated in the `public/` directory.

Afterwards, create a simple index.html file that uses the custom element that we just compiled. The `<counter-component>` has an arbitrary `<p>` nested with a `slot="header"` attribute.

```html
<!--  public/index.html -->

<!doctype html>
<html>
<head>
  <title>Web Component Sandbox</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <script src="./counter-component-wc.js"></script>
</head>
<body>
  <h1>Hello World. This is a Web Component Demo.</h1>
  <br/>
  <counter-component>
    <p slot="header">blue world</p>
  </counter-component/>
</body>
</html>
```

Then open public/index.html in your browser.

I also have a .zip of the repository with the above edits. Extract the zip, run `npm install`, `npx rollup -c rollup.config.js`, and then open `public/index.html` in your browser.

[my-app.zip](https://github.com/sveltejs/svelte/files/12089372/my-app.zip)



### Logs

_No response_

### System Info

```shell
System:
    OS: Windows 10 10.0.19045
    CPU: (8) x64 Intel(R) Core(TM) i7-7700K CPU @ 4.20GHz
    Memory: 5.91 GB / 15.96 GB
  Binaries:
    Node: 16.17.1 - C:\Program Files\nodejs\node.EXE
    npm: 8.15.0 - C:\Program Files\nodejs\npm.CMD
    pnpm: 8.6.6 - ~\AppData\Local\pnpm\pnpm.EXE
  Browsers:
    Edge: Spartan (44.19041.1266.0), Chromium (114.0.1823.82)
    Internet Explorer: 11.0.19041.1566
  npmPackages:
    svelte: ^4.0.5 => 4.0.5
```


### Severity

annoyance