这适用于 chrome，但它在 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 中进行测试。模板标签显示为空。
所以...模板标签在导入时失败，但实际导入本身正在工作。