be-scoped [TODO]

Create an EventTarget associated with the adorned element that can hold scoped state.

<div itemscope=💰 id="scoped" 💰='{"count": 30}'>
    <span itemprop=count></span>
    <input type=number 🛗 name=count>
</div>

...results in:

console.log(scoped.💰.count === 30)
//true

If scope.💰 is undefined, it's fine to start setting values into it. They will be absorbed into the scope object when it attaches.

To subscribe to changes to the scope:

scoped.addEventListener.addEventListener('💰.count', e => {
    console.log(e.detail.💰);
});

Adorning a custom element

If the desire is to add "scoping" to a custom element, use be-propagating instead.

Size of package, including custom element behavior framework (be-enhanced/be-hive):

Size of new code in this package:

Viewing Locally

1. Install git.
2. Fork/clone this repo.
3. Install node.
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.

Importing in ES Modules:

import 'be-exportable/be-scoped.js';

Using from CDN:

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