-
-
Save javan/edb0445527af29457871896469418dab 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); | |
| } | |
| function parse(html) { | |
| var doc = document.implementation.createHTMLDocument('') | |
| doc.documentElement.innerHTML = html | |
| return doc | |
| } | |
| show('.from-create-element .zero', document.createElement('hello-zero')); | |
| show('.from-create-element .one', document.createElement('hello-one')); | |
| show('.from-dom-parser .zero', parse('<hello-zero></hello-zero>').querySelector('hello-zero')); | |
| show('.from-dom-parser .one', parse('<hello-one></hello-one>').querySelector('hello-one')); | |
| show('.from-dom-parser-with-import .zero', document.importNode(parse('<hello-zero></hello-zero>').querySelector('hello-zero'))); | |
| show('.from-dom-parser-with-import .one', document.importNode(parse('<hello-one></hello-one>').querySelector('hello-one'))); | |
| </script> | |
| </body> | |
| </html> |
Author
javan
commented
Jun 24, 2018
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment