Search code examples
internet-explorerx-tag

x-tags not firing WebComponentsReady on IE


This works in chrome, but it borks in IE.

I'm trying to import the tag using HTMLImports (through the x-tag library), but the WebComponentsReady event never fires, and I'm seeing my elements come through as 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>

And I'm getting this in the console...

window loaded
HTMLImportsLoaded
element[object HTMLUnknownElement]
template[object HTMLUnknownElement]undefined
SCRIPT5022: HierarchyRequestError
014_xtag, line 17 character 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 is just plain failing. Not sure why, but if i define the custom element in the main html file, it works just fine.

I'm testing in Safari, too. The template tag is showing up as empty.

So... template tags fail when imported, but the actual import itself is working.


Solution

  • Jeeeeez. I added type="text/javascript" to my element's script tag and now everything works.