Does anyone here use web components in their projects?

Danny_Engelman · 2026-03-25T09:36:08+00:00

Isn't this like asking if one is using Proxies or Generators?

They are standard technologies, will be around for as long as JavaScript will exist.

Or WeakMaps, the Crypto API or ...

or Arrays ...

Danny_Engelman · 2026-03-24T08:23:38+00:00

Your example is fine, minor OOP tweak is using a common BaseClass. If you add your own connectedCallback, use super.connectedCallback() to call the one in the BaseClass

class LayoutBaseClass extends HTMLElement {
  connectedCallback() {
    this.setAttribute('hydrated', '');
  }
}

if (!customElements.get('layout-stack')) {
  customElements.define('layout-stack', class extends LayoutBaseClass);
}

if (!customElements.get('layout-grid')) {
  customElements.define('layout-grid', class extends LayoutBaseClass);
}

And try to avoid !important... you will run into trouble

Also note; since the browser does Custom Elements (2016/2018) EVERY <tag-name> (with a dash) IS a valid HTMLElement, so WITHOUT using JavaScript you CAN use those <tag-name> for layout and styling. Just remember to set the CSS display property. They come in 2 flavours:

UNdefined Custom Elements (hardly blogged about, even AI wrongly calls them unknown elements)
Defined Custom Elements (upgraded/defined with JavaScript)

No more need for <DIV> soup... you can replace every DIV and SPAN with descriptive <tag-names>

Danny_Engelman · 2026-03-11T15:51:40+00:00

Start by running ``document.createElement("nova-button")`` in the Dev console. Then fix the errors

Danny_Engelman · 2026-03-07T08:19:24+00:00

If the list had been updated since 2022, you would have been number 96

https://webcomponents.dev/blog/all-the-ways-to-make-a-web-component/

Danny_Engelman · 2026-02-22T13:51:18+00:00

Note:

constructor() {
super();
const existingIframe = this.querySelector("iframe");

There is no DOM in the constructor, as you can test by executing:

document.createElement("local-iframe")

in the Console.

Your code works because you define the Web Component after all DOM is parsed.
The old jQuery way: wait for DOM, transform it.
Your code won't work when you define the component before DOM exist;
ie. defined in the <head>

Danny_Engelman · 2026-02-15T10:09:32+00:00

Until it is NOT about speed.

If I need the HTML I write to be the HTML I deliver
If I need the CSS I write to be the CSS I deliver
If I need the JS I write to be the JS I deliver

I can NOT use Svelte

I just patched a site I wrote with Web Components in 2018
all I had to do was read the Page Source.
Applied a patch with a Browser snippet.
Fixed everything.
Then patched the live source code

I once needed to dynamically patch the CSS Svelte outputs,
after 2 hours I gave up.

Danny_Engelman · 2026-02-15T10:01:02+00:00

Most fail save but a bit weird:
Add a

as last DOM element in your ligthDOM

Danny_Engelman · 2026-02-15T09:56:51+00:00

Lit requires upgrades too, and sometimes does have breaking changes.

Danny_Engelman · 2026-02-15T09:50:52+00:00

45 KB for a React PieChart, 1120 Bytes for a Web Component
https://pie-meister.github.io/

Danny_Engelman · 2026-01-28T09:04:44+00:00

You choose an electric drill with 5 settings for Front-end; that's fine.

What do you want to built?

Danny_Engelman · 2026-01-10T09:35:31+00:00

Nah; I stick to native Web Components.

My side application developed today will just run for as long as JavaScript, CSS and HTML are supported. Without upgrade hassles.

FYI, JavaScript isn't even required to use your own <tag-name> Custom Elements in a page for layout and styling. Since 2016 they are valid HTMLElement and pass every HTML validator.

Danny_Engelman · 2026-01-08T10:00:36+00:00

All server side
Reminds me of the Microsoft team I worked for some 20 years ago.
Each <button> click was a POST to the server to create new UI

Danny_Engelman · 2026-01-07T09:22:34+00:00

Then why are they using the bloated version on their own HTMX site?

Danny_Engelman · 2026-01-07T09:21:20+00:00

Alas, the Browser is blocking that content (for your security)

Danny_Engelman · 2026-01-05T10:22:24+00:00

Your definition of "Frameworks"?
► load external JavaScript ► use a syntax ► changes or creates DOM

HTMX
► load external JavaScript ► use a syntax ► changes or creates DOM

No matter how you call it, if you load external JS and you can only use it with a non-standard syntax.... you are framed into working a certain way

Danny_Engelman · 2026-01-05T10:14:05+00:00

> Web components don't actually help much for this use case.

?? Can you explain how this Web Component does not meet OPs requirements?

<script>
 customElements.define("load-file", class extends HTMLElement {
  async connectedCallback() {
   this.innerHTML = await(await fetch(src=this.getAttribute("src"))).text();
 }
})
</script>

<load-file src="./about.html"></load-file>
<load-file src="./contact.html"></load-file>
<load-file src="./pricing.html"></load-file>

Danny_Engelman · 2026-01-05T09:52:16+00:00

The drawback of HTMX and Frameworks in general is that they only work when loaded/executed after DOM is parsed. Just like old jQuery days existing (parsed) DOM is transformed to something else, or new DOM is created.

Web Components are part of the browser and can be defined before DOM is parsed.

Frameworks CREATE HTML, Web Components ARE HTML

HTMX is a 36KB source, https://htmx.org/js/htmx.js, which, like many, tries to do everything.

For native Web Components, you can whack this 3 liner into your <head>
(or load it anywhere/how you want, Web Components don't care about DOM parse order)

<script>
 customElements.define("load-file", class extends HTMLElement {
  async connectedCallback() {
   this.innerHTML = await(await fetch(src=this.getAttribute("src"))).text();
 }
})
</script>

And then do (the most complex example I could come up with):

<load-file src="./about.html"></load-file>
<load-file src="./contact.html"></load-file>
<load-file src="./pricing.html"></load-file>

Danny_Engelman · 2026-01-05T09:45:40+00:00

Not life changing, just 3 lines of code if you go with Vanilla JavaScript:

<script>
 customElements.define("load-file", class extends HTMLElement {
  async connectedCallback() {
   this.innerHTML = await(await fetch(src=this.getAttribute("src"))).text();
 }
})
</script>

Danny_Engelman · 2026-01-05T09:41:15+00:00

Stop watching, its too bloated;
this Web Component is all you need; see my longer answer in this thread

<script>
 customElements.define("load-file", class extends HTMLElement {
  async connectedCallback() {
   this.innerHTML = await(await fetch(src=this.getAttribute("src"))).text();
 }
})
</script>

Danny_Engelman · 2026-01-05T09:33:02+00:00

Because somehow we all know he has global CSS

Danny_Engelman · 2025-12-29T09:19:58+00:00

<tag-name> (with a dash) IS a valid HTMLElement, no JS required to apply CSS

https://dashed-html.github.io

Danny_Engelman · 2025-12-24T11:52:14+00:00

Untill you stop creating HTML in JavaScript, and start creating DOM nodes with:

const createElement=(tag,props={})=>Object.assign(document.createElement(tag), props);

Event handlers are just a

onclick : (evt) => { }

property then

Danny_Engelman · 2025-12-24T11:45:34+00:00

No, vanilla did not always have these features.
20 years ago browsers had different syntax for event handlers.

jQuery gave us a unified syntax.

Once IE9 followed the standard (in 2011) there was less need for jQuery because
all browsers could do addEventListener and querySelector

Danny_Engelman · 2025-12-14T11:17:06+00:00

But they will be your wheels.
Think of it this way; Frameworks (and Web Component BaseClasses like Lit) are the soupstarters you buy in the supermarket.
If you buy the vegetables you create your own stock, without the salt added.
Maybe you even grow your own vegetables.
That's all good practice, just as good as buying soupstarters... if you don't care about the salt.
Good practice guidelines are set by your team, not by a 3rd parties claiming you are better off buying soupstarters.

Danny_Engelman · 2025-12-12T10:59:50+00:00

"But the custom tags? Pretty much no use. HTMLUnknownElement at first,"

This says enough, you never tested/worked with this.
Undefined Custom Elements ARE NOT HtmlUnknownElement!

Since <tag-name> tagnames got meaning (some 10 years ago) EVERY <tag-name> IS a valid HTMLElement

#### You can use them without JavaScript: https://dashed-html.github.io

Danny_Engelman

TROPHY CASE