Web Components without JavaScript?!

You can replace all <div></div>

with <tag-name></tag-name>

---

(since 2018) ANY tagname with a dash is a valid HTMLElement

Let me repeat that for clarity:

👉 ANY 🤯 tagname with a dash is a valid HTMLElement

NOT HTMLUnknownElement as some claim

---

That means you can replace EVERY <div> with valid HTML

Then this DIV-soup:

Becomes valid HTML:

---

🧠 Good to know

✅ Absolutely NO JavaScript required, its only HTML and CSS

✅ This is standard behaviour in all browsers since 2020
(When Microsoft Edge switched to the Chromium Engine)
and already in Chrome, Safari, Firefox many moons before 2020

✅ The W3C HTML Validator accepts all <tag-name> Custom Elements with a dash as HTMLElement.
It does not accept <tagname> (no dash), those are HTMLUnknownElement

✅ The UA - UserAgent StyleSheet (Browsers default stylesheet)
defines CSS [hidden] { display:none }.
But Custom Elements do not inherit the default stylesheet;
so you have to add that behaviour yourself in your stylesheet.

✅ <DIV> is display:block only in the UA StyleSheet
You have to set 𝙙𝙞𝙨𝙥𝙡𝙖𝙮: 𝙗𝙡𝙤𝙘𝙠 / 𝙞𝙣𝙡𝙞𝙣𝙚-𝙗𝙡𝙤𝙘𝙠; on these Custom Elements yourself
(You will forget this 20 times, then you never make the mistake again)

✅ The CSS :𝙙𝙚𝙛𝙞𝙣𝙚𝙙 pseudo selector targets standard HTML tags and JavaScript defined Custom Elements

✅ Thus the CSS :𝙣𝙤𝙩(:𝙙𝙚𝙛𝙞𝙣𝙚𝙙) pseudo selector targets the 𝙪𝙣𝙙𝙚𝙛𝙞𝙣𝙚𝙙 Custom Elements; they are still valid HTMLElement, CSS applies like any element

✅ <you-are-not-bound-to-one-dash>

✅ Declarative ShadowDOM:
<template shadowrootmode="open"> creates undefined Custom Elements with a shadowDOM

✅ The Custom Elements API (MDN) requires JavaScript to convert undefined Custom Elements (but valid HTMLElement!) into defined Custom Elements.

---

🎉🎉🎉

No more hunting for that closing </div> tag

</tag-name> is just there!

---

Are they Web Components?

Technologies NOT used:

• <template>
• shadowDOM
• Custom Elements API (create defined elements with JavaScript)

---

🛠 Prove ANY tagname with a dash IS a HTMLElement

for:

        <div></div>
        <tagname></tagname>
        <tag-name></tag-name>
        <tag-name-foo></tag-name-foo>
        <tag-name-bar></tag-name-bar>

---

NO MORE DIV-SOUP!

✅ If you believe AI over a random Dev.to post:

Note: every evergreen browser knows what a Custom Element is, just ask yourself:

(after reading: https://web.dev/articles/declarative-shadow-dom)

• What happens with <tag-name>, and CSS applied, when you omit the <template>?

<tag-name>
  <template shadowrootmode="open">
  </template>
</tag-name>

---

---

---