0

これはクロムで動作しますが、IE では動作しません。

HTMLImports を使用して (x-tag ライブラリ経由で) タグをインポートしようとしていますが、WebComponentsReady イベントが発生せず、要素が HTMLUnknownElements として表示されます。

<element name="test-tag">

  <template>
    <section>
      I am an instance of test-tag
    </section>
  </template>


  <script>
    if (this != window) {

      var element = this;
      console.log("element", element);


      xtag.register(this, {

        lifecycle: {
          created: function () {
            console.log("created." + "created()", arguments);

            var template = element.querySelector("template");
            console.log('template', template, template.content);

            this.appendChild(template.content);

          }
        }
      });
    }
  </script>
</element>

そして、私はコンソールでこれを取得しています...

ウィンドウが読み込まれた
HTMLImportsLoaded
要素 [オブジェクト HTMLUnknownElement]
テンプレート [オブジェクト HTMLUnknownElement] 未定義
SCRIPT5022: HierarchyRequestError
014_xtag、行 17 文字 13

<!doctype html>
<html lang="en-US">
<head>
  <meta charset="UTF-8">
  <title>X-Tag</title>

  <script type="text/javascript" src="../../lib/x-tag-core.js"></script>
  <link rel="import" href="components/test-tag.html"/>
  <script type="text/javascript">

    window.onload = function () {
      console.log("window loaded");
    };
    window.addEventListener('HTMLImportsLoaded', function () {
      console.log("HTMLImportsLoaded");
    });
    window.addEventListener('WebComponentsReady', function () {
      console.log("WebComponentsReady");
    });
  </script>
</head>

<body>
<test-tag></test-tag>
</body>
</html>

HTMLImports は単なる失敗です。理由はわかりませんが、メインの html ファイルでカスタム要素を定義すると、問題なく動作します。

私もSafariでテストしています。テンプレート タグが空として表示されます。

そのため...テンプレートタグはインポート時に失敗しますが、実際のインポート自体は機能しています。

4

1 に答える 1

1

ジーイーズ。type="text/javascript" を要素の script タグに追加したところ、すべてが機能するようになりました。

于 2013-08-03T00:26:37.810 に答える