Dart Polymer: Removing element from DOM seems to be broken, when compiled to JS?

Question

I'm trying to remove a element from DOM, which was added via:

document.body.children.add(new DivElement()..innerHtml = "Hello World");

The code

document.body.children.remove(document.body.children.last);

or

document.body.children.removeLast();

works fine in Dartium but fails in Chrome when compiled to JS with an "Assertion failed"-Error. The failed assertion is: assert(node instanceof Node); and is placed in shadow_dom.debug.js:3364:5. It seems that the node to remove isn't an instance of Node?

Any workarounds for that? Dart SDK version is 1.2.0, Chrome version is 32.0.1700.76 m.

Answer 1

From jmesserly on the bug:

Ah, this is a known limitation from Shadow DOM. Try:

document.querySelector('body')

Unfortunately, from previous bugs filed on https://github.com/polymer/ShadowDOM it is apparently not possible to fix this in the polyfill.

The only problematic members are directly accessing "document" and navigating the tree. As soon as you call a method (like querySelector), anything after that will work. If you use "body" a lot, then try:

final body = document.querySelector('body');