DOMException: The supplied node is incorrect or has an incorrect ancestor for this operation.

Hi Andrea,

I have a strange bug. Maybe it is because of nesting things in the wrong way.

It happens at: http://rdf-form.danielbeeke.nl/ If you scroll down till you see a form. There is a field Author. If you empty it, type something that it would not find, click on Add sghfghdg as text without reference.. Then it will crash with:

DOMException: The supplied node is incorrect or has an incorrect ancestor for this operation.

Source code: https://github.com/danielbeeke/rdf-form/blob/master/src/RdfForm.ts https://github.com/danielbeeke/rdf-form/blob/master/src/FormElements/FormElementBase.ts

I have not yet used html.for(object)`` at that place I do not have an object. I only have a key. Would .for help in this situation?

[WebReflection]

In few words, don’t over-cache anything, as the result will be likely slower instead, and you’re not supposed to manually move parts around, that’s responsibility of udom to drop, add, or move, nodes … you never need to take care but if you need same node as reference, you need to use .for(...)

[WebReflection]

In any case, if by “save parts into a variable and use that variable multiple times” you mean store a node into a variable, you can’t reuse that variable in more than a place for the simple reason that a node is a node, and the tree-differ can’t do anything if you arbitrary moves nodes that the tree-differ is handling already.

Is this okay?

no, it’s not, you’re moving a node manually around and you shouldn’t.

On top of that, this.remove() won’t remove the element but its outer most container, if it’s a DOM node, or it throws … that’s an arrow function, the context in your example is unknown.

If I change to …

to be honest, I’d write this one:

const remove = () => this.remove();
const context = html`<div>${a ?
  html`<div><button onclick=${remove}>Remove</button></div>` :
  html`<span><button onclick=${remove}>Remove</button</span>`
}</div>`;