The Failed Promise of Web Components

> Can we fix this?

Sure, by returning to basics.

Let's assume that Web Component is a DOM element with a code associated with it + lifecycle events.

Here is how Components are done in Sciter ( https://sciter.com )

1. CSS has got `prototype` property:

   div.my-component { prototype: MyComponent url(script/components.js); }

where MyComponent is the name of class in JS, url (optional) is an URL where this MyComponent can be found.

2. In script that custom component is usually represented by ES6 class (+ decorators)

    class MyComponent extends Element {
       // lifecycle event/method
       componentDidMount() {  }
       // lifecycle event/method 
       componentWillUnmount() {  }

       // component specific methods
       foo() { }
       bar() { }

       // event handlers - decorated functions
       @event("mousedown")
         onMouseDown(evt) { }

       @event("click", "button#submit")
         onSubmit(evt, button) { }
      
       @event("change", "input.name")
         onNameChange(evt, input) { }
    }

and that's it. Sciter lives with this schema more than 10 years - proven to be very convenient and flexible.

Yet simple: one property `prototype` + simple wiring of lifecycle events.