ねえ、私は Webcomponents から始めて、VanillaJs を使用して別の Web サイトからカレンダーをインポートする小さな HTML インポートの例を作成しました。これは完璧に動作します。
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 がありません - インポートされ選択された要素は my <event-calendar-element>
:/に追加されません。
コンテナー<div>
が null であるため、次のエラーが発生します。Cannot read property 'appendChild' of null
助けていただければ幸いです;)