Skip to content

Instantly share code, notes, and snippets.

@wolframkriesing

wolframkriesing/more-h1.html

Created August 5, 2018 12:00
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save wolframkriesing/8101632c3b5ae6d4d4592ce4c388f961 to your computer and use it in GitHub Desktop.
Save wolframkriesing/8101632c3b5ae6d4d4592ce4c388f961 to your computer and use it in GitHub Desktop.
Download ZIP
The "extended" H1 we built at busconf 2018
Raw
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>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment