Javascript 将HTML导入自定义元素

嘿，我从Webcomponents开始，我构建了一个小的HTML导入示例，在这个示例中，我使用VanillaJs从另一个网站导入了一个calander，它运行良好

作为第二名。第一步，我想将HTML导入到一个聚合元素中，这样我就可以反复使用该元素。这是我的密码：

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

var owner=文档。\u currentScript.ownerDocument；
var link=owner.querySelector（'link[rel=“import”]”）；
var content=link.import；
var container=document.getElementById（'container'）；
var el=content.querySelector（'.slider-striser-column'）；
container.appendChild（el.cloneNode（true））；

在另一个HTML文档中，我使用了custom元素，我可以看到导入工作正常（加载了testsite.com中的资源），但我的Polymer元素没有shadowDOM-导入的和选定的元素没有附加到我的

：/

容器

为null，因此发生以下错误：

无法读取null的属性“appendChild”

感谢您的帮助；）

该

位于

内部，由于您没有使用

Polymer（）

，因此需要使用

模板.content.querySelector（）

获取并修改其内容。相反，您可以在聚合物中执行此操作：

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

（功能（）
var owner=文档。\u currentScript.ownerDocument；
聚合物({
就绪：函数（）{
var content=owner.querySelector（'link#fromsite'）。导入；
var el=content.querySelector（'.slider-striser-column'）；
这个$.container.appendChild（el.cloneNode（true））；
}
});
})();

谢谢您的帮助！但是由于我使用HTML导入到我的

，当我在另一个页面上使用此元素时，所有CSS样式都消失了。如何将导入的CSS附加到我的

？