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

I am building a Web Components course
This is lesson #1

𝙀𝙡𝙚𝙢𝙚𝙣𝙩𝙖𝙧𝙮
𝙒𝙚𝙗 𝘾𝙤𝙢𝙥𝙤𝙣𝙚𝙣𝙩𝙨
𝙆𝙣𝙤𝙬𝙡𝙚𝙙𝙜𝙚
𝙛𝙧𝙤𝙢
𝙮𝙤𝙪𝙧 𝘿𝙚𝙫 𝘾𝙤𝙣𝙨𝙤𝙡𝙚

𝘥𝘰𝘤𝘶𝘮𝘦𝘯𝘵.𝘣𝘰𝘥𝘺.𝘪𝘯𝘯𝘦𝘳𝘏𝘛𝘔𝘓 = "<𝘮𝘺-𝘦𝘭𝘦𝘮𝘦𝘯𝘵/><𝘢𝘯𝘰𝘵𝘩𝘦𝘳𝘦𝘭𝘦𝘮𝘦𝘯𝘵/>";
$("𝘮𝘺-𝘦𝘭𝘦𝘮𝘦𝘯𝘵").𝘤𝘰𝘯𝘴𝘵𝘳𝘶𝘤𝘵𝘰𝘳.𝘯𝘢𝘮𝘦
$("𝘢𝘯𝘰𝘵𝘩𝘦𝘳𝘦𝘭𝘦𝘮𝘦𝘯𝘵").𝘤𝘰𝘯𝘴𝘵𝘳𝘶𝘤𝘵𝘰𝘳.𝘯𝘢𝘮𝘦

#nojavascript #webcomponents #nomoredivsoup

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

30 years ago I said most over 40 would never grasp the power of the WorldWideWeb.

30 years later I say most over 30 will never harness the power of AI

AI taught a very old fart new tricks.
AI does have "eyes"
I gave it a screenshot of an SVG Custom Elements/Web Components lifecycle diagram
and ask it "What is missing?"
It gave me 2 additions I missed and 3 suggestions to make the slide better.

150 lines. 4 months tuning my Web Component skills file.
Still amazed by AI (and I’ve been around since 1990).
Feels like those ’90s interns I trained…
...I should’ve listened when they showed me FutureSplash

6 months ago I would have agreed
6 months ago I was working on Web Components Elearning site
6 months ago I took time to actually learn CoPilot, past the prompts and tab-tab code suggestions
I pivotted, now vibe-code 4 hours a day
The power of AI is you can train it with simple Skills files

I worked for the university in Utrecht (Netherlands), so was online since 1990

was fun to attend the Macromedia User Conf. (in San Francisco) in 1994 and see their first "Online" demo fail

