Lightnews — Scholar-powered news

Danny Engelman 🌷🏍️🛥️ @engelman.nl · 16h

attachShadow sets ands return this.shadowRoot

and append( ) (not available in IE) is a whole lot more versatile than oldskool appendChild( )

If you then add a 1 line framework
You end up with vanilla code:

1 1

Danny Engelman 🌷🏍️🛥️ @engelman.nl · 1d

And how would that help to make the distiction between user-agent HTML tags and user HTML tags (Custom Elements)?

<h1> and <my@h1> ?

1

Danny Engelman 🌷🏍️🛥️ @engelman.nl · 1d

Its BTTF day next tuesday...

1 1

Danny Engelman 🌷🏍️🛥️ @engelman.nl · 10d

Great example, I stole it 😇
then refactored it to fit my lesson style, because you get
this.shadowRoot for free and don't need a container DIV inside shadowDOM... and I prefer to log to the screen instead of console

jsfiddle.net/WebComponent...

connectedCallback runs for every DOM insertion AND mutation - JSFiddle - Code Playground

JSFiddle - Test your JavaScript, CSS, HTML or CoffeeScript online with JSFiddle.

jsfiddle.net

Danny Engelman 🌷🏍️🛥️ @engelman.nl · 10d

shadowDOM is older than React

But us mortal Web Component developers couldn't use it till years later

𝙨𝙞𝙣𝙘𝙚 𝙬𝙝𝙚𝙣 𝙙𝙤𝙚𝙨 𝙪𝙨𝙚𝙧-𝙖𝙜𝙚𝙣𝙩 𝙨𝙝𝙖𝙙𝙤𝙬𝙍𝙤𝙤𝙩 𝙚𝙭𝙞𝙨𝙩 𝙞𝙣 𝙩𝙝𝙚 𝙗𝙧𝙤𝙬𝙨𝙚𝙧𝙨?

#webcomponents

Screenshot of ChatGPT answer for: 𝙨𝙞𝙣𝙘𝙚 𝙬𝙝𝙚𝙣 𝙙𝙤𝙚𝙨 𝙪𝙨𝙚𝙧-𝙖𝙜𝙚𝙣𝙩 𝙨𝙝𝙖𝙙𝙤𝙬𝙍𝙤𝙤𝙩 𝙚𝙭𝙞𝙨𝙩 𝙞𝙣 𝙩𝙝𝙚 𝙗𝙧𝙤𝙬𝙨𝙚𝙧𝙨?
WebKit implemented shadowDOM (behind a browser flag) in 2012

1

Danny Engelman 🌷🏍️🛥️ @engelman.nl · 11d

As an addition, I wrote a loooong Stack Overflow answer years ago about and mainly :slotted and why :slotted has limitations

stackoverflow.com/questions/61...

::slotted CSS selector for nested children in shadowDOM slot

The CSS ::slotted selector selects children of the <slot> element. However, when trying to select grandchildren like with ::slotted(*), ::slotted(*) *, or ::slotted(* *), the selector doesn't...

stackoverflow.com

1 1

Danny Engelman 🌷🏍️🛥️ @engelman.nl · 12d

> Any tag name even without a dash is valid too!

You can use it, but will always be a HTMLUnknownElement

