Danny Engelman 🌷🏍️🛥️
@engelman.nl
I do modern Web Component Development with technologies supported by **all** WHATWG partners (Apple, Google, Microsoft & Mozilla)
👨🏻💻TRS-80 Scriptkiddie '79+
🎓 Computer Science '87 - '92
❤️ Online since 1990 yes! 1990 I started with Email and Gopher
👨🏻💻TRS-80 Scriptkiddie '79+
🎓 Computer Science '87 - '92
❤️ Online since 1990 yes! 1990 I started with Email and Gopher
Yes, for people wanting to style Web Components.
But if you ask them:
you can use a 3rd party Web Component, but it might ruin the rest of your webpage. Are you fine wth that?
They all say: NO!
But if you ask them:
you can use a 3rd party Web Component, but it might ruin the rest of your webpage. Are you fine wth that?
They all say: NO!
December 24, 2025 at 12:20 PM
Yes, for people wanting to style Web Components.
But if you ask them:
you can use a 3rd party Web Component, but it might ruin the rest of your webpage. Are you fine wth that?
They all say: NO!
But if you ask them:
you can use a 3rd party Web Component, but it might ruin the rest of your webpage. Are you fine wth that?
They all say: NO!
In the early '90s a smart student used the padding bits in the Novell IPX network packages to store his own data. His application to chat (and FTP) was soon used by every student.
It couldn't be blocked.
System Administrators wanted him expelled.
We (R&D department at same Uni) offered him a job.
It couldn't be blocked.
System Administrators wanted him expelled.
We (R&D department at same Uni) offered him a job.
December 23, 2025 at 9:52 AM
In the early '90s a smart student used the padding bits in the Novell IPX network packages to store his own data. His application to chat (and FTP) was soon used by every student.
It couldn't be blocked.
System Administrators wanted him expelled.
We (R&D department at same Uni) offered him a job.
It couldn't be blocked.
System Administrators wanted him expelled.
We (R&D department at same Uni) offered him a job.
> Lit is OpenJS foundation now! So you can trust it!
Platinum Member (1 only) Microsoft
I spent 15 years deep into MS tech
Still ranked #2 in the all-time SharePoint-StackExckange [topic:JavaScript] ranking because I also had a life.
2017 MS switched SP frontend to React
I hate Microsoft more
Platinum Member (1 only) Microsoft
I spent 15 years deep into MS tech
Still ranked #2 in the all-time SharePoint-StackExckange [topic:JavaScript] ranking because I also had a life.
2017 MS switched SP frontend to React
I hate Microsoft more
'javascript' Top Users
Q&A for SharePoint enthusiasts
sharepoint.stackexchange.com
December 23, 2025 at 9:33 AM
> Lit is OpenJS foundation now! So you can trust it!
Platinum Member (1 only) Microsoft
I spent 15 years deep into MS tech
Still ranked #2 in the all-time SharePoint-StackExckange [topic:JavaScript] ranking because I also had a life.
2017 MS switched SP frontend to React
I hate Microsoft more
Platinum Member (1 only) Microsoft
I spent 15 years deep into MS tech
Still ranked #2 in the all-time SharePoint-StackExckange [topic:JavaScript] ranking because I also had a life.
2017 MS switched SP frontend to React
I hate Microsoft more
My reasoning:
I once was heavliy into Angular.
And then Google called Angular 2 and upgrade.
(it was a new language)
I don't trust anything coming from Google.
I once was heavliy into Angular.
And then Google called Angular 2 and upgrade.
(it was a new language)
I don't trust anything coming from Google.
December 22, 2025 at 7:38 PM
My reasoning:
I once was heavliy into Angular.
And then Google called Angular 2 and upgrade.
(it was a new language)
I don't trust anything coming from Google.
I once was heavliy into Angular.
And then Google called Angular 2 and upgrade.
(it was a new language)
I don't trust anything coming from Google.
You must be using some translation software; I wrote:
One 3 line AI prompt created:
shadow-style.github.io
too lazy to enter a second prompt, I was only exploring content for my Web Component course.
I did start refactoring that page, but as a public research page it is good enough.
One 3 line AI prompt created:
shadow-style.github.io
too lazy to enter a second prompt, I was only exploring content for my Web Component course.
I did start refactoring that page, but as a public research page it is good enough.
Shadow DOM Styling Options - Complete Guide
shadow-style.github.io
December 22, 2025 at 7:24 PM
You must be using some translation software; I wrote:
One 3 line AI prompt created:
shadow-style.github.io
too lazy to enter a second prompt, I was only exploring content for my Web Component course.
I did start refactoring that page, but as a public research page it is good enough.
One 3 line AI prompt created:
shadow-style.github.io
too lazy to enter a second prompt, I was only exploring content for my Web Component course.
I did start refactoring that page, but as a public research page it is good enough.
So if I extend LITElement, am I using it "from the outside"?
December 22, 2025 at 7:17 PM
So if I extend LITElement, am I using it "from the outside"?
2.5 Kilo Bytes to write "Hello World!"
December 22, 2025 at 4:52 PM
2.5 Kilo Bytes to write "Hello World!"
I am a vanilla dinosaur
Spent days to squeeze out more Bytes from my Web Component pet-project. It now would have fit in the 4KB of my VIC-20.
Had I used LIT my Web Component would be way over double the size, and upgrade hell for the next 30 years.
Original source code is now super lean
Spent days to squeeze out more Bytes from my Web Component pet-project. It now would have fit in the 4KB of my VIC-20.
Had I used LIT my Web Component would be way over double the size, and upgrade hell for the next 30 years.
Original source code is now super lean
December 22, 2025 at 1:02 PM
I am a vanilla dinosaur
Spent days to squeeze out more Bytes from my Web Component pet-project. It now would have fit in the 4KB of my VIC-20.
Had I used LIT my Web Component would be way over double the size, and upgrade hell for the next 30 years.
Original source code is now super lean
Spent days to squeeze out more Bytes from my Web Component pet-project. It now would have fit in the 4KB of my VIC-20.
Had I used LIT my Web Component would be way over double the size, and upgrade hell for the next 30 years.
Original source code is now super lean
> Could you elaborate on the plague?
As I said, context
Those Template Literal newlines and spaces end up in your gzipped file...
Great from Development POV, but from a Delivery POV they suck
I grew up with a VIC-20 with 4KB of memory.. I care about every Byte. Maybe a bit too much, but I'm happy
As I said, context
Those Template Literal newlines and spaces end up in your gzipped file...
Great from Development POV, but from a Delivery POV they suck
I grew up with a VIC-20 with 4KB of memory.. I care about every Byte. Maybe a bit too much, but I'm happy
December 22, 2025 at 10:47 AM
> Could you elaborate on the plague?
As I said, context
Those Template Literal newlines and spaces end up in your gzipped file...
Great from Development POV, but from a Delivery POV they suck
I grew up with a VIC-20 with 4KB of memory.. I care about every Byte. Maybe a bit too much, but I'm happy
As I said, context
Those Template Literal newlines and spaces end up in your gzipped file...
Great from Development POV, but from a Delivery POV they suck
I grew up with a VIC-20 with 4KB of memory.. I care about every Byte. Maybe a bit too much, but I'm happy
True, depends the elements your are creating
BUT do you measure memory consumption?
The CPU is most likely doing hardly anything
make-it-snow.github.io
Everything you are programming always depends on context
Otherwise everyone would always use the cool Generator functions and WeakMaps everywhere
BUT do you measure memory consumption?
The CPU is most likely doing hardly anything
make-it-snow.github.io
Everything you are programming always depends on context
Otherwise everyone would always use the cool Generator functions and WeakMaps everywhere
December 22, 2025 at 10:41 AM
True, depends the elements your are creating
BUT do you measure memory consumption?
The CPU is most likely doing hardly anything
make-it-snow.github.io
Everything you are programming always depends on context
Otherwise everyone would always use the cool Generator functions and WeakMaps everywhere
BUT do you measure memory consumption?
The CPU is most likely doing hardly anything
make-it-snow.github.io
Everything you are programming always depends on context
Otherwise everyone would always use the cool Generator functions and WeakMaps everywhere
You want a public confession for stealing code?
Off the record, nothing copied yet
Lit taught me to avoid creating HTML like the plague,
I use a 1 line framework for readable, smaller and faster code:
𝙘𝙤𝙣𝙨𝙩 𝙘𝙧𝙚𝙖𝙩𝙚𝙀𝙡𝙚𝙢𝙚𝙣𝙩 = (𝙩𝙖𝙜, 𝙥𝙧𝙤𝙥𝙨 = {}) => 𝙊𝙗𝙟𝙚𝙘𝙩.𝙖𝙨𝙨𝙞𝙜𝙣(𝙙𝙤𝙘𝙪𝙢𝙚𝙣𝙩.𝙘𝙧𝙚𝙖𝙩𝙚𝙀𝙡𝙚𝙢𝙚𝙣𝙩(𝙩𝙖𝙜), 𝙥𝙧𝙤𝙥𝙨);
Off the record, nothing copied yet
Lit taught me to avoid creating HTML like the plague,
I use a 1 line framework for readable, smaller and faster code:
𝙘𝙤𝙣𝙨𝙩 𝙘𝙧𝙚𝙖𝙩𝙚𝙀𝙡𝙚𝙢𝙚𝙣𝙩 = (𝙩𝙖𝙜, 𝙥𝙧𝙤𝙥𝙨 = {}) => 𝙊𝙗𝙟𝙚𝙘𝙩.𝙖𝙨𝙨𝙞𝙜𝙣(𝙙𝙤𝙘𝙪𝙢𝙚𝙣𝙩.𝙘𝙧𝙚𝙖𝙩𝙚𝙀𝙡𝙚𝙢𝙚𝙣𝙩(𝙩𝙖𝙜), 𝙥𝙧𝙤𝙥𝙨);
December 22, 2025 at 9:03 AM
You want a public confession for stealing code?
Off the record, nothing copied yet
Lit taught me to avoid creating HTML like the plague,
I use a 1 line framework for readable, smaller and faster code:
𝙘𝙤𝙣𝙨𝙩 𝙘𝙧𝙚𝙖𝙩𝙚𝙀𝙡𝙚𝙢𝙚𝙣𝙩 = (𝙩𝙖𝙜, 𝙥𝙧𝙤𝙥𝙨 = {}) => 𝙊𝙗𝙟𝙚𝙘𝙩.𝙖𝙨𝙨𝙞𝙜𝙣(𝙙𝙤𝙘𝙪𝙢𝙚𝙣𝙩.𝙘𝙧𝙚𝙖𝙩𝙚𝙀𝙡𝙚𝙢𝙚𝙣𝙩(𝙩𝙖𝙜), 𝙥𝙧𝙤𝙥𝙨);
Off the record, nothing copied yet
Lit taught me to avoid creating HTML like the plague,
I use a 1 line framework for readable, smaller and faster code:
𝙘𝙤𝙣𝙨𝙩 𝙘𝙧𝙚𝙖𝙩𝙚𝙀𝙡𝙚𝙢𝙚𝙣𝙩 = (𝙩𝙖𝙜, 𝙥𝙧𝙤𝙥𝙨 = {}) => 𝙊𝙗𝙟𝙚𝙘𝙩.𝙖𝙨𝙨𝙞𝙜𝙣(𝙙𝙤𝙘𝙪𝙢𝙚𝙣𝙩.𝙘𝙧𝙚𝙖𝙩𝙚𝙀𝙡𝙚𝙢𝙚𝙣𝙩(𝙩𝙖𝙜), 𝙥𝙧𝙤𝙥𝙨);
Should work, when I taught my mom to write HTML pages (them tags looked a lot like WordPerfect tags) there was no JavaScript... or CSS
December 21, 2025 at 4:59 PM
Should work, when I taught my mom to write HTML pages (them tags looked a lot like WordPerfect tags) there was no JavaScript... or CSS
Twelve years later, the son/daughter/X enrolls in Computer Science, convinced by memories of a dad who once seemed effortlessly cool with technology.
The first year is failed when it turns out IT is nothing like what dad—long past his cool era—claimed it was.
The first year is failed when it turns out IT is nothing like what dad—long past his cool era—claimed it was.
December 21, 2025 at 1:25 PM
Twelve years later, the son/daughter/X enrolls in Computer Science, convinced by memories of a dad who once seemed effortlessly cool with technology.
The first year is failed when it turns out IT is nothing like what dad—long past his cool era—claimed it was.
The first year is failed when it turns out IT is nothing like what dad—long past his cool era—claimed it was.
Yes we agree, shadowDOM is totally optional
And when X distributes a Web Component WITHOUT shadowDOM I won't use it any public sites unless there is 100% certainty my pages CSS isn't attacked
That means:
A. the Web Component doesn't add CSS
B. I extend the Web Component and add shadowDOM myself
And when X distributes a Web Component WITHOUT shadowDOM I won't use it any public sites unless there is 100% certainty my pages CSS isn't attacked
That means:
A. the Web Component doesn't add CSS
B. I extend the Web Component and add shadowDOM myself
December 20, 2025 at 4:26 PM
Yes we agree, shadowDOM is totally optional
And when X distributes a Web Component WITHOUT shadowDOM I won't use it any public sites unless there is 100% certainty my pages CSS isn't attacked
That means:
A. the Web Component doesn't add CSS
B. I extend the Web Component and add shadowDOM myself
And when X distributes a Web Component WITHOUT shadowDOM I won't use it any public sites unless there is 100% certainty my pages CSS isn't attacked
That means:
A. the Web Component doesn't add CSS
B. I extend the Web Component and add shadowDOM myself
You want to distribute your component to an unknown page.
No one cares if its wrapped in a chastity belt?
They should, because your CSS *inside* your Web Component should NEVER bleed out to the whole page.
Enter shadowDOM
People who whine about shadowDOM have never written larger components
No one cares if its wrapped in a chastity belt?
They should, because your CSS *inside* your Web Component should NEVER bleed out to the whole page.
Enter shadowDOM
People who whine about shadowDOM have never written larger components
December 20, 2025 at 2:38 PM
You want to distribute your component to an unknown page.
No one cares if its wrapped in a chastity belt?
They should, because your CSS *inside* your Web Component should NEVER bleed out to the whole page.
Enter shadowDOM
People who whine about shadowDOM have never written larger components
No one cares if its wrapped in a chastity belt?
They should, because your CSS *inside* your Web Component should NEVER bleed out to the whole page.
Enter shadowDOM
People who whine about shadowDOM have never written larger components
> you control a component used on multiple sites,
> but don't control the rest of the page?
Your daughter is 16 and going to a party for the first time... you know it can be a wild party (you were 16 once in the same town)
So do you make her wear the chastity belt (shadowDOM) or not?
> but don't control the rest of the page?
Your daughter is 16 and going to a party for the first time... you know it can be a wild party (you were 16 once in the same town)
So do you make her wear the chastity belt (shadowDOM) or not?
December 20, 2025 at 2:31 PM
> you control a component used on multiple sites,
> but don't control the rest of the page?
Your daughter is 16 and going to a party for the first time... you know it can be a wild party (you were 16 once in the same town)
So do you make her wear the chastity belt (shadowDOM) or not?
> but don't control the rest of the page?
Your daughter is 16 and going to a party for the first time... you know it can be a wild party (you were 16 once in the same town)
So do you make her wear the chastity belt (shadowDOM) or not?
constructor() {
super() // sets AND returns 'this' scope
.attachShadow({ // sets AND returns shadowRoot
mode: "open",
referenceTarget: "setting"
})
}
super() // sets AND returns 'this' scope
.attachShadow({ // sets AND returns shadowRoot
mode: "open",
referenceTarget: "setting"
})
}
December 20, 2025 at 2:28 PM
constructor() {
super() // sets AND returns 'this' scope
.attachShadow({ // sets AND returns shadowRoot
mode: "open",
referenceTarget: "setting"
})
}
super() // sets AND returns 'this' scope
.attachShadow({ // sets AND returns shadowRoot
mode: "open",
referenceTarget: "setting"
})
}
> A can be defined as custom element using
> window.customElements.define() in JavaScript
Not 100% correct
JavaScript creates DEFINED Custom Elements
But *any* (no JS) (with a dash) IS a UNDEFINED Custom Element, and can be used for layout and styling
dashed-html.github.io
> window.customElements.define() in JavaScript
Not 100% correct
JavaScript creates DEFINED Custom Elements
But *any* (no JS)
dashed-html.github.io
dashed-html.github.io
December 19, 2025 at 8:20 PM
> A can be defined as custom element using
> window.customElements.define() in JavaScript
Not 100% correct
JavaScript creates DEFINED Custom Elements
But *any* (no JS) (with a dash) IS a UNDEFINED Custom Element, and can be used for layout and styling
dashed-html.github.io
> window.customElements.define() in JavaScript
Not 100% correct
JavaScript creates DEFINED Custom Elements
But *any* (no JS)
dashed-html.github.io
Josh his first version was a 60KB JS file with Web Components.
He then sold it for 7 figures to the New York Times
www.nytimes.com/games/wordle...
the current site is 2MB
But Wordle is about letters not numbers 😇
mordle.github.io *extends* the original Web Components
Blog: dev.to/dannyengelma...
He then sold it for 7 figures to the New York Times
www.nytimes.com/games/wordle...
the current site is 2MB
But Wordle is about letters not numbers 😇
mordle.github.io *extends* the original Web Components
Blog: dev.to/dannyengelma...
December 17, 2025 at 6:03 PM
Josh his first version was a 60KB JS file with Web Components.
He then sold it for 7 figures to the New York Times
www.nytimes.com/games/wordle...
the current site is 2MB
But Wordle is about letters not numbers 😇
mordle.github.io *extends* the original Web Components
Blog: dev.to/dannyengelma...
He then sold it for 7 figures to the New York Times
www.nytimes.com/games/wordle...
the current site is 2MB
But Wordle is about letters not numbers 😇
mordle.github.io *extends* the original Web Components
Blog: dev.to/dannyengelma...
I did a nerdy blog 4 years ago, using Josh his original Wordle (his v1 was built as a Web Component) and extending his original component with OOP/Inheritance, without changing his code
Added the option to play any date, a dictionary, and more...
Play: mordle.github.io
Blog:
dev.to/dannyengelma...
Added the option to play any date, a dictionary, and more...
Play: mordle.github.io
Blog:
dev.to/dannyengelma...
December 17, 2025 at 1:36 PM
I did a nerdy blog 4 years ago, using Josh his original Wordle (his v1 was built as a Web Component) and extending his original component with OOP/Inheritance, without changing his code
Added the option to play any date, a dictionary, and more...
Play: mordle.github.io
Blog:
dev.to/dannyengelma...
Added the option to play any date, a dictionary, and more...
Play: mordle.github.io
Blog:
dev.to/dannyengelma...
> Inheritance can still be a footgun if you're not careful.
Everything in programming can be a footgun.
I once cancelled a teammember because he/she/x did not know Set already existed and built something similar...
Everything in programming can be a footgun.
I once cancelled a teammember because he/she/x did not know Set already existed and built something similar...
December 17, 2025 at 1:10 PM
> Inheritance can still be a footgun if you're not careful.
Everything in programming can be a footgun.
I once cancelled a teammember because he/she/x did not know Set already existed and built something similar...
Everything in programming can be a footgun.
I once cancelled a teammember because he/she/x did not know Set already existed and built something similar...