sarbull/versioned-custom-element.html

## versioned-custom-element.html
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>

<body>
  <simple-component-0-0-4 first="Cezar" last="Sirbu"></simple-component-0-0-4>

  <script>
    class SimpleComponent extends HTMLElement {
        constructor() {
          super();

          console.log('constructor()');

          const template = this.template();

          this.attachShadow({mode: 'open'}).appendChild(
            template.cloneNode(true)
          );
        }

        static get is() {
            return 'simple-component-0-0-4';
        }

        template() {
            const template = document.createElement('div');
            template.innerHTML = `<h1>I am a Web Component created by ${this.getAttribute('first')} ${this.getAttribute('last')}</h1>`;

            return template;
        }

        attributeChangedCallback(name, oldValue, newValue) {
            this.updateTemplate();

            console.log('attributeChangedCallback() = ', arguments);
        }

        updateTemplate() {
            this.shadowRoot.innerHTML = '';
            this.shadowRoot.appendChild(this.template());
        }

        static get observedAttributes() {
            return [
                'first',
                'last'
            ];
        }

        connectedCallback() {
            console.log('connectedCallback()');
        }

        disconnectedCallback() {
            console.log('disconnectedCallback()');
        }
    }

    window.customElements.define(SimpleComponent.is, SimpleComponent);
  </script>
</body>

</html>
	<!DOCTYPE html>
	<html>
	<head>
	<title>Title of the document</title>
	</head>

	<body>
	<simple-component-0-0-4 first="Cezar" last="Sirbu"></simple-component-0-0-4>

	<script>
	class SimpleComponent extends HTMLElement {
	constructor() {
	super();

	console.log('constructor()');

	const template = this.template();

	this.attachShadow({mode: 'open'}).appendChild(
	template.cloneNode(true)
	);
	}

	static get is() {
	return 'simple-component-0-0-4';
	}

	template() {
	const template = document.createElement('div');
	template.innerHTML = `<h1>I am a Web Component created by ${this.getAttribute('first')} ${this.getAttribute('last')}</h1>`;

	return template;
	}

	attributeChangedCallback(name, oldValue, newValue) {
	this.updateTemplate();

	console.log('attributeChangedCallback() = ', arguments);
	}

	updateTemplate() {
	this.shadowRoot.innerHTML = '';
	this.shadowRoot.appendChild(this.template());
	}

	static get observedAttributes() {
	return [
	'first',
	'last'
	];
	}

	connectedCallback() {
	console.log('connectedCallback()');
	}

	disconnectedCallback() {
	console.log('disconnectedCallback()');
	}
	}

	window.customElements.define(SimpleComponent.is, SimpleComponent);
	</script>
	</body>

	</html>