文章/答案/技术大牛

发布

社区首页 >问答首页 >聚合物元素在模板内使用动态HTML导入时会产生损坏的尺寸

问聚合物元素在模板内使用动态HTML导入时会产生损坏的尺寸
EN

Stack Overflow用户

提问于 2014-06-27 14:38:38

回答 1查看 412关注 0票数 2

这是一个有点复合的情况，但在更孤立的情况下不发生。

我创建了两个自定义元素：

<my-element> (聚合物)，需要知道它的宽度时，当邮票到DOM (最初是多汁瓦片清单) my-element.html 聚合物(‘my-element’，{ domReady: function (){ this.width = this.offsetWidth；
<dynamic-import> (VanillaJS)，它在附加时添加HTML (<link>标记到头部)(最初是导入模板)，并且根本不改变元素的DOM。 dynamic-import.html DynamicImportPrototype.attachedCallback = function () { //创建新的链接标记// .Document.head.appendChild(链接)；}；

然后我就把它们打包到<template>上

index.html

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

全演示在这里

在金丝雀(本地HTML支持？)中，this.offsetWidth是0，但是对于带有样式width: 100%的空<div>，则应该是容器- <body>宽度。

在Chrome稳定的环境下，IE工作得很好，在几毫秒后也会得到修正。删除包装<template>修复初始宽度，以及删除document.head.appendChild行。在头部添加节点是如何以及为什么影响元素大小的？这是聚合物，金丝雀，还是我的代码中的一个bug？有什么好办法吗？

web-component

javascript

html

polymer

回答 1

Stack Overflow用户

发布于 2014-06-27 21:27:06

看上去像个Chrome臭虫。聚合物GH问题，铬问题

不过，我找到了一个临时解决办法--从附加流中删除动态导入：

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);
  });
};

然后，测量应该发生之前，进口将增加。相反，这样做需要等待导入继续呈现，这不仅很难实现，而且可能严重影响UX。

票数 2

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/24454516

复制

相似问题

问聚合物元素在模板内使用动态HTML导入时会产生损坏的尺寸
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问聚合物元素在模板内使用动态HTML导入时会产生损坏的尺寸EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问聚合物元素在模板内使用动态HTML导入时会产生损坏的尺寸
EN