Web components APIs are low level. They allow code to know where to do things (the element instance, the shadow root) and when to do them (constructor, the lifecycle callbacks).

They are not a direct analog to modern frameworks, and it's completely expected that developers will use helper libraries to get better DX like declarative and reactive components.

I work on two such libraries: lit-html and LitELement. Combined they give you just as much declarative and reactive power as frameworks, much better DOM and style isolation, better performance, and smaller size than just about anything else out there.

Compare a styled Hello World example to React or any other framework:

    import {LitElement, html, css, property, customElement} from 'lit-element';

    @customElement('hello-world')
    class HelloElement extends LitElement {

      static styles = css`
        :host {
          display: block;
        }
        p {
          background: pink;
        }
      `;

      @property() name;

      render() {
        return html`<p>Hello ${this.name}!</p>`;
      }
    }

(this example uses decorators because I think it's clearer, but we support plain JS as well)