Custom Elements

Upgrading

Upgrading is the concept of going from a piece of markup, such as <my-div data-teehee="💩"></my-div>, to an object in a tree.

Tactic	Explanation	Drawbacks
Brain transplant	A basic element is created by the parser and a callback registered by the developer is invoked at a later point to turn that basic element into a custom element.	Not having identity at creation-time is a giant mismatch with the rest of the platform.
Dummy replacement	A dummy element is created by the parser and replaced at a later point by an actual instance of the custom element created by invoking the constructor registered by the developer.	What about attributes on the dummy element? What about event listeners on the dummy element? What if the dummy element was removed from the tree (or moved around)? Causes mutation observer "spam"
Synchronous constructor	The constructor registered by the developer is invoked by the parser at the point the custom element is created and inserted into the tree.	Requires synchronization for document.write() for each custom element. Nested event loop. Does not work with asynchronously loaded assets.