If Web Components are so great, why am I not using them?

I have no idea what Web Components are or why I should care. Is that the problem?

Nope, not a problem. Because webcomponets fix a problem that nobody is having in a way that basically only benefits angular.

They are strong encapsulation around a user defined component. So if you wanted to, for example, lock down the styling on your widget, you can! (hurray?)

My cynical thoughts of why google pushes this is because it's another route to get in front of adblock. Make an ad component and now it's a lot harder for an addon to change or remove that component (and easier for the website to detect when that happens).

Because React is good enough. I think that's mostly why.

Here's legacy React's like_button.js, without JSX, from their old documentation:

    'use strict';

    const e = React.createElement;

    class LikeButton extends React.Component {
      constructor(props) {
        super(props);
        this.state = { liked: false };
      }

      render() {
        if (this.state.liked) {
          return 'You liked this.';
        }

        return e(
          'button',
          { onClick: () => this.setState({ liked: true }) },
          'Like'
        );
      }
    }

    const domContainer = document.querySelector('#like_button_container');
    const root = ReactDOM.createRoot(domContainer);
    root.render(e(LikeButton));

Here's the equivalent using the Web Components specification[1]:

    // https://developer.mozilla.org/en-US/docs/Web/API/Web_components/Using_custom_elements
    // Create a class for the element
    class LikeButton extends HTMLElement {
      static get observedAttributes() { return ['liked']; }

      constructor() {
        // Always call super first in constructor
        super();

        this.liked = false;

        // Create a shadow root
        /* const shadow = */ this.attachShadow({mode: 'open'});
      }

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

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

      connectedCallback() {
        this.render();
      }

      render() {
        const shadow = this.shadowRoot;

        if (this.liked) {
          shadow.innerHTML = 'You liked this.'
          return;
        }

        shadow.innerHTML = `
      Like
    `;
      }
    }

    // Define the new element
    customElements.define('like-button', LikeButton);

The React API is slightly nicer to use, especially with JSX.

[1]: https://github.com/andrewmcwatters/custom-elements

Even though I've never used Angular, and do not build web apps at all, we have put custom HTML elements to great use at work. It's also not about locking down styling, but it's a neat way to package up _functionality_ and behaviour that otherwise would be just defined ad-hoc in JavaScript, and to provide a dead simple way to (re)use that functionality in a declarative way from HTML.

When you see this, it’s a sign that someone built their web components with React/Angular/Vue on the brain.

The tech is fine. You can achieve amazing progressive enhancement with web components by understanding and effectively using and . However, many web component developers never learn this.

The problem you’re describing is a training/marketing issue, as discussed in the post.