createDom produces intermediate DOM states

I am trying to combine Maquette and A-Frame to render a WebVR scene and am running into an issue with intermediate DOM states.

When Maquette creates a new DOM node it attaches the new DOM node to the parent node before adding attributes and properties: https://github.com/AFASSoftware/maquette/blob/master/src/maquette.ts#L789-L795. This causes an issue with A-Frame which uses Custom Elements that watch for and react to changes in the DOM. When Maquette attaches the new DOM node to the parent, it is incomplete and thus creates an intermediate and invalid DOM.

These intermediate DOM states are problematic because they’re not rendering what the developer expects and they prematurely trigger observers and proxies.

As a comparison, A-Frame resolves these issues w/ React by explicitly updating attributes in componentDidUpdate(): https://github.com/aframevr/aframe-react/blob/master/src/index.js#L91. But I don’t think Maquette offers a similar mechanism to update the DOM before it’s attached.

I think the most straight-forward solution would be to call initPropertiesAndChildren() on domNode right before it’s added to the DOM.

[RickHoving]

Hi Paul, we want to address this issue in maquette 3.0. We can address this issue further at #118

[devpaul]

That’s fair. It would be easy to introduce more functionality like the delayAttach property or a beforeAttach event if it becomes necessary. I’ve submitted a PR w/ your suggested approach!