Rich Harris Web Component Identity Crisis

Rich Harris (Svelte) is really giving Web Components some attention now.

His latest crusade against Web Components is basically a rant against the standard behavior of the <template> tag (available since 2015, yes 15)

https://x.com/Rich_Harris/status/1844134732306792631

And when people try to explain to him this just is what the <template> does, he continues:

---

Use the standard any way you want

Like it or not this <template> has been around since 2015, and will be around for a long time.

I say, learn what it does, and doesn't, and use what is useful to you

I extended Rich his complaint into a playground to play with.

Here are two examples using both a <template> and a regular <div>

The whole point of a <template> is to be different, as it was for the past 9 years

If you don't want its behavior, use a <div>

Note how this blogpost was not about Custom Elements or shadowDOM

PS: @rich, calm down, this is not good for your health

---

---

Comments

[𒎏Wii 🏳️‍⚧️]

To some limited extend I agree that this behaviour is very weird. At least when viewed through the lens of traditional object orientation. But alas, JavaScript is not an object-oriented language:

And with that context, the current behaviour is definitely better than the alternatives. Basically, the options are:

• The element changes its prototype during its lifetime
• The element gets replaced; any old reference points to the wrong element now
• Custom Elements have to be defined by the time their tags are parsed

The second option seems marginally better in theory, but would cause way more weird bugs for developers.

The second option would make custom elements basically unusable.

In terms of sanity, this design choice still seems miles ahead of svelte, considering some of the weird quirks that framework has.

[Danny Engelman]

Rich Harris wants the <rich-harris> string inside an inert <template> to become an INSTANCE...

it is not an instance... it is just a string... because... a <template> IS INERT

The string becomes an instance inside a <div> because a <div> is NOT inert, the DOMparser kicks in

This is standard behavior since 2015

[𒎏Wii 🏳️‍⚧️]

This isn't the only case where this happens though: you can have a an x-foo in your document and load the custom element in a module; an inline script will see the node as just a HTMLElement instance, even though it is not in a template.

The problem really isn't <template>s, it's that you simply cannot guarantee the corresponding custom element will be installed by the time your HTML tag gets parsed. Templates simply make use of this mechanism that already exists to ensure templates are inert until the moment they're actually inserted into the DOM for real.

---

He also made it very clear that his problem is with the fact that instanceof can return different values for the same object at all, which is not a web thing; it's simply a javascript thing.

[Alex]

It was hype about microfrontends, now it's hype about monorepos, was hype about css-in-js, now tailwind, frameworks against web components goes into the same pile.
Maybe common sense will be in demand some day.