Allow Custom Elements to be self-closing.

[thebjorn]

Describe the problem

Almost everyone was surprised about the real semantics of <div/>, this issue is not about that ;-)

Custom Elements/Web Components always have a dash/hypen in the tag name (<my-element...> / ` / etc.)

The ergonomics of

<fa-icon name="key"/>

is just much better than

<fa-icon name="key"> </fa-icon>

and the semantics are very clear as well ...oh, and the last version has a subtle issue that is hard for end-users to find.

WaltzingPenguin describes it well: https://github.com/WICG/webcomponents/issues/624#issuecomment-823032851

Not being able to make custom elements self closing starts to introduce some serious room for error when dealing with slots.

This renders the default content of the slot: <my-element></my-element>

This renders the slot as empty (replaced with whitespace): <my-element> </my-element>

The difference between the two is easy to miss and is problematic, especially when distributing components to outside users. <my-element /> would be much clearer.

I'll further argue by appealing to the authority of uncle Timmy (Tim Peters) in the Zen of Python (python -c "import this")

• Readability counts.
• Special cases aren't special enough to break the rules.
• Although practicality beats purity.

;-)

Describe the proposed solution

What would I like to happen? That self-closing web-component tags, e.g. <fa-icon name="key"/> do the sensible and expected thing, i.e. magically insert the closing tag and not issue a warning.

I'm explicitly not asking for self-closing regular tags (e.g. <div/>), nor for web-component void tags (i.e. <fa-icon name="key"> - without the slash).

The reason this has not been done in the spec is mainly implementor resistance (which I understand well, I lived through the xhtml era), not that it isn't the right thing to do.

Importance

nice to have

[CaptainCodeman]

AFAIK custom elements can't be made void or self-closing, so I think it's better if they behaved consistently and required the closing tag.

[thebjorn]

@CaptainCodeman did you read the linked issue on the Web Incubator Community Group? (https://github.com/WICG/webcomponents/issues/624)

There is an overwhelming support for self-closing web component tags from the community (with regular xml semantics), and an equally overwhelming reluctance to change parser semantics from the browser makers. Based on the history of parser evolution I fully understand the browser makers, however, .svelte files are not legal html and as such have opportunities for improving DX that the browser makers do not have.

Legal html would still be paste-able into .svelte files (and legal svelte have never been paste-able into .html files. This issue would not change that.

Svelte components must be imported and can be self-closing, this would only extend that to Web Components, thus making the syntax more consistent.

[dummdidumm]

It's better to be consistent here. Either we could've kept it as before and allow self-closing for all elements (we changed that), or we warn on all to align with the spec. Having a weird middle ground would confuse both sides. Therefore closing.