Custom elements without tags

[Rich-Harris]

This can be done as a non-breaking change post v3, but I wonder if it should be possible to compile a custom element without a tag — i.e. it doesn't add the

customElements.define(tag, constructor);

line automatically, but instead leaves it up to the consumer.

[PaulMaly]

Actually, this is exactly one of my main concerns about CEs in Svelte. Because of global nature of CEs it would be very hard to ship ready-to-use custom element written on Svelte to end developers.

[Conduitry]

Sort of related: #1884

[GeorgeTailor]

From my perspective I would expect compiler to throw an error when it generates customElements.define(tag, constructor); with the same tag more than once. For bigger projects it would definitely increase compile time 'safety' of a project.
As for the tagless components, maybe it would make sense to require either something like <svelte:options tagless=true></svelte:options> or <svelte:options tag="my-tag"></svelte:options> to explicitly say how this CE is registered.

[Rich-Harris]

<svelte:options tag={null}>?

[Conduitry]

I think <svelte:options tag={null}/> makes sense. This will probably require a little bit of a refactor because I think component.tag is used elsewhere (in various error messages I believe?), but it does make sense to use the same option for this instead of an orthogonal one, when it's really not an orthogonal problem.

I guess one thing I'm not completely clear on is whether we'd want to require tag={null} to be explicitly stated. (If neither the component nor the compiler options specify anything about a tag name, should that be an error? or just a custom component with no component registration call?) And how does <svelte:options tag={null}/> interact if there's also a tag compiler option passed?

[Rich-Harris]

My thinking was that customElement: true with no tag option specified results in a tagless CE but a warning, along the lines of

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}/>

[Conduitry]

👍 I like it.

[marlonmleite]

@Rich-Harris @Conduitry I have several internal components, but only 1 component is a Custom Element and export only this.

When run my svelte app I get the warning, but I have one question:
In my scenario it's ok pass null in tag for all inner components? or can i have side effects because of this?