In a previous discussion, I expressed my desire to utilize Maquette as a foundational hyperscript language. Consequently, avoiding the use of maquette.projector is essential for me. However, despite successfully appending SVG objects created with Maquette to the DOM, it appears that the DOM fails to update accordingly. For instance, when trying the code snippet below, the expected behavior is to be able to create a circle by clicking a button. Although inspecting the DOM using Chrome Dev tools reveals that the SVG circle object has indeed been added, the DOM remains unupdated. How should I approach updating the DOM in this scenario?
var h = maquette.h;
var dom = maquette.dom;
var svg;
var svgNode;
var root;
var rootDiv;
function addCircle(evt) {
console.log("adding circle");
const c = h('g', [
h('circle#cool.sweet', {cx: '100', cy: '100', r: '100', fill: 'red'}),
]);
const g = dom.create(c).domNode;
svgNode.appendChild(g);
}
document.addEventListener('DOMContentLoaded', function () {
svg = h('svg', {styles: {height: "200px", width: "200px"}});
rootDiv = h('div.sweet', [
svg,
]);
root = dom.create(rootDiv).domNode;
document.body.appendChild(root);
svgNode = root.querySelector("svg");
const button = h('button', {
onclick: addCircle,
}, ["Add circle"]);
const buttonNode = dom.create(button).domNode;
root.appendChild(buttonNode);
});<script src="//cdnjs.cloudflare.com/ajax/libs/maquette/2.4.1/maquette.min.js"></script>The question arises: Why does appendChild fail to render anything on the screen?