Created
June 24, 2018 07:59
-
-
Save triskweline/0d4561d0d8f41997559cd22139be81cc to your computer and use it in GitHub Desktop.
Custom Elements v0 vs. DOMParser
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!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> | |
Author
triskweline
commented
Jun 24, 2018
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment