Skip to content

Instantly share code, notes, and snippets.

@triskweline
Created June 24, 2018 07:59
Show Gist options
  • Save triskweline/0d4561d0d8f41997559cd22139be81cc to your computer and use it in GitHub Desktop.
Save triskweline/0d4561d0d8f41997559cd22139be81cc to your computer and use it in GitHub Desktop.
Custom Elements v0 vs. DOMParser
<!doctype html>
<html>
<head>
<title>Custom elements test</title>
</head>
<body>
<h3>Custom elements from HTML</h3>
<ol class="from-html" start="0">
<li class="zero"><hello-zero></hello-zero></li>
<li class="one"><hello-one><hello-one></li>
</ol>
<h3>Custom elements from createElement</h3>
<ol class="from-create-element" start="0">
<li class="zero"</li>
<li class="one"></li>
</ol>
<h3>Custom elements from DOMParser</h3>
<ol class="from-dom-parser" start="0">
<li class="zero"</li>
<li class="one"></li>
</ol>
<h3>Custom elements from DOMParser with document.importNode</h3>
<ol class="from-dom-parser-with-import" start="0">
<li class="zero"</li>
<li class="one"></li>
</ol>
<script>
var HelloZero = Object.create(HTMLElement.prototype);
HelloZero.createdCallback = function() {
this.innerHTML = 'Hello vom V0 (document.registerElement)';
}
document.registerElement('hello-zero', { prototype: HelloZero });
class HelloOne extends HTMLElement {
constructor() {
super();
}
connectedCallback() {
this.innerHTML = 'Hello vom V1 (customElements.define)';
}
}
customElements.define('hello-one', HelloOne);
function show(selector, element) {
if (!element) {
element = document.createElement('i')
element.innerHTML = 'no element found'
}
document.querySelector(selector).appendChild(element);
}
show('.from-create-element .zero', document.createElement('hello-zero'));
show('.from-create-element .one', document.createElement('hello-one'));
var parser = new DOMParser();
show('.from-dom-parser .zero', parser.parseFromString('<hello-zero></hello-zero>', 'text/html').querySelector('hello-zero'));
show('.from-dom-parser .one', parser.parseFromString('<hello-one></hello-one>', 'text/html').querySelector('hello-one'));
show('.from-dom-parser-with-import .zero', document.importNode(parser.parseFromString('<hello-zero></hello-zero>', 'text/html').querySelector('hello-zero')));
show('.from-dom-parser-with-import .one', document.importNode(parser.parseFromString('<hello-one></hello-one>', 'text/html').querySelector('hello-one')));
</script>
</body>
</html>
@triskweline
Copy link
Author

test-result

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment