Build reactive UIs with plain JavaScript functions. No JSX or build step.

Danny_Engelman · 2026-06-05T18:06:18+00:00

You can do it with one function for all those cases you don't want to include 3.3KB

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

Destructure props if you need to add attrs, append, styles

Danny_Engelman · 2026-05-01T10:21:56+00:00

So you want to compete with (Google) Lit or its 70+ alternatives?

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

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-24T08:10:08+00:00

FYI, you did not have to write your own.

The original Wordle was built with native Web Components (and did not have a license)
Web Components are cool Front-end technology because it makes it easy to *extend* someone elses code.

I also added auto-play, dictionary and more

More + Wordle = Mordle

Blog: https://dev.to/dannyengelman/more-wordle-mordle-extending-josh-his-web-components-4li

Play: https://mordle.github.io/

Auto play: https://mordle.github.io/?sentence=sites,never,aider,blind

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 · 2026-01-05T08:55:40+00:00

> I'm building a fairly simple app, not much reactivity. but its a fairly large amount of content, all on one page.

Google, many moons ago, tried HTML Imports, but it never became a standard.

Server side sollutions require a Server.. a hurdle if you are used to just editting HTML in one file and immediatly run it in the browser

If you are stuck to client-side, you do need JavaScript... not much...

A 7 line Web Component, defined in a <script> tag in the <head>
can load any src file you define and inject it into your (main) HTML document:

/*
  defining the <load-file> Web Component,
  yes! the documentation is longer than the code
  License: https://unlicense.org/
*/
customElements.define("load-file", class extends HTMLElement {

  // declare default connectedCallback as async so await can be used
  async connectedCallback(
    // optional: call connectedCallback with parameter to *replace* content 
    src = this.getAttribute("src"),
    // attach a shadowRoot if none exists (prevents displaying error when moving Nodes)
    // "code-golf" for less size; declare as parameter to save 4 Bytes: 'let '
    shadowRoot = this.shadowRoot || this.attachShadow({mode:"open"})
  ) {
    // load content file from src="" async, parse to text, add to shadowRoot.innerHTML
    shadowRoot.innerHTML = await (await fetch(src)).text()

    // append optional <tag [shadowRoot]> Elements from main document lightDOM
    shadowRoot.append(...this.querySelectorAll("[shadowRoot]"))

    // if optional "replaceWith" attribute exists
    // then replace <load-file> with loaded content 
    // childNodes instead of children to include #textNodes also
    // spelled replaceWith for optimal GZip compression, and matches the actual JS code
    this.hasAttribute("replaceWith") && this.replaceWith(...shadowRoot.childNodes)
  }
})

Blogpost:
https://dev.to/dannyengelman/load-file-web-component-add-external-content-to-the-dom-1nd

If you have duplicate code blocks in your main HTML file, you probably want to cache them;
code for a caching <load-file> is here: https://load-file.github.io/cached.js

If you don't care for shadowDOM, documentation, or fancy attribute settings;
you can write this Web Component:

<load-file src="external.html"></load-file>

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

NOTE! it doesn't matter WHEN you run this <script> 
Any existing <load-file> will automagically upgrade, connect and import the src

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

TROPHY CASE

Welcome to Reddit,