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