triskweline/test.html

## test.html
<!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>
	<!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>