Thread

1. jchw · 1791089619 · focus · HN ↗

   For one thing, I just genuinely think WebComponents are a badly designed API that is weird and hard to use (how many people are using WebComponents without at least Lit, if not something much bigger?), and React is a relatively well-designed library that isn't really that bloated. There's not really much of a point in trying to argue since this is inherently subjective and people with different values are going to irreconcilably disagree. But, if you don't respect that some people hold this position, we're not going to make any progress towards a consensus.

   On the note of <dialog>, I recently tried to use <dialog> in a (React) application, and it did work pretty well, but I also found that in Firefox it is only practically possible to do a fade-in animation, not a fade-out one. That isn't really a critical issue for me, it is just an animation after all, but I find it unfortunate. I also find <dialog> to be a weirdly shaped API too: I don't really hate it, but I don't love it either. It feels awkward.

   I find this implicit view that developers that, for example, prefer React over WebComponents are making a suboptimal choice to be rather condescending and not really in the spirit of trying to see things from the other side. Wouldn't you want to focus on the strongest arguments and not the weakest ones? Maybe you've literally never heard anyone complain about WebComponents or Shadow DOM, but if so, I find that surprising. Certainly here on HN, I've seen a fair bit of WebComponents hate.

   I do, FWIW, realize that I've particularly focused on WebComponents, which this article doesn't actually name directly. But, I assume we're not talking about ditching React to implement our own component framework on top of the traditional DOM APIs, because that's what React already does...

   1. mg · 1791094775 · focus · HN ↗

      What do you not like about WebComponents?

      Say we want to make an icon that when clicked shows how often it was clicked. The webcomponent code seens quite sane to me:

         class HelloIcon extends HTMLElement {
            connectedCallback() {
              this.clickCount = 0;
      
              this.innerHTML = `
                <button class="icon">:)</button>
                <dialog>
                  <p>Hello, I was clicked 0 times</p>
                  <button class="close">Close</button>
                </dialog>
              `;
      
              const icon = this.querySelector('.icon');
              const dialog = this.querySelector('dialog');
              const closeBtn = this.querySelector('.close');
              const dialogText = this.querySelector('p');
      
              icon.addEventListener('click', () => {
                this.clickCount++;
                dialogText.textContent = `Hello, I was clicked ${this.clickCount} times`;
                dialog.showModal();
              });
      
              closeBtn.addEventListener('click', () => dialog.close());
            }
          }
      

      Try it here:

      <a href="https:&#x2F;&#x2F;plnkr.co&#x2F;edit&#x2F;0XUOLyM52xfFiIBu?open=index.html&amp;preview" rel="nofollow">https:&#x2F;&#x2F;plnkr.co&#x2F;edit&#x2F;0XUOLyM52xfFiIBu?open=index.html&amp;previ...

      1. marcosdumay · 1791128034 · focus · HN ↗

         &gt; The webcomponent code seens quite sane to me

         If that&#x27;s a joke, it passed over everybody&#x27;s head here. I can&#x27;t imagine it&#x27;s serious, but it still doesn&#x27;t sound like a joke to me.

Unofficial Hacker News client; not affiliated with Y Combinator.