(status: REWRITING it into different project) incremental runtime that bring both simplicity and power into webdev (buildless, cross-language, data-driven)
Before someone complain about the bundle size (hopefully render-scope.js stay small), here is some custom-element with limited functionality
Scope: .parentElement
[ ] <style-scoped src="..."> extends HTMLElement
[ ] <script-scoped src="..."> extends HTMLElement
Scope: :host Element
Warning: most likely this is not needed if every logic are lazy loaded (i.e await import()) except for <body-scope>
[ ] <ref-scope> extends HTMLElement. Only bind :ref attribute and event handler
[ ] <style-scope> extends HTMLElement. Only bind CSS variable (i.e <div --css-var-name="prop">) and event handler
[ ] <bind-scope> extends HTMLElement. Only bind either attribute or .property + event handler
[ ] <body-scope> extends HTMLBodyElement. Similar to <render-scope> but bind entire body page. Just replace your <body> with <body-scope> and the entire page will be interactive. I call this slow global mode.
Before someone complain about the bundle size (hopefully
render-scope.js
stay small), here is some custom-element with limited functionalityScope:
.parentElement
<style-scoped src="...">
extends HTMLElement<script-scoped src="...">
extends HTMLElementScope:
:host
Element