Skip to content

Instantly share code, notes, and snippets.

@martine-dowden
Created June 23, 2020 20:14
Show Gist options
  • Save martine-dowden/f9f684cd039965e500b536b06d4013f5 to your computer and use it in GitHub Desktop.
Save martine-dowden/f9f684cd039965e500b536b06d4013f5 to your computer and use it in GitHub Desktop.
Web Component - Blink
<h1>Blink Tag Demo</h1>
<app-blink title="Blink me">
<div slot="stuff">
<ul>
<li>Sam I am</li>
<li>Green Eggs And Ham</li>
</ul>
</div>
</app-blink>
(function () {
'use strict';
console.log('loaded');
class Blink extends HTMLElement {
constructor() {
super();
// Create a shoadow root
const shadow = this.attachShadow({ mode: 'open' })
const wrapper = document.createElement('div');
const text = this.getAttribute('title');
wrapper.textContent = text;
const styles = document.createElement('style');
styles.textContent = `
@keyframes blink {
0% { visibility: visible }
50% { visibility: hidden }
100% { visibility: hidden }
}
div { animation: blink 1s infinite }
li { color: pink; }
`
const slot = document.createElement('slot');
slot.setAttribute('name', 'stuff')
shadow.appendChild(wrapper)
wrapper.appendChild(styles)
wrapper.appendChild(slot)
}
}
customElements.define('app-blink', Blink)
})();
h1, span {
font-family: cursive;
}
li {
color: blue;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment