當使用動態HTML導入模板時，聚合物元素會損壞尺寸

這是一個複合的情況，但不會出現在更孤立的情況下。當使用動態HTML導入模板時，聚合物元素會損壞尺寸

我已經創建了兩個自定義元素：

<my-element>（聚合物）需要知道它的寬度時加蓋DOM（最初是juicy-tile-list）

my-element.html
```
Polymer('my-element', ({ 
    domReady: function(){ 
    this.width = this.offsetWidth; 
```
<dynamic-import>（VanillaJS）將HTML導入（<link>標籤添加到頭部）（當初是imported-template），並且根本不改變元素的DOM。

dynamic-import.html
```
DynamicImportPrototype.attachedCallback = function() { 
    // create new link tag 
    // ... 
    document.head.appendChild(link); 
}; 
```

然後，我只是收拾那些<template>：

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

完全demo is here

在加那利（？本地HTML進口支持）this.offsetWidth是0，但對於空<div>風格width: 100%，它應該是容器 - <body> - 寬度。

在Chrome Stable和IE中，它工作正常，幾秒後也會得到糾正。刪除包裝<template>修復了初始寬度，以及刪除document.head.appendChild一行。如何以及爲什麼向節點添加節點，影響元素大小？這是聚合物，金絲雀還是我的代碼中的錯誤？有沒有什麼好的解決方案？

來源

2014-06-27 tomalec

它看起來像一個Chrome的bug。 Polymer GH issue，Chromium issue

不過，我發現了一個臨時的解決方法 - 附着流中刪除動態導入：

DynamicImportPrototype.attachedCallback = function() { 
    // create new link tag 
    var link = document.createElement('link'); 
    link.rel = "import"; 
    link.href = "components/whatever.html"; 
    // add it to the head 
    setTimeout(function asyncImport(){ 
     document.head.appendChild(link); 
    }); 
};

然後測量應該發生的進口將會加入之前。要做到這一點，需要等待導入才能繼續呈現，這不僅難以實現，而且會嚴重影響用戶體驗。

來源

2014-06-27 21:27:06 tomalec

當使用動態HTML導入模板時，聚合物元素會損壞尺寸

回答

相關問題