iiinova — where your digital self keeps evolving

Danny Engelman 🌷🏍️🛥️ @engelman.nl · 22/09/2026

I love it that the Chrome browser now automatically creates relevant Favicons for these one-page-tools, helps identifying them in my browser with 21 open Tabs.

010

Danny Engelman 🌷🏍️🛥️ @engelman.nl · 22/09/2026

> the only trade is slightly longer selectors Depends, In my course code the selectors (for CSS on Undefined Custom Elements) are shorter. AND the HTML is shorter and better readable. no more searching for that </closing DIV>

010

Danny Engelman 🌷🏍️🛥️ @engelman.nl · 15/09/2026

FYI In Chrome 152 there is a custom-element pill available in DEV-tools Elements If it is a *defined* Custom Element/Web Component a click takes you to the JavaScript source code For a *undefined* Custom Element the pill is still displayed but nothing happens FireFox did this since 2018 Safari?

110

Danny Engelman 🌷🏍️🛥️ @engelman.nl · 15/09/2026

You’re right. UNDEFINED might be better. UNDEFINED Custom Elements are UNDERestimated. Time they got PROPER attention!

000

Danny Engelman 🌷🏍️🛥️ @engelman.nl · 08/09/2026

> start calling them "custom elements" all the time. That's is like calling everyone Joe. * shadowDOM attached to a <div> is *not* using Custom Elements * Customized Built-In Elements are *not* Custom Elements Only tags with a hyphen *are* Custom Elements (even without using JavaScript)

100

Danny Engelman 🌷🏍️🛥️ @engelman.nl · 04/09/2026

I did a 100% free source <event-count> many moons ago event-count.github.io but with 1346 Gzipped Bytes this 100% native Web Component isn't as fancy as your 6486 Gzipped Bytes (AI generated?) version ... or is it? PS. How can you claim "No deps", when it requires Web Awesome?

100

Danny Engelman 🌷🏍️🛥️ @engelman.nl · 03/09/2026

SI correct notation: kb means kilo bits, kB means kilo Bytes Maybe a good thing this company nvidia isn't doing anything serious with calculated values.

000

Danny Engelman 🌷🏍️🛥️ @engelman.nl · 01/09/2026

Many native Elements are Web Components with shadowDOM Here is the "closed" <video> DOM in Chromium and FireFox I presume the "closed" option for us mortal developers is a relic of these earlier developments Hardly serves a purpose if you can download the source and just do a replace to "open"

100

Danny Engelman 🌷🏍️🛥️ @engelman.nl · 28/08/2026

Different implementation in FireFox. enable: Show Browser shadow DOM in F12 > F1 settings

010

Danny Engelman 🌷🏍️🛥️ @engelman.nl · 28/08/2026

<video> is built with Web Components technology many moons before the technology was made available to us mortal developers. It has shadowDOM and HTML content us mortals can not access, like a mode:"closed" Web Component. Take a peek inside and you will see each vendor implemented it different.

110

Danny Engelman 🌷🏍️🛥️ @engelman.nl · 21/08/2026

to play is always good! Maybe someone could create a Web Components Playground and give it cool URL like web.components.quest

020

Danny Engelman 🌷🏍️🛥️ @engelman.nl · 21/08/2026

> :defined to match any defined custom or builtin element > not HTMLUnknownElements which are effective *not* defined That is a no go, since the web is/must be backward compatible thus current behavior stays An HTMLUnknownElement is defined as any "native" builtin element:

100

Danny Engelman 🌷🏍️🛥️ @engelman.nl · 20/08/2026

You wrote: 𝘞𝘩𝘦𝘯 𝘺𝘰𝘶 𝘱𝘶𝘵 <𝘶𝘪-𝘤𝘢𝘳𝘥> 𝘰𝘯 𝘵𝘩𝘦 𝘱𝘢𝘨𝘦, 𝘪𝘵’𝘴 𝘢𝘯 𝘏𝘛𝘔𝘓𝘜𝘯𝘬𝘯𝘰𝘸𝘯𝘌𝘭𝘦𝘮𝘦𝘯𝘵 No, Dave, it is not log the prototype chain See JSFiddle: jsfiddle.net/WebComponent... Not a major difference, but (like DSD) a UNDEFINED <ui-card> *IS* a HTMLelement screenshot from my blog/JSFiddle: dev.to/dannyengelma...

