@barneycarroll/life-cycle

<life-cycle/>

<life-cycle/> is a custom element for framework-agnostic lifecycle hooks.

What?

The various view frameworks of the world have different APIs of exposing the underlying DOM nodes & fundamental entity lifecycle (create, update, destroy) - some don't expose any at all. <life-cycle/> forwards each of the DOM lifecycle callbacks to corresponding property methods declared on instantiation, allowing CRUD directives and access to local DOM objects. Meanwhile, it applies a style of display:contents so as not to affect rendering.

How?

Each lifecycle method on the custom element prototype will call corresponding properties on any <life-cycle/> index, with the same signature:

Custom element method	<life-cycle> property
connectedCallback	connected
disconnectedCallback	disconnected
adoptedCallback	adopted
attributeChangedCallback	attributeChanged

Because attributeChanged requires that observed attributes be determined ahead of time, we reserve an attribute called simply attribute to trigger its execution.

Why?

As an example, Hyperapp - a minimal virtual DOM library with a strong remit on functional purity - doesn't expose any API for interfacing with generated DOM; meanwhile, an application written with seview would want to avoid library-specific APIs as far as possible in order to allow the same application view code to run with interchangeable rendering engines. With the <life-cycle/> element, either - or both - of these can be used in a way that allows setup & teardown logic per node, conditional updates, and DOM node exposure.