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

[Daniel Beeke]

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?

[Daniel Beeke]

Could it be that it is not a good practice to save parts into a variable and use that variable multiple times?

[Andrea Giammarchi]

unrelated: watch out SQL injections

---

at that place I do not have an object

you always have an object for weak references so trying to see if that's the issue might help:

// try either
this.html.for(document, key)`<your-thing />`;

// or ...
this.html.for(this, key)`<your-thing />`;

Could it be that it is not a good practice to save parts into a variable and use that variable multiple times?

you should never cache anything with uhtml, except that Classy thing which is fine, as everything is already cached behind the scene and if you break some node order it bails out.

that being said, those are big files, so if you could reproduce a failure without all that bloat around (as I've no idea what I am looking for) it'd surely help me more, thanks!

[Andrea Giammarchi]

Could it be that it is not a good practice to save parts into a variable and use that variable multiple times?

on a second thought ... what do you mean? could you simplify at least the logic so I can tell you what's OK and what's maybe not OK or what's a bug?

[Daniel Beeke]

Thanks it works. I will investigate .for().

Yeah.. thanks for pointing out the query injection problem. It goes to a public API that is read only.. nevertheless now at moments I get a 500 HTTP back so.. probably should be fixed :)

Thansk for the help!

[Daniel Beeke]

Is this okay? I would think it is not very good.

const example = html`<button onclick=${() => this.remove()}>Remove</button>`

const context = html`<div>${
if (a ? html`<div>${example}</div>` : html`<span>${example}</span>`
}</div>`

If I change to:

const example = () => html`<button onclick=${() => this.remove()}>Remove</button>`

const context = html`<div>${
if (a ? html`<div>${example()}</div>` : html`<span>${example()}</span>`
}</div>`

I would think it would be better.

[Andrea Giammarchi]

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>`;

[Andrea Giammarchi]

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(...)

[Daniel Beeke]

Thanks, yes remove() was an example.. I could be replaced with myAction()