javascript - Polymer Element gets corrupted dimensions when stamped within a template with dynamic HTML Import -


this bit composite case, in not occur in more isolated ones.

i have created 2 custom elements:

  1. <my-element> (polymer) needs know width when stamped dom (originally juicy-tile-list)

    my-element.html

    polymer('my-element', ( {   domready: function (){     this.width = this.offsetwidth; 
  2. <dynamic-import> (vanillajs) adds html import (<link> tag head) when attached (originally imported-template), , not change element's dom @ all.

    dynamic-import.html

    dynamicimportprototype.attachedcallback = function () {   // create new link tag   // ...   document.head.appendchild(link); }; 

then pack <template>:

index.html

... <template bind>       <my-element>           <dynamic-import></dynamic-import>       </my-element>   </template> 

full demo here


in canary (native html imports support?) this.offsetwidth 0, empty <div> style width: 100%, should container - <body> - width.

under chrome stable, , ie works fine, gets corrected after few ms. removing wrapping <template> fixes initial width, removing document.head.appendchild line. how , why adding node head, affects elements size? bug in polymer, canary, or in code? there nice solution?

it chrome bug. polymer gh issue, chromium issue

however found temporary workaround - remove dynamic import attaching flow:

dynamicimportprototype.attachedcallback = function () {   // create new link tag   var link = document.createelement('link');   link.rel = "import";   link.href = "components/whatever.html";   // add head   settimeout( function asyncimport(){       document.head.appendchild(link);   }); }; 

then measuring should happen before import added. doing other way around require wait import continue rendering, not hard implement, heavily affect ux.


Comments

Popular posts from this blog

javascript - RequestAnimationFrame not working when exiting fullscreen switching space on Safari -

Python ctypes access violation with const pointer arguments -