be-enhanced

be-enhanced provides a base class that enables "casting spells", or enhancing server-rendered DOM elements based on cross-cutting custom attributes. These base classes can also be used during template instantiation for a more optimal repeated web component scenario.

be-enhanced, which focuses on adding custom properties to an element, and be-hive, which focuses on attaching the custom property based on the matching custom attribute, together form a user-land implementation of this proposal, which has garnered an incredible amount of love, support, attention and helpful feedback.

be-enhanced provides a much more "conservative" alternative approach to enhancing existing DOM elements, in place of the controversial "is"-based customized built-in element standard-ish. There are, however, a small number of use cases where the is-based built-in approach may be the preferred one.

In contrast to the "is" approach, we can apply multiple behaviors / decorators to the same element:

#shadow-root (open)
<black-eyed-peas 
    be-on-the-next-level=11
    be-rocking-over-that-bass-tremble
    be-chilling-with-my-motherfuckin-crew
></black-eyed-peas>

which seems more readable than:

<is-on-the-next-level level=11>
    <is-rocking-over-that-base-tremble>
        <is-chilling-with-my-motherfunckin-crew>
            <black-eyed-peas></black-eyed-peas>
        </is-chilling-with-my-motherfuckin-crew>
    </is-rocking-over-that-base-tremble>
</is-on-the-next-level>

Not to mention concerns about performance. And then there's this.

Priors

be-enhanced's goals are quite similar to what is achieved via things that go by many names.

We prefer "decorator" as the term, but "[cross-cutting] custom attribute", "directive", "behavior" and especially "progressive enhancements" are also acceptable terms.

Differences to these solutions (perhaps):

1. This can be used independently of any framework (web component based).
2. Each decorator can be imported independently of others via an ES6 module.
3. Definition is class-based, but with functional reactive ways of organizing the code ("FROOP")
4. Applies exclusively within Shadow DOM realms.
5. Reactive properties are managed declaratively via JSON syntax.
6. Namespace collisions easily avoidable within each shadow DOM realm.
7. Use of namespaced properties allows multiple vendors to apply different enhancements simultaneously.
8. be-enhanced provides "isomorphic" support for using the same declarative syntax while transforming templates during template instantiation, as well as while the DOM is sitting in the live DOM tree. But the critical feature is that if the library is not yet loaded during template instantiation, nuk ka problem, the live DOM decorator can apply the logic progressively when the library is loaded. Meaning we can punt during template instantiation, so that render blocking is avoided. And if the library is loaded prior to template instantiation, it can still be supplemented by the live DOM decorator, but the initial work performed during the template instantiation can be skipped by the live DOM decorator.

Prior to that, there was the heretical htc behaviors.

Examples of constructing a be-enhanced progressive enhancement decorator:

The be-enhancement api

be-enhancement commits the cardinal sin of attaching a custom property gateway, "beEnhanced" on all Elements. Being that the platform has shown little to no interest in providing support for progressive enhancement over many decades when such solutions have proven useful, we should feel no guilt whatsoever.

To set a value on a namespaced property (e.g. via framework), do the following:

case base = myElement.beEnhanced.by.aButterBeerCounter;
Object.assign(base, {count: 7});

The intention here is even if the element hasn't been upgraded yet, property settings made this way should be absorbed into the enhancement once it becomes attached.

Event Notifications

Be-enhancement element decorators/behaviors typically don't, by default emit events that get bubbled up the DOM tree.

To subscribe to an event:

const myEnhancement = await myElement.beEnhanced.whenDefined('my-enhancement');
myEnhancement.addEventListener('resolved', e => {

})