110

Danny Engelman 🌷🏍️🛥️ @engelman.nl · 15/08/2026

Yes, its a Custom Element Almost everything you write between < > extends from HTMLElement Some are UNdefined Custom Element and *can/but don't have to* be upgraded with the Custom Elements JavaScript API to a Defined Custom Element (Autonomous Element) The term Web Component applies to more

200

Danny Engelman 🌷🏍️🛥️ @engelman.nl · 11/08/2026

Also note that one line from MDN: I always *assumed* this applies to ::part too

000

Danny Engelman 🌷🏍️🛥️ @engelman.nl · 04/08/2026

Customized Built-In Elements / Web Components like <img is="playing-card"> is a more known one, they work in Chromium and FireFox but Apple (rightly so) refused to implement them

000

Danny Engelman 🌷🏍️🛥️ @engelman.nl · 04/08/2026

It does NOT mean the feature is NOT implemented adoptedStylesheets has been available since Safari 16.4 (2023) Features that won't work in a browser will be all red host-context() was a Google only party The web is all about backward compatibility, so features will rarely be removed from Chromium

200

Danny Engelman 🌷🏍️🛥️ @engelman.nl · 04/08/2026

My MDN says Safari supports it for over 3 years now...

110

Danny Engelman 🌷🏍️🛥️ @engelman.nl · 04/08/2026

Animation and events can all be done with one SVG Wrap it in a Web Component to create the SVG dynamically

000

Danny Engelman 🌷🏍️🛥️ @engelman.nl · 04/08/2026

Paint the complete picture, its every browser except Internet Explorer

111

Danny Engelman 🌷🏍️🛥️ @engelman.nl · 03/08/2026

And the fun part about Web Components is they are used in *almost every* web page, every "complex" HTML tag has shadowDOM

010

Danny Engelman 🌷🏍️🛥️ @engelman.nl · 05/07/2026

Without calling the Custom Elements JavaScript API any <tag-name> (with a hyphen!) becomes a valid HTMLElement (aka UNdefined Custom Element), not HTMLUnknownElement as many blogs and even AI claim. A Declarative ShadowDOM (DSD) with <template shadowrootmode="open"> IS a UNdefined Custom Element

021

Danny Engelman 🌷🏍️🛥️ @engelman.nl · 05/07/2026

Don't write your own, make it your own

100

Danny Engelman 🌷🏍️🛥️ @engelman.nl · 29/06/2026

