Discussion on: On Using Web Component Libraries

When making a comparison between Web Component Libraries and Native code; then at least make it a fair comparison:

• No 8 KB Lit library required,
• No 60 KB React library required,
• No Built required...
• Copy/paste in a modern browser, and it just works
• The final GZip size for this Web Component is 296 Bytes, What does using a Library add?
• This code will run for the next 25 JavaScript years (remember that Angular 1 to 2 "update"?)

I do like the code-golf examples in this thread; I am sticking with readable Web Component code for the comparison:

• Don't define separate Classes if you use them only once
• Chain everything that can be chained in the Constructor
• Be smart with EventListeners, those good, old, inline handlers are powerful, this.onclick allows a Component user to overload the click event.
• No need for oldskool bind stuff
• No need for a connectedCallback, if you only work with shadowDOM (or already parsed global DOM)
• No need for a disconnectedCallback, any handlers attached to elements inside our Custom Element will be garbage collected
• DRY will only bloat your delivered code; GZip just loves that this.shadowRoot.querySelector("b").textContent repetition.
• <count> is an UnknownElement, perfectly valid to use for better semantic code
• The final GZip size for this Web Component is 296 Bytes, What does using a Library add?

"state" is just a location in memory

Like everyone who has ever done Assembly programming knows

Using the DOM (just a location in memory) as "state" not only shortens the code,
but also make count updates by changing the DOM directly possible.
Something that never works when using Frameworks or Libraries.

You can do a simple experiment with your 5 year old daughter. All you need is a pen and paper.

• She is the "Web Component", have her write a number on the paper.
• Now you "Global script" take the pen, strike through her number and write 42 on the paper.
• Ask her what the number on the paper is.