0

嘿，我从 Webcomponents 开始，我构建了一个小的 HTML 导入示例，在那里我使用 VanillaJs 从另一个网站导入了一个压延机，它工作得很好。

作为 2. 步骤，我想将 HTML 导入到 Polymer 元素中，以便我可以一遍又一遍地使用该元素。这是我的代码：

<link rel="import" href="http://www.testsite.com">
<link rel="import" href="bower_components/polymer/polymer.html">

<polymer-element name="event-calendar-element">
    <template>
        <div id="container" style = "width:220px;"></div>
    </template>

            <script>
                var owner = document._currentScript.ownerDocument;
                var link = owner.querySelector('link[rel="import"]');
                var content = link.import;
                var container = document.getElementById('container');

                var el = content.querySelector('.slider-teaser-column');

                container.appendChild(el.cloneNode(true));
            </script>

</polymer-element>

在另一个 HTML 文档中，我使用了自定义元素，我可以看到，导入工作（加载了来自 testsite.com 的资源），但我的 Polymer 元素没有 shadowDOM - 导入和选择的元素没有附加到我的<event-calendar-element>：/

容器<div>为空，因此出现以下错误：Cannot read property 'appendChild' of null

任何帮助表示赞赏;）

4

1 回答 1

1

在<div>里面<template>并且因为你没有使用Polymer()你需要使用template.content.querySelector()get at并修改它的内容。相反，您可以在 Polymer 中执行此操作：

<link rel="import" href="http://www.testsite.com" id="fromsite">
<link rel="import" href="bower_components/polymer/polymer.html">

<polymer-element name="event-calendar-element">
<template>
  <div id="container" style="width:220px;"></div>
</template>
<script>
(function()
  var owner = document._currentScript.ownerDocument;

  Polymer({
    ready: function() {
      var content = owner.querySelector('link#fromsite').import;

      var el = content.querySelector('.slider-teaser-column');

      this.$.container.appendChild(el.cloneNode(true));
    }
  });

})();
</script>
</polymer-element>
于 2014-11-10T21:23:42.537 回答