vdom.createDom creates intermediate DOM states

[devpaul]

I am working with A-Frame and Dojo 2 to render a scene in VR for a demo I've been working on called Derpymon. I'm running into an issue with A-Frame's custom element throwing an exception due to missing required attributes (specifically A-Frame's Asset Management System has an element a-asset-item that expects a src attribute).

The problem is due to vdom's createDom() function. When creating v elements it will immediately attach them to the DOM before adding their attributes. I was able to "fix" my issue by moving initPropertiesAndChildren() before attaching to the DOM.

I'm not sure if this is a viable permanent solution or if there are reasons for attaching an element to the DOM before adding attributes; e.g. maybe some events are fired after attributes are added that may not be caught otherwise. React's provides a work-around for these cases by adding a special keyword ref that allows access to the element. A-Frame's React wrapper uses ref to ensure attributes are available, so another viable solution for Dojo may be to add a special Symbol that provides access to the element before adding it to the DOM.

As custom elements become more prevalent we'll definitely need a solution to this issue. Otherwise, we risk not being able to use custom elements with required attributes (or other similar expectations) with Dojo. FWIW, I've had a previous discussion with Maquette trying to come up with a solution in AFASSoftware/maquette#110.

Package Version: 0.2

Code
Here's a link to the problematic implementation of the custom-element:

https://github.com/devpaul/derpymon/blob/master/src/widgets/Assets.ts#L16-L18

Expected behavior:

Attributes should be attached to the element:

<a-asset-item src="./path/to/model.obj">

Actual behavior:

The element is initially rendered without attributes:

<a-asset-item>