Using this in the browser?

[trusktr]

Could there be a viable use case for using undom in the browser, to have a DOM-like API, but avoiding the performance cost of the real DOM?

Suppose, for example, we take something like A-Frame that gives us Custom Elements, but the purpose of those elements is to render to WebGL, and we actually don't need any DOM rendering. A-Frame is using DOM just for state management and as a component system, which makes it compatible with all the gazillion libraries that work with DOM (React, Vue, Angular, etc), making it possible to write declarative 3D WebGL scenes powered by Three.js under the hood.

Would it be possible to by-pass the real DOM and use undom with A-Frame, for example, in order to possibly gain a performance improvement from using a pure-JavaScript DOM? For example, would it be possible to use React and A-Frame in the browser, and actually render to WebGL? It would be interesting to see how this can improve performance, if it is possible.

[developit]

Hiya @trusktr! I've used Undom for that exact use-case. In the case of A-Frame, it's already possible to accomplish this in the browser by using a disconnected DOM:

const document = new DOMParser().parseFromString('<div id="base"></div>', 'text/html')
const base = document.getElementById('base')