0

ねえ、私は Webcomponents から始めて、Va​​nillaJs を使用して別の 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

助けていただければ幸いです;)

4

1 に答える 1