One way web components can evolve to help this is with declarative custom elements, a feature many of the people who've worked on web components have wanted to pursue.

The idea is that you could define a custom element, with style and DOM encapsulation, purely in markup with either no script at all, or script only for progressive enhancement.

There are still a few features that need to be finalized and proposed, like Template Instantiation [1] to allow for expressions in HTML. When put together it would look something like this:

    <custom-element name="x-summary" attributes="href">
      <template>
        <style>
          ::slotted(h1) { color: blue; }
        </style>
        <article>
          <a href="{{ href }}"><slot name="title"</a>
          <slot></slot>
        </article>
      </template>
    </custom-element>

Which you can then use like:

    <x-summary href="http://...">
      <h1 slot="title">Hello</h1>
      <p>This article is about...</p>
    </x-summary>

Combine this with HTML modules[2] so you can import these definitions and you could build reusable widgets without script, and some UAs could evolve their script settings to allow HTML modules but not JavaScript modules for a more locked down experience.

From there I'd hope we could find a way to use worklets to allow components to use script, but limit them to only the component's shadow DOM, not the global DOM, and not have default access to APIs like XHR and fetch, or other APIs used for fingerprinting.

[1]: https://github.com/w3c/webcomponents/blob/gh-pages/proposals... [2]: https://github.com/MicrosoftEdge/MSEdgeExplainers/blob/maste...