wolframkriesing/jscc18-webcomponents-from-scratch.html

## jscc18-webcomponents-from-scratch.html
<!DOCTYPE html>
<html>
<head>
<title>WebComponent from Scratch</title>
  <script type="module" src="myH1.js"></script>
</head>
<body>
  <style>
    a {
      color: orange;
    }
  </style>

  <script>console.log('before my-h1');</script>
  <h1 is="my-h1" hash="headline">WebComponent from Scratch</h1>
  <script>console.log('after my-h1');</script>

</body>

## myH1.js
const template = document.createElement('template');
template.innerHTML = `
    <style>
      a {
        color: green;
      }
    </style>
    <a href="">#</a>
    <slot></slot>
`;

class MyH1 extends HTMLHeadingElement {
  static get observedAttributes() {
    return ['hash'];
  }
  constructor() {
    console.log('in constructor');
    super();
    this.attachShadow({mode: 'open'});
    this.shadowRoot.appendChild(template.content.cloneNode(true));
  }
  connectedCallback() {
  }
  attributeChangedCallback(name, oldValue, newValue) {
    if (name === 'hash') {
      this.shadowRoot.querySelector('a')
        .setAttribute('href', `#${this.getAttribute('hash')}`);
      this.dispatchEvent(new Event('hashchange'));
    }
  }
}
customElements.define('my-h1', MyH1, {extends: 'h1'});
	<!DOCTYPE html>
	<html>
	<head>
	<title>WebComponent from Scratch</title>
	<script type="module" src="myH1.js"></script>
	</head>
	<body>
	<style>
	a {
	color: orange;
	}
	</style>

	<script>console.log('before my-h1');</script>
	<h1 is="my-h1" hash="headline">WebComponent from Scratch</h1>
	<script>console.log('after my-h1');</script>

	</body>
	const template = document.createElement('template');
	template.innerHTML = `
	<style>
	a {
	color: green;
	}
	</style>
	<a href="">#</a>
	<slot></slot>
	`;

	class MyH1 extends HTMLHeadingElement {
	static get observedAttributes() {
	return ['hash'];
	}
	constructor() {
	console.log('in constructor');
	super();
	this.attachShadow({mode: 'open'});
	this.shadowRoot.appendChild(template.content.cloneNode(true));
	}
	connectedCallback() {
	}
	attributeChangedCallback(name, oldValue, newValue) {
	if (name === 'hash') {
	this.shadowRoot.querySelector('a')
	.setAttribute('href', `#${this.getAttribute('hash')}`);
	this.dispatchEvent(new Event('hashchange'));
	}
	}
	}
	customElements.define('my-h1', MyH1, {extends: 'h1'});