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

Question

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

以下代码在 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 :-)

Answer 1

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

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

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

Custom elements added from AJAX are not working

html

dom

custom-element