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

<div id="scoped" be-scoped='{"count": 30}'></div>

...results in:

console.log(scoped.beEnhanced.beScoped.scope.count === 30)
//true

To subscribe to changes to the scope:

await customElements.whenDefined('be-enhanced');
const beScoped = await scoped.beEnhanced.whenResolved('be-scoped');
beScoped.scope.addEventListener('count', e => {
    console.log(e.detail);
});

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:

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.

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

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