Incorrect DOM rendering with FireFox, IE, Edge

[CaptainCodeman]

As a follow-up to #775

The code runs as expected on Chrome and Safari but for IE, Edge and FireFox the existence of webcomponents.js on the page interferes with the rendering. This can manifest itself as strange errors within an Angular app for instance, not always obvious what the issue is.

If the loader is used, the outcome becomes random depending on which scripts load and execute first.

Uncomment the webcomponents.js script line to trigger the issue.

http://jsbin.com/mefijofufe/1/edit?html,output

[CaptainCodeman]

It appears to be the inclusion of the ShadowDOM polyfill that triggers it, any that I load that don't have this seem to work OK.

(and forcing it on Chrome with ShadyDOM = {force: true}; makes it exhibit the same behavior)

[CaptainCodeman]

Traced through this and it's caused by this issue in ShadyDOM:
webcomponents/shadydom#122

A simple example using jQuery. The following code should produce <div class="a"></div>:

var div = $('<div class="a"/>');
$(document.body).append(div);

With ShadyDOM loaded, it instead produces <div></div><div class="a"></div>.

What do we need to do to get that change merged in?

[brettpostin]

+1 on this. We are using some Kendo UI jQuery components and the ShadyDom polyfill blitzes the styling due to the extraneous markup being produced in Firefox/IE/Edge.

Works fine in Chrome/Safari.

[bwolff]

As already mentioned, this might be related to #122 and might be fixed by PR webcomponents/shadydom#172

[Haprog]

Previous link to #122 by @bwolff was wrong. Was related to this: webcomponents/shadydom#122
and apparently fixed by webcomponents/shadydom#172 which was merged to shadydom/master on August 12th. It's included in stable release since shadydom v1.0.3 which is in webcomponentjs stable release starting on v1.0.8.

It seems that the jsbin example in the issue description by @CaptainCodeman seems to work fine if you edit it to use webcomponentsjs v1.0.2 (but still broken in 1.0.1).

Even if I edit the jsbin to only do the simpler jQuery test mentioned by @CaptainCodeman it also works starting with webcomponentsjs v1.0.2.

So anyway it looks to me like this has been fixed since webcomponentsjs v1.0.2. even if webcomponents/shadydom#122 was somehow related (but that has also been fixed since v1.0.8).

I'd recommend closing this issue as fixed.

[justinfagnani]

@CaptainCodeman can you verify that this issue is fixed for your case with the lasted polyfills?

[CaptainCodeman]

It's fixed.

[mattdsteele]

@justinfagnani @CaptainCodeman As info, this isn't completely resolved. I'll open a new issue with a test case showing the same error.

[CH-RhyMoore]

Potentially related? webcomponents/shadydom#286