当使用动态HTML导入在模板中盖章时，聚合物元素会损坏尺寸

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

本文关键字：聚合物 元素 损坏 盖章 动态 HTML 导入      更新时间：2023-09-26

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

我已经创建了两个自定义元素:

  1. <my-element>(聚合物)，需要知道其宽度时盖章到DOM(最初它是多汁瓷砖列表)

    my-element.html 

    Polymer('my-element', ( {
  domReady: function (){
    this.width = this.offsetWidth;

  2. <dynamic-import> (VanillaJS)，添加HTML导入(<link>标签到头部)时附加(原来导入模板)，并没有改变元素的DOM在所有。

    dynamic-import.html 

    DynamicImportPrototype.attachedCallback = function () {
  // create new link tag
  // ...
  document.head.appendChild(link);
};

然后我简单地将它们打包到<template>:

index . html 

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

完整的演示在这里

在金丝雀(原生HTML导入支持?)this.offsetWidth是0，但是对于样式为width: 100%的空<div>，它应该是container - <body> - width。

在Chrome稳定，和IE它工作得很好，它也得到纠正后几毫秒。移除包裹<template>固定初始宽度，以及移除document.head.appendChild行。向头部添加节点如何以及为什么会影响元素大小?这是一个bug在聚合物，金丝雀，或在我的代码?有什么好的解决办法吗?

看起来像是Chrome浏览器的bug。聚合物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);
  });
};

那么在添加进口之前应该进行测量。如果采用其他方法，则需要等待导入继续呈现，这不仅难以实现，而且可能严重影响用户体验。

相关文章：