Blink!

keithamus · keithamus · commit 460ad71e177f · 2022-12-01T17:14:35.000Z
Co-authored-by: langermank &lt;langermank@gmail.com&gt;
diff --git a/examples/index.html b/examples/index.html
@@ -5,11 +5,11 @@
     <title>custom-element demo</title>
   </head>
   <body>
-    <custom-element></custom-element>
+    <blink-text>Hello World</blink-text>
 
     <script type="module">
       // import 'https://unpkg.com/@github/custom-element-boilerplate@latest/dist/custom-element.js'
-      import '../src/custom-element.ts'
+      import '../src/blink-text-element.ts'
     </script>
   </body>
 </html>
diff --git a/src/blink-text-element.ts b/src/blink-text-element.ts
@@ -0,0 +1,35 @@
+class BlinkTextElement extends HTMLElement {
+  #renderRoot = this.attachShadow({mode: 'open'})
+
+  connectedCallback(): void {
+    this.#renderRoot.innerHTML = `
+    <style>
+      :host {
+        animation: 1s linear blink infinite;
+      }
+      @keyframes blink {
+        from {
+          opacity: 0
+        }
+        to {
+          opacity: 1
+        }
+      }
+    </style>
+    <slot></slot>
+    `
+  }
+}
+
+declare global {
+  interface Window {
+    BlinkTextElement: typeof BlinkTextElement
+  }
+}
+
+export default BlinkTextElement
+
+if (!window.customElements.get('blink-text')) {
+  window.BlinkTextElement = BlinkTextElement
+  window.customElements.define('blink-text', BlinkTextElement)
+}
diff --git a/src/custom-element.ts b/src/custom-element.ts
