wolframkriesing/more-h1.html

## more-h1.html
<!DOCTYPE html>
<html>
<head>
<title>WebComponent from Scratch</title>
</head>
<body>
  <h1>WebComponent from Scratch</h1>

  <h1 is="my-h1" linkable="1" hash="some-thing">something</h1>

  <template id="my-h1">
    <style>
      :host {
        background-color: red;
      }
    </style>
    <a href="#hash">#</a>
    <slot></slot>
  </template>

  <script>
    class MyH1 extends HTMLHeadingElement {
      static get observedAttributes() { return ['linkable', 'hash'] }

      constructor() {
        super();
        const shadow = this.attachShadow({mode: 'open'});
        shadow.appendChild(document.querySelector('#my-h1').content.cloneNode(true));
      }
      connectedCallback() {
        console.log('connected???');
        this.shadowRoot.querySelector('a').setAttribute('href', '#' + this.getAttribute('hash'))
      }
      attributeChangedCallback(name, oldValue, newValue) {
        console.log(`arg:`, name, oldValue, newValue);
      }
    }
    customElements.define('my-h1', MyH1, {extends: 'h1'});
  </script>

</body>
	<!DOCTYPE html>
	<html>
	<head>
	<title>WebComponent from Scratch</title>
	</head>
	<body>
	<h1>WebComponent from Scratch</h1>

	<h1 is="my-h1" linkable="1" hash="some-thing">something</h1>

	<template id="my-h1">
	<style>
	:host {
	background-color: red;
	}
	</style>
	<a href="#hash">#</a>
	<slot></slot>
	</template>

	<script>
	class MyH1 extends HTMLHeadingElement {
	static get observedAttributes() { return ['linkable', 'hash'] }

	constructor() {
	super();
	const shadow = this.attachShadow({mode: 'open'});
	shadow.appendChild(document.querySelector('#my-h1').content.cloneNode(true));
	}
	connectedCallback() {
	console.log('connected???');
	this.shadowRoot.querySelector('a').setAttribute('href', '#' + this.getAttribute('hash'))
	}
	attributeChangedCallback(name, oldValue, newValue) {
	console.log(`arg:`, name, oldValue, newValue);
	}
	}
	customElements.define('my-h1', MyH1, {extends: 'h1'});
	</script>

	</body>