DEV Community

Discussion on: How Declarative Custom Elements (DCE) Could Improve Web Components

Collapse
 
dannyengelman profile image
Danny Engelman • Edited

Custom Elements - three flavours

Every browser vendor (Google since 2016, Apple since 2017 and Mozilla since 2018)
processes EVERY <tag-name> (with a dash) as VALID HTMLElement without using JavaScript!

So, for nearly a decade now, Custom Elements come in 2 flavours:

  • UNdefined Custom Elements : <tag-name>
    hardly blogged about, even AI wrongly calls them unknown elements, they are not!
    They pass every HTML Validator because they extend from HTMLElement not HTMLUnknownElement like <tagname> (no dash!)

  • Defined Custom Elements : <tag-name>
    upgraded/defined with JavaScript, what the whole world thinks Custom Elements are, since every Web Components explanation dives straight into the JavaScript code.

| No one ever wrote acronyms for these 2 flavours. UCE and DCE?

UNdefined Custom Elements are great for layout and styling. Just remember to set the CSS display property. That means every DIV or SPAN can be replaced with a meaningful <tag-name>.
Yes! you could have done so for nearly a decade now...

"Declarative"

DSD - Declarative ShadowDOM (baseline: feb'24) IS a UNdefined Custom Element.
Easily proven with a *:not(:defined){ display:none } in your HTML page; it will hide all DSDs
Some gurus use this CSS selector to fight FOUCs.... but then all UCE in the page are forever hidden.

Technically speaking UNdefined Custom Elements are Declarative, so maybe the acronym DUNCE (Declarative UNdefined Custom Elements) might be a better one to distinguish them from the (to be implemented) DCE

The DCE you describe has been used as acronym in conversation for many moons now, so the acronym will stick.
Kinda like we call Web Components Custom Elements and vice-versa.

3 types of Custom Elements

That would give us three Custom Element flavours:

  1. DUNCE - Declarative UNdefined Custom Elements
  2. DCE - Declarative Custom Elements (not implemented by browser vendors yet)
  3. Defined Custom Elements (now needs a catchy acronym)

That will also allow the phrase to be used:

"dunce! you don't know DUNCE!"