Adds support for property binding over attribute binding

[au5ton]

Proposed changes

This pull request adds supports for a React Component's props to by passed by a Custom Element's Properties. This allows for complex objects, reference types, and even functions to be passed to a React Component without being serialized.

This is done by making 2 small changes + a new example under examples/property-binding.html:

// In `custom_element.js`
class ComponentElement extends HTMLElement {
    _props = {}
    get props() {
      return this._props;
    }
    set props(p) {
      this._props = p;
      // only fire "onUpdate" if mountpoint is present
      if (!!this._mountPoint) {
        onUpdate(this, this._mountPoint);
      }
    }

    /* (...) */
  }

// In `core.js`
function getProps(element, attributes) {
  // If the `props` property is present, get that
  if('props' in element) {
    return element.props
  }

  /* (...) */
}

Motivation

Limitations of Attributes

remount is a fantastic library, but unfortunately it requires that props passed to React be serialized to JSON before being passed.

<x-greeter props-json='{"name":"John"}'></x-greeter>

Accepting props as a JSON object is great because you can account for complex objects and don't have to deal with the limitation that attributes must be lower-case.

This is very useful on its own, but unfortunately makes it impossible to pass certain data types, such as:

• Class instances, such as HTMLElement, Set, etc.
• Functions, such as callbacks
• Reference types as references, such as Promises
• (Probably other limitations)

Enter Properties

An Element's Properties are accessed from the JavaScript end. They can be read and written using a JavaScript reference to the Element as an object.

Obviously, one could access the properties of a custom element by doing document.getElementById() or something else, but that is a chore and doesn't make sense for the declarative nature of a Web Component.

<x-greeter props-json='{"name":"John"}'></x-greeter>
<script>
// Am I supposed to do this for every prop I want to set??
const instance = document.querySelector('x-greeter')
instances.setAttribute('props-json', '...')
</script>

Unfortunately, this isn't something that we can solve with native HTML, but this is something that a variety of web frameworks have already solved.

How other web frameworks do it

• Lit

  <custom-element my-attr="123" .myProperty=${123}>

• Angular

  <custom-element [attr.my-attr]="123" [myProperty]="123">

• Vue.js

  <custom-element :my-attr="123" .myProperty="123">

• React (now)

  <custom-element my-attr="123" ref={el => el.myProperty = 123;} />

• React (future)
  • TBD

[au5ton]

Sorry, I accidentally included the changes in #92 in this PR. Let me know if I will need to revert those.

[au5ton]

I also have a separate branch for adding support for slotting children in the Shadow DOM, but that's not included in this pull request to keep it as focused as possible: https://github.com/au5ton/remount/compare/feature/props-from-properties...au5ton:remount:feature/slot-children?expand=1