shadowDOM is older than React But us mortal Web Component developers couldn't use it till years later 𝙨𝙞𝙣𝙘𝙚 𝙬𝙝𝙚𝙣 𝙙𝙤𝙚𝙨 𝙪𝙨𝙚𝙧-𝙖𝙜𝙚𝙣𝙩 𝙨𝙝𝙖𝙙𝙤𝙬𝙍𝙤𝙤𝙩 𝙚𝙭𝙞𝙨𝙩 𝙞𝙣 𝙩𝙝𝙚 𝙗𝙧𝙤𝙬𝙨𝙚𝙧𝙨? #webcomponents

september 25th 2025, a young man's superintelligent AI system tells him that he must go on a date or face certain suicide from loneliness. It's a tall order for a guy who hasn't left his apartment in 42 days and is more than happy to stay at home with technology. www.youtube.com/watch?v=NZ8G...

What word is spelled? ChatGPT thought for 7 minutes and 17 seconds, and said: 𝙋𝘼𝙒𝙉𝙎𝙏𝘼𝙍 Wrong word, because AI is great at logic, but can't think... What word do you see?

Dear AI, You were trained on blog-posts that do not show the chaining of super in: super().attachShadow({mode:"open"}) That does not make your statement below right. super() DOES return the this scope

AI is trainend on "old" code It has no clue what can be done in modern browsers dashed-html.github.io

... I would pay big bucks for an AI system that removes all "You Know" remarks those Muricans make. That would slash an hour long video in half.

My StackOverflow challenge entry, built with Chessboard Web Components stackoverflow-challenges.github.io/cipher/index... Became the simplest LLM quality tester GPT5:

Am I wrong? I think we all have been using Custom Elements not to its full extend You can use Custom Elements/Web Components? (which extend from HTMLElement) *Without* using any JavaScript! Am I wrong? dev.to/dannyengelma...

Are you defining your UI Web Components *before* DOM is parsed? Or are you fighting FOUCs because you defined your UI Web Components (too) late *after* DOM was parsed (using defer, import module or readystate/DOMContentLoaded)

What color is the Web Component background? ⏹️ Error, super() must come first in the constructor ⏹️ Red, ::part styles parts inside shadowDOM ⏹️ Not Red, ::part in the host container can style parts ⏹️ Not Green, the Web Component is 0 height Multiple answers possible jsfiddle.net/WebComponent...

Had some fun turning a String into an SVG, creating an animated PacMan. The <sprite-meister> Web Component reads a Template Literal String, processes variables AND functions (pulse, ease and rotate) then creats ONE SVG with 24 frames. All client-side. jsfiddle.net/WebComponent... PacMan code:

𝘿𝙤𝙣'𝙩 𝙨𝙝𝙤𝙤𝙩 𝙮𝙤𝙪𝙧𝙨𝙚𝙡𝙛 𝙞𝙣 𝙩𝙝𝙚 𝙛𝙤𝙤𝙩 𝙖𝙣𝙙 𝙗𝙡𝙖𝙢𝙚 𝙩𝙝𝙚 𝙜𝙪𝙣! OP: "𝘸𝘦𝘣 𝘤𝘰𝘮𝘱𝘰𝘯𝘦𝘯𝘵𝘴 𝘪𝘯𝘴𝘵𝘢𝘯𝘵𝘪𝘢𝘵𝘦 𝘪𝘯 𝘵𝘩𝘦 𝘰𝘳𝘥𝘦𝘳 𝘵𝘩𝘦𝘪𝘳 𝘥𝘦𝘧𝘪𝘯𝘦() 𝘮𝘦𝘵𝘩𝘰𝘥𝘴 𝘢𝘳𝘦 𝘤𝘢𝘭𝘭𝘦𝘥 𝘪𝘯 𝘑𝘢𝘷𝘢𝘚𝘤𝘳𝘪𝘱𝘵. 𝘛𝘩𝘦 𝘏𝘛𝘔𝘓 𝘰𝘳𝘥𝘦𝘳 𝘥𝘰𝘦𝘴𝘯’𝘵 𝘮𝘢𝘵𝘵𝘦𝘳" NO! WCs defined *BEFORE* DOM is parsed execute in DOM order WCs defined *AFTER* DOM is parsed execute in define() order

