Cannot use custom element correctly with sveltekit

[winston0410]

Describe the bug

I got this error, when I set the following compiler options:

const config = {
	compilerOptions: {
		customElement: true
	},
	preprocess: preprocess(),

	kit: {
		adapter: adapter()
	}
};

The received error:

.svelte-kit/generated/root.svelte:1:0 No custom element 'tag' option was specified. To automatically register a custom element, specify a name with a hyphen in it, e.g. <svelte:options tag="my-thing"/>. To hide this warning, use <svelte:options tag={null}/>

.svelte-kit/runtime/components/layout.svelte:1:0 No custom element 'tag' option was specified. To automatically register a custom element, specify a name with a hyphen in it, e.g. <svelte:options tag="my-thing"/>. To hide this warning, use <svelte:options tag={null}/>

Reproduction

git clone https://github.com/winston0410/sveltekit-custom-element
cd ./sveltekit-custom-element
npm i
npm run dev

Logs

No response

System Info

System:
    OS: macOS 11.4
    CPU: (8) arm64 Apple M1
    Memory: 106.36 MB / 8.00 GB
    Shell: 5.8 - /bin/zsh
  Binaries:
    Node: 17.8.0 - /opt/homebrew/bin/node
    Yarn: 1.22.17 - /opt/homebrew/bin/yarn
    npm: 8.5.5 - /opt/homebrew/bin/npm
  Browsers:
    Brave Browser: 99.1.36.119
    Safari: 14.1.1
  npmPackages:
    @sveltejs/adapter-auto: next => 1.0.0-next.34 
    @sveltejs/kit: next => 1.0.0-next.304 
    svelte: ^3.44.0 => 3.46.6

Severity

blocking all usage of SvelteKit

Additional Information

No response

[cc-ww]

Is there another way to aviod this to build a library?

[dominikg]

I don't think we can support defining pages as webcomponents (see original reproduction adding it to src/routes/index.svelte which is the equivalent of +page.svelte today)

But it is possible to compile some .svelte files as web-components with vite-plugin-svelte's dynamicCompileOptions, see this comment sveltejs/vite-plugin-svelte#270 (comment)

You'd still have to solve registering them once if you want to use them in your own sveltekit application and HMR won't work.
Packaging them as an npm package for consumption in other apps should work too.

[cc-ww]

thank you , i am sorry to occupy up your time! I am fresh to svelte. Can this support to build a library to be used in angular ,vue or react. hope to have a demo about this :)

[cc-ww]

@dominikg thank you for the demo. It works for me.