FYI, everyone uses Web Components Complex elements like <textarea> and <select> are built wtih Web Component technology for many moons now. Screenshot is the <input> internals in FireFox (us Web Dev mortals can't access) Userland Web Components came later, Chrome 2016, Safari 2017, FireFox 2018

351

Danny Engelman 🌷🏍️🛥️ @engelman.nl · 18/06/2026

Lots of research done 30 years ago in the 90s Modern AI can present the results:

000

Danny Engelman 🌷🏍️🛥️ @engelman.nl · 12/06/2026

LOL, I just asked Fable-5 to write a blogpost about this; gets it totally wrong:

000

Danny Engelman 🌷🏍️🛥️ @engelman.nl · 04/06/2026

I very briefly experimented with jsfiddle.net/WebComponent... The FIRST Web Component connectedCallback executes the connectedCallback of the LAST named component. But it is tight coupling, the FIRST Component can't be virgin, it needs to know HOW to call later components. Thus I couldn't use it

010

Danny Engelman 🌷🏍️🛥️ @engelman.nl · 27/05/2026

𝘶𝘴𝘪𝘯𝘨 𝘵𝘩𝘪𝘴 𝘴𝘺𝘯𝘵𝘢𝘹 𝘸𝘪𝘵𝘩𝘰𝘶𝘵 𝘦𝘷𝘦𝘳 𝘪𝘯𝘵𝘦𝘯𝘥𝘪𝘯𝘨 𝘵𝘰 𝘳𝘦𝘨𝘪𝘴𝘵𝘦𝘳 𝘤𝘳𝘦𝘢𝘵𝘦𝘴 𝘢 𝘧𝘢𝘭𝘴𝘦 𝘴𝘪𝘨𝘯𝘢𝘭, 𝘳𝘦𝘢𝘥𝘦𝘳𝘴 𝘢𝘯𝘥 𝘵𝘰𝘰𝘭𝘴 𝘦𝘹𝘱𝘦𝘤𝘵 𝘢 𝘥𝘦𝘧𝘪𝘯𝘪𝘵𝘪𝘰𝘯 𝘵𝘰 𝘦𝘹𝘪𝘴𝘵 𝘰𝘳 𝘢𝘳𝘳𝘪𝘷𝘦 𝘭𝘢𝘵𝘦𝘳 No, devs were JS happy and never learned from the spec. It was never blogged about, thus AI gets it wrong too. Undefined and Unknown Elements are valid to use.

100

Danny Engelman 🌷🏍️🛥️ @engelman.nl · 27/05/2026

No, blogs, and thus AI, are wrong. ANY <tag-name> with a hyphen IS a HTMLElement, Not HTMLUnknownElement

100

Danny Engelman 🌷🏍️🛥️ @engelman.nl · 26/05/2026

Naming is hard I teach there are UNDefined and Defined Custom Elements I didn't include shadowDOM because it can be set on Native and Custom Elements But not on Unknown Elements DSD-Declarative ShadowDOM IS a UNDefined Custom Element I call a Native Element + shadowDOM a Web Component too

020

Danny Engelman 🌷🏍️🛥️ @engelman.nl · 23/05/2026

What more and more developers confronted with AI have to deal with, feels similar to trauma/PTSD. (I’ve been sectioned multiple times in my life, so I don’t use that comparison lightly) And then (maybe) use AI for (some) guidance: chatgpt.com/s/t_6a1178a0...

000

Danny Engelman 🌷🏍️🛥️ @engelman.nl · 14/05/2026

Now leave off the ::part part and remove the fill="currentcolor"

000

Danny Engelman 🌷🏍️🛥️ @engelman.nl · 08/05/2026

I only do native Web Components, The Inline HTML VSCode extension provides syntax highlighting, with the /*css*/ prefix marketplace.visualstudio.com/items?itemNa... (there are more extension) I purposely use verbose CSS code; it minimises the file size and allows me to opt out individual rules

120

Danny Engelman 🌷🏍️🛥️ @engelman.nl · 06/05/2026

semantics, maybe you say "design application using Web Components" I read: "only use IKEA furniture in my home" Just Replacing Native tags <b>,<header>, <nav> etc. with Web Components is not the right approach, IMHO UNdefined Custom Elements (set display property!) *can* replace the DIV soup

110

Danny Engelman 🌷🏍️🛥️ @engelman.nl · 04/05/2026

BTW, you can start with Web Components/Custom Elements without using JavaScript at all. Any <tag-name> (with a hyphen) IS a UNdefined Custom Element and *valid* HTMLElement, you can layout and style with CSS (remember to set the display property) Let's get rid of the DIV-soup! Works in React too..

000

Danny Engelman 🌷🏍️🛥️ @engelman.nl · 01/05/2026

When I learned programming you prayed the bugs would be printed in next months SoftSide, or fixed them yourself, by trial and error. Programming shifted to directing outcomes with AI. The role is no longer fixing and finding, but guiding, evaluating, and refining solutions. That is the hardest part.

Developing with AI, The Architect, Builder & Restorer in me

000

Danny Engelman 🌷🏍️🛥️ @engelman.nl · 25/04/2026

ChatGPT 5.5 is the first AI to decypher the 8 letter word. Older versions could never "think" outside of the box and kept "thinking" chessboard only. ChatGPT 5.5 (extra high setting) now "sees" the pixels, still took SEVEN minutes! What is the 8 letter word? Humans can solve this in minutes

000

Danny Engelman 🌷🏍️🛥️ @engelman.nl · 24/04/2026

Youtubers half my age try to sell me courses how to Analyse for and Design AI systems Should I tell them they do not have to create their own stories or slides?? The implementation Technology has changed, the core SA/SD process hardly has, since my first Computer Science class 40 years ago

System Analysis and System Design books: People half my age are trying to sell me courses how to
(System) Analyse for and Design AI systems

Should I tell them they do not have to write their own stories or slides?

The implementation technology has changed,
the SA/SD process has not
since my first Computer Science class 40 years ago.

120

Danny Engelman 🌷🏍️🛥️ @engelman.nl · 16/04/2026

I am building a Web Components course This is lesson #1 𝙀𝙡𝙚𝙢𝙚𝙣𝙩𝙖𝙧𝙮 𝙒𝙚𝙗 𝘾𝙤𝙢𝙥𝙤𝙣𝙚𝙣𝙩𝙨 𝙆𝙣𝙤𝙬𝙡𝙚𝙙𝙜𝙚 𝙛𝙧𝙤𝙢 𝙮𝙤𝙪𝙧 𝘿𝙚𝙫 𝘾𝙤𝙣𝙨𝙤𝙡𝙚 𝘥𝘰𝘤𝘶𝘮𝘦𝘯𝘵.𝘣𝘰𝘥𝘺.𝘪𝘯𝘯𝘦𝘳𝘏𝘛𝘔𝘓 = "<𝘮𝘺-𝘦𝘭𝘦𝘮𝘦𝘯𝘵/><𝘢𝘯𝘰𝘵𝘩𝘦𝘳𝘦𝘭𝘦𝘮𝘦𝘯𝘵/>"; $("𝘮𝘺-𝘦𝘭𝘦𝘮𝘦𝘯𝘵").𝘤𝘰𝘯𝘴𝘵𝘳𝘶𝘤𝘵𝘰𝘳.𝘯𝘢𝘮𝘦 $("𝘢𝘯𝘰𝘵𝘩𝘦𝘳𝘦𝘭𝘦𝘮𝘦𝘯𝘵").𝘤𝘰𝘯𝘴𝘵𝘳𝘶𝘤𝘵𝘰𝘳.𝘯𝘢𝘮𝘦 #nojavascript #webcomponents #nomoredivsoup

Elementary Web Component Knowledge from yor Dev Console:

(without JavaScript) ANY <tag-name> IS an HTMLElement

UNdefined Custom Elements are great for layout and styling

Lesson #1 from WCQ - A Web Components Course

260

Danny Engelman 🌷🏍️🛥️ @engelman.nl · 16/04/2026

I showed them HyperLinks, they said it had no Images Showed them Images, ... couldn't be styled ... CSS, ... wasn't interactive JavaScript ... different in all browsers jQuery wasn't native code Web Components; Apple doesn't support Customized BuiltIns and now they complain about LLMs

010

Danny Engelman 🌷🏍️🛥️ @engelman.nl · 09/04/2026

Web Components are nothing but fancy HTMLElements, No Framework, No build step, No sugar. Alas every Tom, Dick and Harriet skipped the UNDEFINED phase (no blogs about it), said the whole proces was just too low-level and dumped tools like Lit (and its 70+ alternatives) on NPM... framing DEVs

100

Danny Engelman 🌷🏍️🛥️ @engelman.nl · 08/04/2026

My biggest gripe is it discards UNdefined Custom Elements can be used in the page unless your mdn- prefix is the marker for DEFINED Custom Elements TO BE see dashed-html.github.io Every blog and course dives straight into JavaScript code, a pity because there is value in UNdefined Custom Elements

010

Danny Engelman 🌷🏍️🛥️ @engelman.nl · 25/03/2026

You are one of those Flemish who refuses to speak french?

100