webcomponent: better re-renders

[PatrickJS]

We're destroying the view when a component updates to work around not having root nodes. We need a better ways to detect changes

• We need to introduce a Proxy per element to determine props/methods/state and rendering queue.
  • we need a way to reactively update a prop with a direct reference to the component instance
• We also need to allow devs to query the DOM in onUpdate or onMount.
  • we need a way to let the developer do native DOM queries
• We need a way to separate bindings and DOM updates when state changes.
  • we only want to selectively add/remove bindings
• We prevent re-rendering of For elements
  • we need a smarter way to handle re-rendering based on key values
• We need to introduce a rendering queue or determine when the component is stable before DOM changes are committed. We also need to determine all child components within the webcomponent

Right now we're forced to update the DOM before running these lifecycle methods which can turn into multiple rendering cycles.

The main cause to this issue is the updateBindings call that gets called during every render.