I love semantic HTML

There are THREE types of "Custom Elements" NOT using any Web Components core technology: ❌ Custom Elements API ❌ Templates ❌ shadowDOM then creating a HTML tag, by only typing <𝙩𝙖𝙜-𝙣𝙖𝙢𝙚>...</𝙩𝙖𝙜-𝙣𝙖𝙢𝙚> Have I then created a "Web Component" ⁉️ You tell me... dev.to/dannyengelma... #webcomponents

Since its impossible to edit BlueSky posts, and they are <sent-and-forgotten> posts anyway, I made my post a blogpost. #webcomponents / Web Components 𝙉𝙤𝙩 𝙖 𝘿𝙄𝙑 𝙞𝙣𝙨𝙞𝙙𝙚/𝙞𝙣 𝙨𝙞𝙜𝙝𝙩/𝙨𝙞𝙩𝙚 dev.to/dannyengelma...

Still writing DIV-soup? ANY tagname with a dash becomes a valid HTMLElement, NOT HTMLUnknownElement as some gurus claim. That means you can replace ALL DIVs with semantic HTML. Absolutely NO JavaScript required, only HTML and CSS! Should we call them "Web Components"? You tell me #webcomponents

In which Web Component can you disable shadowDOM with 2 keystrokes? #webcomponents

𝙄𝙩𝙨 35+𝘾 / 95+𝙁 𝙝𝙚𝙧𝙚 𝙞𝙣 𝘼𝙢𝙨𝙩𝙚𝙧𝙙𝙖𝙢 𝙄 𝙖𝙢 𝙤𝙣𝙡𝙮 𝙪𝙨𝙞𝙣𝙜 𝙨𝙝𝙖𝙙𝙤𝙬𝘿𝙊𝙈 𝙩𝙤𝙙𝙖𝙮 😎

Its only slightly more code... which I trained GitHub CoPilot to create, so I am hardly using more keystrokes than a library.

my entry for the StackOverflow "cipher" Challenge is online "𝘞𝘩𝘢𝘵 𝘭𝘦𝘵𝘵𝘦𝘳 𝘪𝘴 𝘥𝘪𝘴𝘱𝘭𝘢𝘺𝘦𝘥 𝘰𝘯 𝘵𝘩𝘪𝘴 𝘣𝘰𝘢𝘳𝘥?" ChatGPT can decipher a simple one, not the 'complex' ones humans can decipher. 100% Vanilla Web Components build on top a <chess-board> I wrote in 2020 stackoverflow-challenges.github.io/cipher/

I have to stop refactoring, just publish the damn book. Civil𝑨𝑰zation - life on Mars - civilaization.github.io 100% native Web Components every chapter an .MD file Languages translated by ChatGPT 95% AI generated story #webcomponents

<fit-text> Web Component jsfiddle.net/WebComponent... fit-text.github.io kizu.dev/fit-to-width... Cool CSS #webcomponents

No need to write Web Components like: 𝙨𝙪𝙥𝙚𝙧(); 𝙩𝙝𝙞𝙨.𝙖𝙩𝙩𝙖𝙘𝙝𝙎𝙝𝙖𝙙𝙤𝙬({𝙢𝙤𝙙𝙚: '𝙤𝙥𝙚𝙣'}); 𝙩𝙝𝙞𝙨.𝙨𝙝𝙖𝙙𝙤𝙬𝙍𝙤𝙤𝙩.𝙞𝙣𝙣𝙚𝙧𝙃𝙏𝙈𝙇 = `` you can write: 𝙨𝙪𝙥𝙚𝙧() .𝙖𝙩𝙩𝙖𝙘𝙝𝙎𝙝𝙖𝙙𝙤𝙬({𝙢𝙤𝙙𝙚: '𝙤𝙥𝙚𝙣'}) .𝙞𝙣𝙣𝙚𝙧𝙃𝙏𝙈𝙇 = `` #webcomponents

