Most DOM frameworks ship every component in your bundle, then gate initialization on whether the element exists. ValetJS gates loading instead. Components are fetched via dynamic imports only when their selector appears on the page.
Directives for behavior. Lit for components. MutationObserver for everything that shows up later.
A reusable piece of behavior that attaches itself to an existing DOM element, matched by a CSS selector, managing its own lifecycle without altering the element's markup.
She wrote a directive that lazy-loads images as they scroll into view.
Holy shit, that directive is cool af.
Valet.getDirective() to call its toggle() method.
Two directives that don't know about each other, communicating through Valet.emit() and Valet.on().
None of these component modules have been fetched yet. Their selectors aren't on the page. Click any button and watch the Network Activity panel: each file loads only when its element first appears, and the MutationObserver picks it up automatically.