Question

嘿，我从Web组件开始，我构建了一个HTML导入示例，在那里我从另一个使用VanillaJs的网站导入一个calander并且它的工作效果很好。

作为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

任何帮助表示赞赏;）

Answer 1

<div>位于<template>内，由于您未使用Polymer()，因此您需要使用template.content.querySelector()来获取并修改其内容。相反，您可以在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>

聚合HTML导入自定义元素

1 个答案: