Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

createDom produces intermediate DOM states

See original GitHub issue

Issue Description

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.

Issue Analytics

State:
Created 6 years ago
Comments:14 (7 by maintainers)

Top GitHub Comments

1reaction

RickHovingcommented, Sep 7, 2017

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

0reactions

devpaulcommented, Aug 22, 2017

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!

Top Results From Across the Web

Virtual DOM and Internals - React

This approach enables the declarative API of React: You tell React what state you want the UI to be in, and it makes...

Building an App with the Vanilla DOM API (2020) - ui.dev

In this post, you'll learn everything you need to know to build a simple web app using only vanilla DOM APIs including creating...

Shadow DOM v1 - Self-Contained Web Components

Use shadow DOM to compartmentalize an element's HTML, CSS, and JS, thus producing a "web component". Example - a custom element attaches shadow ......

Create a DOM Element - JavaScript Tutorial

This tutorial shows you how to create a DOM element and attach it to the DOM tree. To create a DOM ... The...

How to Create and Manipulate DOM Nodes in Vanilla JS

There are several ways to create DOM nodes. ... If we have a select list and the initial application state is such that...