Investigate why the Polymer minesweeper demo doesn't work in Firefox

[Legioth]

Might also be broken in other non-Chrome browsers.

The Core Elements team might have experience with debugging similar issues.

[Legioth]

Might be enough to just make it use the v1 polyfill instead of v0.

[caalador]

The problem might also be that we might not wait for load of the webcomponents:

• make sure the web components polyfill (webcomponents.js) is loaded first, certainly before any HTML imports, since this includes the polyfill for HTML imports.

[denis-anisimov]

Again: in EventHandler test (which is not yet merged) polyfill with correct version is added before anything as it should be. But it doesn't help.

[denis-anisimov]

The demo requires correct polyfill version and it's set via #205.

It doesn't help as I mentioned before.
What I see for now:

• polymer2 works fine without HB in FF.
• Polymer component doesn't work being used inside HB regardless of the way of DOM manipulation (if element is created and added using console doesn't work either).
• There is a difference between element without HB and inside HB: property $ is populated for working polymer element and it's null inside HB. This in its turn is a consequence of absence _template property for the created polymer element. This property exists for working polymer element and it's undefined for non-working element. Can be seen in console.

[denis-anisimov]

An addition: static template function returns undefined for the element inside HB and it returns template content for the regular polymer component.

[denis-anisimov]

dom-module.html has method register. This method is called for the regular polymer component before template()method (which tries to find a module by id via findModule function in the dom-module.html ). Inside HB template method is called before module registration happens and that's the reason why template()returns undefined.

[denis-anisimov]

I gave up. It requires more time than has been estimated.
What I see for now is the difference in the order of execution below.

HB:

1. web-components -> something from client cache.js (GWT compiled HB stuff) -> PolymerElement.CTOR -> TemplateStamp -> finalizeClassAndSuper -> finalizeClass -> template -> import dom module -> find module.
2. web components (some attribute changed callback)-> DomModule.attributeChangedCallback -> register

Regular Polymer :

1. web-components -> HTMLImports.whenReady ->DomModule.attributeChangedCallback -> register
2. web-components -> HTMLImports.whenReady -> PolymerElement.CTOR -> TemplateStamp -> finalizeClassAndSuper -> finalizeClass -> template -> import dom module -> find module.

[Legioth]

Could try to see if this is somehow related to attributes being set only after some element has been attached to the DOM.

[SomeoneToIgnore]

During one way binding for Polymer feature implementation, I've found that adding defer attribute for webcomponents loaded in BootstrapHandler fixes issues for FF, although have tested it only on HB tests, not demos.

The downside of this approach is that Chrome starts to show errors in the console (but it works still).

[denis-anisimov]

FF also has an error in the console. Though it shows the content correctly and works.

[Legioth]

One piece of the puzzle is the way minesweeper.html is imported. Removing the @HtmlImport annotation from the component and instead manually adding <link rel="import" href="minesweeper.html"> from the browser console after the page has been loaded results in a working mine sweeper.

[denis-anisimov]

And it one more argument in creating the "import" fully configured (with preset all the attributes).

[Legioth]

This happens because we start using the web component from the load event of the html import element. Interactions between the polyfill and Polymer are also depending on the same event for setting up internal bookkeeping. This can be fixed by using HTMLImports.whenReady instead of the load event.

[denis-anisimov]

How does webcomponent differs here from any plain HTML element ?
What do you mean : "start using" ? Don't we add the element as a result of server->client RPC ?

[Legioth]

How does webcomponent differs here from any plain HTML element ?
What do you mean : "start using" ? Don't we add the element as a result of server->client RPC ?

The custom element registration has been performed when the load event is fired, but Polymer has not yet registered it because no attribute change event has been fired for the <dom-module> element. An element that is created after the tag has been registered as a custom element but before the corresponding <dom-module> has been picked up by Polymer will fail.

An element that was already in the DOM before the HTML import was loaded will be properly upgraded, as will an element that is added after HTMLImports.whenReady.