is HTMLElement,
a UNdefined Custom Element at first, which CAN (but doesn't have to) become a Defined Custom Element.

I blogged about this in 2021

dev.to/dannyengelma...

Web Components using UnknownHTMLElements for better semantic HTML

Using Web Components to draw Pie Charts with semantic HTML

dev.to

3

Danny Engelman 🌷🏍️🛥️ @engelman.nl · 12d

> party like it's 2006

TBL his WebBrowser did this... in 1991

Danny Engelman 🌷🏍️🛥️ @engelman.nl · 13d

You can replace the DIVs-soup with undefined Custom Elements too:

without using JavaScript, only HTML and CSS styling
You don't get more functionality, only readable HTML,
no more hunting for that closing DIV

dashed-html.github.io

1

Danny Engelman 🌷🏍️🛥️ @engelman.nl · 15d

I would choose Svelte too.

All is fine if you are happy with that Build step,
you don't care what the code in the browser looks like,
never debug vanilla in the Browser,
never continue with components from project A into project B.

1

Danny Engelman 🌷🏍️🛥️ @engelman.nl · 18d

> How did I not know this?

Do you think there are people who know everything?

Josh didn't know 𝘱𝘢𝘵𝘩𝘓𝘦𝘯𝘨𝘵𝘩 until multiple people sent him an email he was doing 𝘴𝘵𝘳𝘰𝘬𝘦-𝘥𝘢𝘴𝘩𝘢𝘳𝘳𝘢𝘺 a bit complex.

I learned 𝘤𝘲𝘸 units today.

Never stop being curious.

I love Web Components because you can disect them

4

Danny Engelman 🌷🏍️🛥️ @engelman.nl · 18d

and this.localName === "gutter-editor-pick" ?

Danny Engelman 🌷🏍️🛥️ @engelman.nl · 22d

Welcome on the Learning Path.

There are 2 paths, you either publish your own 𝘐-𝘤𝘢𝘯-𝘥𝘰-𝘞𝘦𝘣-𝘊𝘰𝘮𝘱𝘰𝘯𝘦𝘯𝘵𝘴-𝘣𝘦𝘵𝘵𝘦𝘳 BaseClass by the end of the year,
or you don't

Danny Engelman 🌷🏍️🛥️ @engelman.nl · 23d

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

Sci-Fi Short Film “A Date in 2025" | DUST

YouTube video by DUST

www.youtube.com

Danny Engelman 🌷🏍️🛥️ @engelman.nl · 29d

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?

Danny Engelman 🌷🏍️🛥️ @engelman.nl · Sep 16

You might like this spritesheet related Web Component:

dev.to/dannyengelma...

Create SVG 📽️ Spritesheet animations with 1 Template Literal String 🎬

One Template Literal String creates the whole SVG Spritesheet Client-Side

dev.to

1 1

Danny Engelman 🌷🏍️🛥️ @engelman.nl · Sep 16

Just remember to set

𝙙𝙞𝙨𝙥𝙡𝙖𝙮 : 𝙞𝙣𝙡𝙞𝙣𝙚-𝙗𝙡𝙤𝙘𝙠
or
𝙙𝙞𝙨𝙥𝙡𝙖𝙮: 𝙗𝙡𝙤𝙘𝙠

yourself on elements / web components

dev.to/dannyengelma...

Not a DIV inside/in sight/site

You can replace all <div></div> with...

dev.to

2

Danny Engelman 🌷🏍️🛥️ @engelman.nl · Sep 15

> a bit reminiscent to the old days where you just drop in
> a bunch of js scripts to tinker your toy projects

You can even have fun WITHOUT JavaScript,
because all browsers support Custom Elements since 2018,
and EVERY tagname with a dash IS a VALID HTMLElement.
Thus you can replace every DIV

EVERY <tag-name> WITH a dash, IS a VALID HTMLElement, thus all DIV soup can be replaced with meaningful tagnames

1 1

Danny Engelman 🌷🏍️🛥️ @engelman.nl · Sep 15

You can not do: 𝘤𝘭𝘢𝘴𝘴 𝘦𝘹𝘵𝘦𝘯𝘥𝘴 𝘚𝘝𝘎𝘌𝘭𝘦𝘮𝘦𝘯𝘵

But you *can* create SVG with a Web Component

I have answered 193 Stack Overflow questions
with a 𝙒𝙚𝙗-𝘾𝙤𝙢𝙥𝙤𝙣𝙚𝙣𝙩-𝙘𝙧𝙚𝙖𝙩𝙚𝙨-𝙎𝙑𝙂 answer thus far

stackoverflow.com/search?q=use...

Like using HTMLUnknownElements to create a
dev.to/dannyengelma...

Web Components using UnknownHTMLElements for better semantic HTML

Using Web Components to draw Pie Charts with semantic HTML

dev.to

Danny Engelman 🌷🏍️🛥️ @engelman.nl · Sep 15

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

2

Danny Engelman 🌷🏍️🛥️ @engelman.nl · Sep 14

Dat ligt eraan, als je React kent is dat de beste optie, wil je standaard bestendig de komende 5 jaar zonder veel upgrade issues werken, dan is Lit beter

Danny Engelman 🌷🏍️🛥️ @engelman.nl · Sep 13

Cool! Reminds me of ZebraZapps by dr. Michael Allen
who also did the infamous Macromedia Authorware in the 90s
We happily paid $999 a year for it
(in 2007 deleted from existence by Adobe)

en.wikipedia.org/wiki/Adobe_A...
flowline based authoring

www.zebrazapps.info/features
wiring based authoring

1 1

Danny Engelman 🌷🏍️🛥️ @engelman.nl · Sep 9

> never seen the execution of inline functions
> in a tagged template (pls correct me)

My Web Component (2021) creates
animated SVGs from a Template Literal
using (pre-defined) functions

innerHTML String ► Template Literal String ► SVG

BLOG: dev.to/dannyengelma...

SpiteMeister Web Component example: using one (Template Literal) string to animate a Hamburger Icon to an Arrow

1

Danny Engelman 🌷🏍️🛥️ @engelman.nl · Sep 7

That site cuts some corners. The biggest error:

► You can't access attributes in the constructor;

Simply tested with a
𝘥𝘰𝘤𝘶𝘮𝘦𝘯𝘵.𝘤𝘳𝘦𝘢𝘵𝘦𝘌𝘭𝘦𝘮𝘦𝘯𝘵("x-header")
in the Dev console

1

Danny Engelman 🌷🏍️🛥️ @engelman.nl · Sep 4

Its not the "standard" path into Web Components.

Most experiment with Web Components, deem them too verbose or just plain stupid to write.

Then write their own I-can-do-better framework around Web Components, and publish to NPM for all the world to use.

webcomponents.dev/blog/all-the...

All the Ways to Make a Web Component - Feb 2022 Update

Compare coding style, bundle size and performance of 61 different ways to make a Web Component.

webcomponents.dev