What's Actually Wrong with Web Components

Ladies and gentlemen, we continue digging into the intricacies of web components. I made a bench here — comparing frameworks ($mol/Lit/Symbiote) on TodoMVC. Seems like we're talking about one thing, but the bench is about something else, right? Nope — to understand web components you need frameworks that put them front and center, the ones that "bet on them." Here's what I managed to figure out: First. Memory: 124 bytes per web component, and 16 bytes per JS object. An order of magnitude difference — that's a lot, and without virtualization the interface will most likely lag. // Lit: each todo-item is an HTMLElement (C++ heap, ~124 bytes minimum) @customElement("todo-item") export class TodoItem extends LitElement { ... } // <todo-item> immediately allocates a DOM node on createElement // Symbiote: same deal, each <todo-item> = HTMLElement class TodoItem extends Symbiote { ... } TodoItem.reg('todo-item'); // $mol: component is a JS object. DOM is created ONLY on render. //