be-bound

be-bound is an attribute-based decorator/behavior that provides limited "two-way binding" support.

Lingo

<my-host-element>
    #shadow
        ...
        <my-child-element be-bound='{
            "propBindings":[
                ["myChildElementProp", "myHostElementProp"]
            ]
        }'>
            ...
        </my-child-element>
</my-host-element>

So basically, this keeps the two props in sync.

Limitations:

1. Binding is 100% equal -- no computed binding, just direct copy of primitives.
2. Object support is there also, with special logic to avoid infinite loops. A guid key is assigned to the object to avoid this calamity.
3. If the two values are equal, no action is taken.
4. The two properties must be class properties with setters and getters, either defined explicitly, or dynamically via Object.defineProperty. Exceptions are if the child is a(n):
   1. input element.
   2. form element.

The exceptions -- (4.1, 4.2, event handler "input" is used)

Shortcut:

<my-host-element>
    #shadow
        ...
        <my-child-element be-bound='[["myChildElementProp", "myHostElementProp"]]'>
            ...
        </my-child-element>
</my-host-element>

If myChildElementProp is "value", just do:

<my-host-element>
    #shadow
        ...
        <my-child-element be-bound='["myHostElementProp"]'>
            ...
        </my-child-element>
</my-host-element>

If only one binding:

<my-host-element>
    #shadow
        ...
        <my-child-element be-bound=myHostElementProp>
            ...
        </my-child-element>
</my-host-element>

Real world examples

scratch-box

The child element prop key can also point to a subpath, if it starts with a ".". This is demonstrated here

Tie Breaking

In the case that the initial values both exist at point of contact (due for example to differing default values), by default the tie-breaker goes to the host, but the user can swap the tie-breaker.

Options

Each binding can have a third element of the array that allows for fine-tuning the binding.