Compatibility with Angular JS - manual bootstrap fails on document.body and document.documentElement when using Platform.js

[paquettea]

This occurs only when I add Platform.js to my app (first script loaded)

Using the attribute ng-app to start the application always work. This issue occurs when the angular app is manually bootstrapped with

angular.bootstrap(document.body,["app"]);

I get
Failed to execute 'replaceChild' on 'Node': The new child element is null.

The call is in angular.js, in the directive compiler, calling
parent.replaceChild(newNode, firstElementToRemove);

https://ajax.googleapis.com/ajax/libs/angularjs/1.2.1/angular.js
Line 6469

newNode seems to be a comment node wrapped by ShadowDom polyfill for the ng-view element.

Here is a fiddle that reproduces the issue: http://jsfiddle.net/AH8hE/2/
Note the commented code in the javascript panel, replace the working code by the failing one to see the error in the console

I'm new to polymer so maybe i'm missing something, but this surely should'nt occur because previously working app gets broken by the polyfill.

[sjmiles]

User agent policies prevent ShadowDOM polyfill from modifying the values of document and document.body. So, those two specific references must be wrapped before being used.

Either of these are acceptable depending on your mood:

wrap(document).body
wrap(document.body)

Try:

angular.bootstrap(wrap(document.body),["app"]);

[paquettea]

Thanks for the prompt answer. this indeed solve the issue. I've googled it a whole day and never found anything related to this specific case though I saw the wrap() mention somewhere in the docs, It never crossed my mind that It would apply to ALL nodes in my document, not only to the ones that defines polymer-elements. What I understand is that when using the polyfill, anytime a node is involved in dom manipulation, it MUST be wrapped else it will fail ?

[arv]

Another less magical solution is to use

document.querySelector('body')

[sjmiles]

It never crossed my mind that It would apply to ALL nodes in my document

Yes, others have said the same thing, clearly we need some documentation here.

The DOM tree can be walked from any node, so in order to ensure the correct logical DOM is represented, the ShadowDOM Polyfill must wrap all nodes.

Sadly, as I mentioned, document and body are specifically protected from overriding.

not only to the ones that defines polymer-elements

Keep in mind that ShadowDOM polyfill implements ShadowDOM which one can employ without any Polymer anywhere (not that we recommend it =P.)

document.querySelector('body')

This may still get you weird looks, but at least it will work universally. Thanks Arv!

[paquettea]

Thanks for those clear answers :)

----- Reply message -----
From: "Scott J. Miles" [email protected]
To: "Polymer/polymer" [email protected]
Cc: "Alexandre Paquette" [email protected]
Subject: [polymer] Compatibility with Angular JS - manual bootstrap fails on document.body and document.documentElement when using Platform.js (#457)
Date: Wed, Mar 26, 2014 16:37
It never crossed my mind that It would apply to ALL nodes in my document

Yes, others have said the same thing, clearly we need some documentation here.

The DOM tree can be walked from any node, so in order to ensure the correct logical DOM is represented, the ShadowDOM Polyfill must wrap all nodes.

Sadly, as I mentioned, document and body are specifically protected from overriding.

not only to the ones that defines polymer-elements

Keep in mind that ShadowDOM polyfill implements ShadowDOM which you could employ without any Polymer anywhere (not that we recommend it). =P

document.querySelector('body')

This may still get you weird looks, but at least it will work universally. Thanks Arv!

—
Reply to this email directly or view it on GitHub.