NO! This only works when you treat Web Components the OLD jQuery or Framework way When you process PARSED DOM, then do something with it. Web Components defined *BEFORE* DOM is parsed can NOT access DOM content in the constructor or the connectedCallback *because* it is not there yet!!

My first and only attempt with Veo3: 𝘈𝘯 𝘰𝘭𝘥𝘦𝘳 𝘱𝘳𝘰𝘨𝘳𝘢𝘮𝘮𝘦𝘳, 𝘸𝘪𝘵𝘩𝘰𝘶𝘵 𝘣𝘦𝘢𝘳𝘥 𝘢𝘯𝘥 𝘸𝘪𝘵𝘩 𝘨𝘳𝘦𝘺 𝘩𝘢𝘪𝘳, 𝘪𝘴 𝘤𝘰𝘥𝘪𝘯𝘨 𝘢 𝘑𝘢𝘷𝘢𝘚𝘤𝘳𝘪𝘱𝘵 𝘞𝘦𝘣 𝘊𝘰𝘮𝘱𝘰𝘯𝘦𝘯𝘵 𝘸𝘪𝘵𝘩 𝘤𝘭𝘦𝘢𝘳 <𝘮𝘺-𝘤𝘰𝘮𝘱𝘰𝘯𝘦𝘯𝘵> 𝘤𝘰𝘥𝘦𝘭𝘦𝘵𝘵𝘦𝘳𝘴 𝘢𝘱𝘱𝘦𝘢𝘳𝘪𝘯𝘨 𝘰𝘯 𝘵𝘩𝘦 𝘤𝘰𝘮𝘱𝘶𝘵𝘦𝘳 𝘴𝘤𝘳𝘦𝘦𝘯. 𝘛𝘩𝘦 𝘱𝘳𝘰𝘨𝘳𝘢𝘮𝘮𝘦𝘳 𝘵𝘩𝘦𝘯 𝘭𝘰𝘰𝘬𝘴 𝘢𝘵 𝘵𝘩𝘦 𝘤𝘢𝘮𝘦𝘳𝘢, 𝘴𝘮𝘪𝘭𝘦𝘴 𝘢𝘯𝘥 𝘩𝘪𝘴 𝘰𝘱𝘦𝘯 𝘮𝘰𝘶𝘵𝘩 𝘳𝘦𝘷𝘦𝘢𝘭 <></> 𝘏𝘛𝘔𝘓 𝘵𝘢𝘨𝘴 𝘢𝘴 𝘵𝘦𝘦𝘵𝘩

Ask for Web Components, and all AIs create them (a bit verbose) when I add <wc-name> to the prompt. But the applications boot like its 1999 Are we going to accept mediocre code because it is trained on a history full of s*** blogs? How can we program the Web Components programmer? #webcomponents

0.2 - 2% of users have no JavaScript !!!!!!!! Less than 26% of internet users understand English User Language Distribution: English: 25.9% Chinese: 19.4% Spanish: 7.9% Arabic: 5.2% Should I focus on a no-JavaScript Web Component or translate my Web Component to other languages? #webcomponents

Another Web Components interview question many "gurus" still "solve" with <script 𝙩𝙮𝙥𝙚="𝙢𝙤𝙙𝙪𝙡𝙚"> <my-el></my-el> <script> customElements.define('my-el', class extends HTMLElement { constructor() { super().innerHTML = "Write DOM in constructor"; } }) </script> <my-el></my-el> #webcomponents

Quotes from Web Component Presentations (A reimagining of the classic Tree Swing Project cartoon) project-cartoon.github.io?lang=wc Built with #webcomponents

A year older, and wiser Had to update the <event-count> Web Component today Couldn't resist to add an extra default counter: event="48" added the FlagMeister Web Component for flag effect event-count.github.io flagmeister.github.io #webcomponents #webcomponent #customelement #customelements

Experimental <language-select> Web Component Loads the main SVG flags UI *AFTER* the user clicked the button Saves 33kB JS download when the user does NOT switches language (every byte counts!) Fine for 4G connections, too slow on 3G (just load all) language-select.github.io #webcomponents

