"𝙎𝙢𝙖𝙡𝙡𝙚𝙨𝙩𝙚𝙙𝙞𝙣𝙜" : making a Web Component 29% smaller

Template literals are great, but they suck up bytes, as meaningless white space and \n newlines are still included in the minified file.

no need for a createElement('template') when we only want the innerHTML once

template/content should not be added in the connectedCallback (as it can run multiple times)

super() sets and returns the this scope

attachShadow() sets and returns this.shadowRoot

so everything can be chained:

    constructor() {
        super()
            .attachShadow({ mode: 'open' })
            .innerHTML = "<style>*{font-size:200%}...

no need for a MyCounter class definition when it is used only once

    customElements.define('my-counter', class extends HTMLElement {}

Nearly all of the 51 examples use inline event handlers (notation).

    render() {
        return html`
        <button @click="${this.dec}">-</button>
        <span>${this.count}</span>
        <button @click="${this.inc}">+</button>
        `;
    }

Then we can do that as well

• we have to add extra code to find the inc() and dec() methods on the element (which libraries do for you under the hood)
• the id references on the buttons are no longer needed

    <button onclick="this.getRootNode().host.inc()">
    <button onclick="this.getRootNode().host.dec()">

The Component uses shadowRoot to encapsulate styles and content. The id on <span id="count"> is not required because we can target the only <span> that exists in shadowDOM

All the refactored connectedCallback does is set the span innerHTML to 0

    connectedCallback() {
        this.update(this.count);
    }

Set the default 0 in HTML, and the connectedCallback is no longer required

    "<span>0</span>"+

remove not required white space and ; from CSS

remove not required quotes from HTML attributes, because the Browser will add them

    <button onclick=this.getRootNode().host.inc()>
    <button onclick=this.getRootNode().host.dec()>

The inc, dec and update methods are not required, when count is made a getter/setter

DRY (Don't Repeated Yourself) is great from a code maintenance Point-of-View. But from a delivery and performance PoV you do not want to be DRY; GZip loves repetitions
* {font-size:200%} is applied to 2 elements only (button and span)
Setting font-size:200% on both elements creates a larger file, but a smaller GZipped file!
(And the CSS parser has less work to do)

.count-- > needs that extra space, to close the onclick definition, or the minifier will add an - escape code, adding 4 bytes.

<span> can be replaced with <p>

no this.count = 0; required because <p>0</p> is the state

replacing seagreen and white with shorter #xxx notation doesn't save extra bytes in this case, because the # doesn't exist yet in the code, thus requires extra GZip encoding bits.