TypeError: The HTMLDivElement.align setter can only be used on instances of HTMLDivElement

[k-j-kim]

When copying a DOM object, following line fails:

child[i] = _clone(parent[i], depth - 1);

clone/clone.js

Line 156 in e3f252d

child[i] = _clone(parent[i], depth - 1);

TypeError: The HTMLDivElement.align setter can only be used on instances of HTMLDivElement

It seems like calling Object.getPrototypeOf on a DOM element gives HTMLDivElementPrototype which has a slightly different behavior than HtmlDivElement.

Reproducible in Safari Version 10.0 (10602.1.50.0.10)

[rictic]

Hm, maybe we should use the cloneNode method when dealing with document nodes?

Can confirm that this fails in Safari 10.1:

Object.create(Object.getPrototypeOf(document.createElement('div'))).align = 'foo'

but this does not:

document.createElement('div').cloneNode().align = 'foo'

We'd want to copy over properties afterwards. I don't think we can clone event listeners.

[k-j-kim]

btw, Object.create( Object.getPrototypeOf(document.createElement('div'))).align = 'foo' will fail in Chrome (Version 57.0.2987.133 (64-bit)) as well, although with a different error message:
Uncaught TypeError: Illegal invocation.

Agree that with document nodes, cloneNode should be used.

[kermit-the-frog]

Any updates on this?

[tomhooijenga]

There are more cases where Object.create(Object.getPrototypeOf(...)) fails. For example: const url = clone(new URL('http://example.com')) throws the same Uncaught TypeError: Illegal invocation in chrome and TypeError: 'set href' called on an object that does not implement interface URL. in Firefox