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
Top comments (4)
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 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.
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 INERTThe string becomes an instance inside a
<div>because a<div>is NOT inert, the DOMparser kicks inThis is standard behavior since 2015
This isn't the only case where this happens though: you can have a an
x-fooin your document and load the custom element in a module; an inline script will see the node as just aHTMLElementinstance, 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
instanceofcan return different values for the same object at all, which is not a web thing; it's simply a javascript thing.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.