カスタム要素が非常に新しいテクノロジーであることは理解しています。
次のコードは、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 :-)