| <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... |