Meanwhile I stuck my RJ45 jack into a paywall phone and send reports to the AWARE ListServ (online since '93)

Macromedia bought Future Splash in 1996 and renamed it Flash.

will never forget, I was a Macromedia user all through the 90s
Was already using Macromedia ShockWave (in Director and Authorware)
Some interns showed me Future Splash in 1995
And I said "Too small a company, we're not going to use it"

Sounds like '80s HyperCard

Toolbok did the same some years later

(Macromedia) AuthorWare added the Flowline for programming,
every serious ELearning app(lication) was built with AW

Eventually we go full circle again, not AI programming with natural language, but dragging Components on a flowline

Why the oldskool jQuery style of creating DOM and then querying DOM to activate JS code?
Why not a Web Component?
I tested it, CoPilot AI converts your code into a Web Component with one prompt:
𝘤𝘰𝘯𝘷𝘦𝘳𝘵 𝘵𝘰 𝘸𝘦𝘣 𝘤𝘰𝘮𝘱𝘰𝘯𝘦𝘯𝘵 <𝘴𝘤𝘳𝘰𝘭𝘭-𝘯𝘶𝘮𝘣𝘦𝘳> 𝘸𝘪𝘵𝘩 𝘴𝘩𝘢𝘥𝘰𝘸𝘋𝘖𝘔 𝘢𝘯𝘥 𝘢𝘭𝘭 𝘊𝘚𝘚 𝘪𝘯𝘴𝘪𝘥𝘦 𝘢 <𝘴𝘵𝘺𝘭𝘦> 𝘵𝘢𝘨 𝘪𝘯 𝘴𝘩𝘢𝘥𝘰𝘸𝘋𝘖𝘔

As was jQuery, then its functionality was implemented a bit different in Browsers
I'm sticking with native Web Components, stole the good parts from Lit, ditched all html stuff for document.createElement and have 0 dependencies now. No more breaking upgrade changes And AI Skills do most of the work

For more inspiration: css-doodle.com
(not mine)

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

The Web Components idea is simplicity, its NOT a framework.

You got Custom Elements (any HTML <tag-name> WITH a dash) and if you WANT you CAN upgrade them with JavaScript.
That's all Web Components are.

You can put code/files anywhere you want, just like 30+ years ago when we started this journey

> Web components force this file layout

Ain't Web Components just POJO (Plain Old JavaScrip Objects) and HTML tags?

You can put that code in separate JS files, inline in it HTML, hell you can even hide it in SVG files. Only CSS doesn't parse script.

So What is the file layout forcing something???

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

> need to add another step to detect what custom
> elements are being used

You already did that step, but execute it on the client
Make AI refactor it and you are done in 15 minutes

Its like going to Burning Man
than having to wait 4 weeks for it to be built

then again .. you save maybe 20ms

They SSR all, so have a server-side process that scans Markdown and creates HTML

Since they scan the source, might as well record what Web Components are used, and create proper
<script async/defer/import src="" >
tags in the <head>

They complain about SPAs and then introduce a JS load SPA style

Note: every DSD Element IS a UNdefined Custom Element
You don't HAVE to define it.

MDN want buttons to become interactive. You don't want to be late, you wan't to be on time, not download things too early.

<script defer/async/import> does that

For CSS they DO "use the platform" loading stylesheets with <link>

Their JS load code ignores UNdefined Custom Elements ARE valid to use

𝘛𝘩𝘪𝘴 𝘳𝘦𝘴𝘶𝘭𝘵𝘴 𝘪𝘯 𝘭𝘢𝘻𝘺-𝘭𝘰𝘢𝘥𝘪𝘯𝘨 𝘤𝘶𝘴𝘵𝘰𝘮 𝘦𝘭𝘦𝘮𝘦𝘯𝘵𝘴 𝘱𝘳𝘦𝘴𝘦𝘯𝘵 𝘪𝘯 𝘵𝘩𝘦 𝘋𝘖𝘔 𝘢𝘵 𝘭𝘰𝘢𝘥 𝘵𝘪𝘮𝘦, 𝘦𝘯𝘵𝘪𝘳𝘦𝘭𝘺 𝘢𝘴𝘺𝘯𝘤 𝘢𝘯𝘥 𝘪𝘯 𝘱𝘢𝘳𝘢𝘭𝘭𝘦𝘭

Yes lazy, and LATE because it can only run AFTER all DOM is parsed

𝘞𝘦 𝘢𝘭𝘴𝘰 𝘢𝘶𝘵𝘰𝘮𝘢𝘵𝘪𝘤𝘢𝘭𝘭𝘺 𝘭𝘰𝘢𝘥 𝘦𝘷𝘦𝘳𝘺 𝘸𝘦𝘣 𝘤𝘰𝘮𝘱𝘰𝘯𝘦𝘯𝘵 𝘪𝘯 𝘰𝘶𝘳 𝘚𝘚𝘙 𝘣𝘶𝘯𝘥𝘭𝘦

SSR?! then use the platform! <𝙨𝙘𝙧𝙞𝙥𝙩 𝙙𝙚𝙛𝙚𝙧/𝙖𝙨𝙮𝙣𝙘/𝙢𝙤𝙙𝙪𝙡𝙚>

So this the AI that is doing our coding now?

Creative use of HTMLUnknownElements
Why?
Change <mol_list> to <mol-list>
and you get totally valid HTMLElements
Only when you call customElements.define they become Defined Custom Elements.... but that is not required.
UNdefined Custom Elements are great for layout and styling,
like your UNknowns

Claude Code builds the house, GitHub Pilot decorates the house. But its you and me that make it a home.

Most devs use import or whack on type="module" or defer on their scripts. Which makes the customElement.define execute after all DOM is parsed, thus the connectedCallback (firing on the opening tag of <my-tag>) actually has content in lightDOM.
...most don't know what is happening, let alone discuss

Its a 404 link
We waited 18 years, can wait a little longer, no worries

Since 2016/2018 There are:

► UNdefined Custom Elements - every!! dashed <tag-name>
(what Jeremy Keith called HTML Web Components)

► Defined Custom Elements - JS defined <tag-name>

I labeled them DUNCE
Declarative UNdefined Custom Elements
in a comment to DCE yesterday:
dev.to/dannyengelma...

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

Cool, please explain how you [per screenshot] can write Web Components with Python...

> I also have brm.us which I use as my URL shortener

Did you choose your nick then registered the domain?
or did the TLD inspire your nick?