mdn
diff --git a/‎defined-pseudo-class/index.html
Lines changed: 54 additions & 15 deletions b/‎defined-pseudo-class/index.html
Lines changed: 54 additions & 15 deletions
diff --git a/‎defined-pseudo-class/main.js
Lines changed: 0 additions & 13 deletions b/‎defined-pseudo-class/main.js
Lines changed: 0 additions & 13 deletions
@@ -1,37 +1,76 @@
 <!DOCTYPE html>
 <html>
   <head>
-    <meta charset="utf-8">
+    <meta charset="utf-8" />
     <title>:defined demo</title>
-    <script src="main.js" defer></script>
     <style>
-      p {
-        background: yellow;
+      custom-element {
+        display: block;
+        border: 5px dashed grey;
+        border-radius: 1rem;
+        height: 100px;
+        width: 400px;
+        padding: 1rem;
+        position: relative;
+        user-select: none;
       }
 
-      simple-custom {
-        background: cyan;
+      code {
+        background: #ccc;
       }
 
-      :defined {
-        font-style: italic;
+      #btn {
+        margin-top: 1rem;
+        cursor: pointer;
       }
 
-      simple-custom:not(:defined) {
-        display: none;
+      custom-element:not(:defined) {
+        border-color: grey;
+        color: grey;
       }
 
-      simple-custom:defined {
-        display: block;
+      custom-element:defined {
+        background-color: wheat;
+        border-color: black;
+        color: black;
+      }
+
+      /* show loading message */
+      custom-element:not(:defined)::before {
+        content: "Loading...";
+        position: absolute;
+        inset: 0 0 0 0;
+        align-content: center;
+        text-align: center;
+        font-size: 2rem;
+        background-color: white;
+        border-radius: 1rem;
+      }
+
+      /* remove the loading message */
+      custom-element:defined::before {
+        content: "";
       }
     </style>
   </head>
   <body>
-    <h1><code>:defined</code> demo</h1>
 
-    <simple-custom text="Custom element example text"></simple-custom>
+    <custom-element>
+      <p>
+        Loaded content: Lorem ipsum tel sed tellus eiusmod tellus. Aenean.
+        Semper dolor sit nisi. Elit porttitor nisi sit vivamus.
+      </p>
+    </custom-element>
+    <button id="btn">define the <code>&lt;custom-element&gt;</code></button>
+
+    <script>
+      const btn = document.querySelector("#btn");
 
-    <p>Standard paragraph example text</p>
+      btn.addEventListener("click", () => {
+        customElements.define("custom-element", class extends HTMLElement {});
+        btn.remove();
+      });
+    </script>
 
   </body>
 </html>