be-elevating

Elevate local property value to host or upstream peer element when user initiates event.

Example 1a

<my-custom-element>
    #shadow
        <input disabled name=hostProp be-elevating>
</my-custom-element>

What this does:

It passes the value of the input element to the host element's hostProp property any time (and only when) the input element's "input" event fires.

This is shorthand for:

Example 1b

<host-element>
    #shadow
        <input disabled be-elevating='to host prop.'>
</host-element>

which is shorthand for: [Untested]

<host-element>
    #shadow
        <input be-elevating='of value to host prop on input.'>
</host-element>

Example 1c

<host-element>
    #shadow
        <input 
            data-test='this text should appear on input.' disabled 
            be-elevating='of dataset:test to some string prop.'
        >
</host-element>

Example 1d

<host-element>
    #shadow
        <input 
            data-test='this text should appear on input.' disabled 
            be-elevating='of dataset:test to some string prop on change.'
        >
</host-element>

Same thing is done for button element, which supports value attribute.

Example 2a

<host-element>
    #shadow
        <my-peer-element -my-string-prop></my-peer-element>
        ...
        <input be-elevating='to -my-string-prop.'>
</host-element>

This sets:

oMyPeerElement.myStringProp = oInput.value

whenever the input element emits event "input".

Example 2b

<host-element>
    #shadow
        <my-peer-element -my-string-prop></my-peer-element>
        ...
        <input be-elevating='to -my-string-prop on change.'>
</host-element>

Viewing Demos Locally

Any web server that can serve static files will do, but...

1. Install git.
2. Fork/clone this repo.
3. Install node.js.
4. Open command window to folder where you cloned this repo.

5. npm install

6. npm run serve

7. Open http://localhost:3030/demo/ in a modern browser.

Running Tests

> npm run test

Using from ESM Module:

import 'be-elevating/be-elevating.js';

Using from CDN:

<script type=module crossorigin=anonymous>
    import 'https://esm.run/be-elevating';
</script>