be-hive

Inheriting behiviors

be-hive lets it snow in August.

be-hive allows us to manage and coordinate the family, or HTML frimework of be-decorated element behiviors / decorators.

Without be-hive, the developer is burdened with plopping an instance of each decorator inside each shadow DOM realm.

With the help of the be-hive component, the developer only has to plop a single instance of be-hive inside the Shadow DOM realm, like so:

<be-hive></be-hive>

This signals that the Shadow DOM realm is opting-in, and allowing element behiviors, and will inherit all the behiviors from the parent Shadow DOM realm, by default.

But the child Shadow DOM realm can develop a personality of its own by:

1. Adding additional behiviors by adding specific be-decorated elements inside the be-hive instance tag.
2. Avoiding naming conflicts by overriding the attribute associated with the inherited behivior.
3. Preventing inheriting unwanted behiviors from affecting the child Shadow DOM realm.
4. Start over. Only decorator elements manually added inside the Shadow DOM (preferably inside the be-hive tag, for inheritance to work within)

Syntax for customizations of inherited behiviors:

<be-hive overrides='{
    "be-sharing":{
        "ifWantsToBe": "familial"
    },
    "be-gracious": {
        "ifWantsToBe": "respectful"
    },
    "be-disobedient-without-facing-the-consequences": {
        "block": "true"
    }
}'></be-hive>

Be like Sirius Black

If the inherited behiviors are all just too odious to inherit, there's an option to start again:

<be-hive be-severed>
</be-hive>

Adding back a personality trait [Untested]

If one Shadow DOM blocks an inherited behivior, child Shadow DOMs can bring it back within their (and descendent) shadow DOM realms thusly:

<be-hive overrides='{
    "be-disobedient-without-facing-the-consequences": {
        "unblock": "true"
    }
}'></be-hive>

Scoped templates [TODO]

be-hive can also manage "scoped templates" -- templates contained inside be-hive elements in higher up ShadowDOM can "cascade down".

<my-element>
    #shadow
        <be-hive>
            <template id=open-menu>
            ...
            </template>
        </be-hive>
        <my-child-element>
            <be-hive>
            </be-hive>
        </my-child-element>
</my-element>

from within my-child-element:

const openMenuTempl = await this.querySelector('be-hive').whenDefined('open-menu');

Can also programmatically register template:

this.querySelector('be-hive').define(templ);

API

be-hiviors are registered via function:

register(ifWantsToBe: string, upgrade: string, extTagName: string);

in be-hive/register.js

be-hive then determines which be-hiviors to inherit.

[TODO] Provide a "registry" for be-hiviors to read common meta information. Create a property that is an ES6 proxy, transmits event on all prop changes?