Comment by dannye

<tag-name>

Browsers create ANY tag with at least one dash as a *Custom Element*

They come in TWO flavours, and since they ARE HTMLElement, can be used for layout AND styling with CSS.

The official names are:

► UNdefined Custom Elements (the article calls these "CSS Web Components")

  - shadowDOM optional with Declarative ShadowDOM

► Defined Custom Elements - Defined with the JavaScript Custom Elements API

  - shadowDOM optional
  - A new Element, or an UPGRADED existing UNdefined Custom Element

---

### Good to know about UNDEFINED Custom Elements:

* Absolutely NO JavaScript required, it is only HTML and CSS

* This is STANDARD behaviour in all browsers for nearly a DECADE now: Chrome (2016) Safari (2017) FireFox (2018)

* 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

* Custom Elements do not inherit the standard [hidden] behaviour; so you have to add that behaviour yourself in your stylesheet.

* Same for DIVs display:block. You have to set the display property on these Custom Elements yourself. (You will forget this 20 times, then you never make the mistake again)

* The :defined pseudo selector targets standard HTML tags and JavaScript defined Custom Elements

* Thus :not(:defined) targets the UNdefined Custom Elements; again... they are still valid HTMLElement so CSS applies like any element

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

* Declarative ShadowDOM <template shadowrootmode="open"> creates the same UNdefined Custom Elements WITH a shadowDOM

* The Custom Elements JavaScript API upgrades UNdefined Custom Elements TO defined Custom Elements.

* You can't UNdefine defined Custom Elements

* You can't REMOVE a set shadowRoot

* for now, only Safari supports multiple custom element registries (duplicating Custom Element names)

----

Why?

► Try to find that closing </div> in a long HTML page. </tag-name> is always just there.

► Built a UI that doesn't FOUC, and UPGRADE it lazy-loaded with more logic and interactivity... you can not do this with technologies that CREATE HTML AFTER DOM was parsed.

Custom Elements/Web Components ARE HTML; Frameworks CREATE HTML

We will forever call Custom Elements: Web Components, and vice versa...