search

DrSensor / nusa

(status: REWRITING it into different project) incremental runtime that bring both simplicity and power into webdev (buildless, cross-language, data-driven)
MIT License
4 stars 0 forks source link

Granular custom-element #20

Closed DrSensor closed 1 year ago

DrSensor commented 2 years ago

Before someone complain about the bundle size (hopefully render-scope.js stay small), here is some custom-element with limited functionality

Scope: .parentElement

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.
DrSensor commented 1 year ago

Not needed because #41. At query phase, the bundle size only weight <2kB.