Web Component - Blink

index.html

<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>

script.js

(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)
})();

style.css

h1, span {
  font-family: cursive;
}
li {
  color: blue;
}

web-component-blink.markdown

Web Component - Blink

A Pen by Martine Dowden on CodePen.

License.