question-mark

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:closed
  • Created 5 years ago
  • Comments:14 (7 by maintainers)

github_iconTop 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!

Read more comments on GitHub >

github_iconTop 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...
Read more >
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...
Read more >
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 ......
Read more >
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...
Read more >
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...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found