我知道自定义元素是非常新的技术。
dom.webcomponents.enabled
以下代码在 Webkit 浏览器和 Firefox(带有)中显示不同的内容。
我不明白:为什么添加自定义元素,加载 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 :-)