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:
<my-element>
(polymer) needs know width when stamped dom (originally juicy-tile-list)polymer('my-element', ( { domready: function (){ this.width = this.offsetwidth;
<dynamic-import>
(vanillajs) adds html import (<link>
tag head) when attached (originally imported-template), , not change element's dom @ all.dynamicimportprototype.attachedcallback = function () { // create new link tag // ... document.head.appendchild(link); };
then pack <template>
:
... <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
Post a Comment