𝑩𝒍𝒊𝒏𝒅𝒆𝒅 𝒃𝒚 𝒔𝒉𝒂𝒅𝒐𝒘𝑫𝑶𝑴 A StackOverflow user got into trouble <input id="TWO"> onkeyup listener does not work But why? Playground: jsfiddle.net/WebComponent... Yes, he's using unconventional script-injection code... that is what we get for not educating developers on shadowDOM 😊

Web Components can't slide down the chimney... but they can now be unwrapped/created for free! 🎁 I copied all the instructions I wrote and fine-tuned for my "Web Component Creator (Chat)GPT" to a Dev.to blogpost. 👉 dev.to/dannyengelma... #webcomponent #webcomponents #openai #chatgpt #ai

Below Web Components code A. is pointless, attachShadow gets you this.shadowRoot for free B. Protects an "open" shadowRoot from outside access #webcomponents

The very first slide I present in class div-soup.github.io 𝘠𝘰𝘶 𝘢𝘳𝘦 𝘵𝘩𝘦 𝘵𝘦𝘢𝘮, 𝘱𝘪𝘤𝘬 𝘺𝘰𝘶𝘳 𝘵𝘰𝘰𝘭 And then I leave to get a cup of coffee #webcomponents

Thanks Jim, for pointing out the memory tracking features not supported in Safari. App. 400 concurrent <snow-flake> Web Components in a snowstorm on my 4 year old i7 CPU laptop And a blizzard on my new i7 with app. 700 concurrent <snow-flake> Web Components #webcomponents dev.to/dannyengelma...

#webcomponents <make-it-snow> (inspired by Zach) Exploring the limits of CSS animated Web Components dev.to/dannyengelma...

I read <star-rating> is getting attention again. Here is my 2021 version: dev.to/dannyengelma...

#WebComponents You can write: 𝙘𝙤𝙣𝙨𝙩𝙧𝙪𝙘𝙩𝙤𝙧() { 𝙨𝙪𝙥𝙚𝙧(); 𝙩𝙝𝙞𝙨.𝙖𝙩𝙩𝙖𝙘𝙝𝙎𝙝𝙖𝙙𝙤𝙬({ 𝙢𝙤𝙙𝙚: "𝙤𝙥𝙚𝙣" }); 𝙩𝙝𝙞𝙨.𝙨𝙝𝙖𝙙𝙤𝙬𝙍𝙤𝙤𝙩.𝙞𝙣𝙣𝙚𝙧𝙃𝙏𝙈𝙇 = "<𝙝1>𝙃𝙚𝙡𝙡𝙤!</𝙝1>"; } chained: 𝙘𝙤𝙣𝙨𝙩𝙧𝙪𝙘𝙩𝙤𝙧() { 𝙨𝙪𝙥𝙚𝙧() .𝙖𝙩𝙩𝙖𝙘𝙝𝙎𝙝𝙖𝙙𝙤𝙬({ 𝙢𝙤𝙙𝙚: "𝙤𝙥𝙚𝙣" }) .𝙞𝙣𝙣𝙚𝙧𝙃𝙏𝙈𝙇 = "<𝙝1>𝙃𝙚𝙡𝙡𝙤!</𝙝1>"; } --CQ

<script> customElements.define("i-am", class extends HTMLElement { connectedCallback(){ this.innerHTML = `<h1>I am ${this.innerHTML}</h1>`; }}); </script> <i-am>using Web Components</i-am> <i-am>a cool Web Developer</i-am> Are you a #WebComponents pro? 𝙒𝙝𝙖𝙩 𝙞𝙨 𝙙𝙞𝙨𝙥𝙡𝙖𝙮𝙚𝙙 𝙤𝙣 𝙮𝙤𝙪𝙧 𝙨𝙘𝙧𝙚𝙚𝙣?

Many Web Components break when accessing DOM in the constructor!! You think they work fine because you *define* the Web Component (too) late *after* DOM was parsed, using "async" or type="module". Test by executing 𝙙𝙤𝙘𝙪𝙢𝙚𝙣𝙩.𝙘𝙧𝙚𝙖𝙩𝙚𝙀𝙡𝙚𝙢𝙚𝙣𝙩("𝙢𝙮-𝙘𝙤𝙢𝙥") in the Console #webcomponents web components