从 AJAX 添加的自定义元素不起作用答案

【问题标题】：Custom elements added from AJAX are not working从 AJAX 添加的自定义元素不起作用
【发布时间】：2015-05-25 17:36:24
【问题描述】：

我了解自定义元素是一项非常新的技术。

以下代码在 Webkit 浏览器和 Firefox（使用 dom.webcomponents.enabled）中显示不同的内容。

我不明白：为什么添加自定义元素，加载 AJAX，在 Webkit 浏览器中创建 HTMLUnknownElement 而不是自定义元素？这是一个错误吗？ Chrome 表示它完全支持自定义元素。相反，Firefox 在标志后面有支持。

这是index.html：

<?xml version="1.0" encoding="UTF-8"?>
<html><head></head><body>
<script>
var proto = Object.create(HTMLElement.prototype);
proto.attachedCallback = function() { this.innerHTML = "Custom elements work :-)"; }
var TLoad = document.registerElement('t-load', { prototype: proto });
</script>
<t-load>Custom element are not working :-(</t-load>
<script>
var tload = new TLoad();
tload.appendChild(document.createTextNode('Custom element are not working :-('));
var where = document.querySelector('t-load');
where.parentNode.insertBefore(tload, where);

tload = document.createElement('t-load');
tload.appendChild(document.createTextNode('Custom element are not working :-('));
where.parentNode.insertBefore(tload, where);

var request = new XMLHttpRequest();
request.open('GET', 'loaded.xml', false);
request.send(null);
var result = document.adoptNode(request.responseXML.documentElement);
console.log(result);
where.parentNode.insertBefore(result, where);
</script>
</body></html>

这是loaded.xml：

<?xml version="1.0" encoding="UTF-8"?>
<div xmlns="http://www.w3.org/1999/xhtml">
<t-load>Custom element are not working :-(</t-load>
</div>

输出为：（Chrome.Firefox 有其他输出）

Custom elements work :-)Custom elements work :-)
Custom elements are not working :-(
Custom elements work :-)

【问题讨论】：

没人知道吗？

标签： html dom custom-element

【解决方案1】：

您应该使用importNode 而不是adpotNode。示例：

var result = document.importNode(request.responseXML.documentElement, true);

【讨论】：

好问题！我不知道。我以前不知道adoptNode ...也许使用adoptNode 节点不会重新创建，因此自定义元素无法在HTML 节点列表中看到它。或者可能是因为 XML 和 HTML 元素的不同性质。谁知道？开发 JS 引擎的人。在线文档不清楚。