How to use customElement: true compiler option only on a subset of components

[AllNamesRTaken]

I am aware of the customElement: true compiler option and <svelte:options tag="my-tagname" /> tag.
The problem is that all other components start complaining that they are missing the svelte.options tag.

To workaround this people have used the tactics described here where they basically svelte compile two subsets. I would be fine with a similar approach for sveltekit but can't find any docs on how that should be configured for sveltekit and vite.

Any suggestions or insights into how to mix and match svelte web components and normal svelte components in the same project would be greatly appreciated.

//J

[SarcevicAntonio]

Recently SvelteKit made the vite config avaialbe in SvelteKit projects. The linked instructions for Rollup should apply to Vite with @sveltejs/vite-plugin-svelte as well, not sure if it works, but could be worth a shot.

[dominikg]

You can use dynamicCompileOptions of vite-plugin-svelte

svelte.config.js

function isWebComponentSvelte(code) {
  const svelteOptionsIdx = code.indexOf('<svelte:options ')
  if(svelteOptionsIdx < 0) {
    return false
  }
  const tagOptionIdx = code.indexOf('tag=', svelteOptionsIdx)
  const svelteOptionsEndIdx = code.indexOf('>',svelteOptionsIdx);
  return tagOptionIdx > svelteOptionsIdx && tagOptionIdx < svelteOptionsEndIdx
}
export default {
  vitePlugin:{
    experimental: {
      dynamicCompileOptions({code}) {
        if(isWebComponentSvelte(code)) {
          return {
            customElement: true
          }
        }
      }
    }
  }
}

[willnationsdev]

Just started trying to use customElements after the Svelte 4.0 release. Tried using the solutions that OP referenced to no avail, but then finally found this after nearly 12 hours of unproductive research. Thank you very much for sharing this solution! With it, I was able to manipulate the check to precisely target the appropriate files flawlessly.