Lit: Simple, fast web components
I mean, if you&#x27;re going to use web standards, why not just go all the way. Compare to <a href="https:&#x2F;&#x2F;legacy.reactjs.org&#x2F;docs&#x2F;add-react-to-a-website.html" rel="nofollow noreferrer">https:&#x2F;&#x2F;legacy.reactjs.org&#x2F;docs&#x2F;add-react-to-a-website.html</a>. Preview at <a href="https:&#x2F;&#x2F;andrewmcwatters.github.io&#x2F;custom-elements&#x2F;" rel="nofollow noreferrer">https:&#x2F;&#x2F;andrewmcwatters.github.io&#x2F;custom-elements&#x2F;</a>. Example at <a href="https:&#x2F;&#x2F;github.com&#x2F;andrewmcwatters&#x2F;custom-elements">https:&#x2F;&#x2F;github.com&#x2F;andrewmcwatters&#x2F;custom-elements</a>:<p><pre><code>    &#x2F;&#x2F; https:&#x2F;&#x2F;developer.mozilla.org&#x2F;en-US&#x2F;docs&#x2F;Web&#x2F;API&#x2F;Web_components&#x2F;Using_custom_elements
    &#x2F;&#x2F; Create a class for the element
    class LikeButton extends HTMLElement {
      static get observedAttributes() { return [&#x27;liked&#x27;]; }

      constructor() {
        &#x2F;&#x2F; Always call super first in constructor
        super();

        this.liked = false;

        &#x2F;&#x2F; Create a shadow root
        &#x2F;* const shadow = *&#x2F; this.attachShadow({mode: &#x27;open&#x27;});
        this.render();
      }

      get liked() { return this.hasAttribute(&#x27;liked&#x27;); }
      set liked(state) { this.toggleAttribute(&#x27;liked&#x27;, Boolean(state)); }

      attributeChangedCallback(name, oldValue, newValue) {
        this.render();
      }

      render() {
        const shadow = this.shadowRoot;

        if (this.liked) {
          shadow.innerHTML = &#x27;You liked this.&#x27;
          return;
        }

        shadow.innerHTML = `&lt;button onclick=&quot;this.parentNode.host.liked = true;&quot;&gt;
      Like
    &lt;&#x2F;button&gt;`;
      }
    }

    &#x2F;&#x2F; Define the new element
    customElements.define(&#x27;like-button&#x27;, LikeButton);</code></pre>