refactor : break html into css and html

DaleStudy · Jun 20, 2024 · f1a8d8d · f1a8d8d
1 parent 1c1bb1d
commit f1a8d8d
Showing 1 changed file with 23 additions and 20 deletions.
diff --git a/components/hero.js b/components/hero.js
@@ -1,29 +1,32 @@
-const html = `
+const css = `
   <style>
-    :host {
-      display: block;
-      font-weight: 500;
-      font-size: 30px;
-    }
+  :host {
+    display: block;
+    font-weight: 500;
+    font-size: 30px;
+  }
 
-    h2 {
-      font-weight: inherit;
-      font-size: 30px; /* Default font-size for h2 */
-      display: block; /* Ensure block display */
-    }
+  h2 {
+    font-weight: inherit;
+    font-size: 30px; /* Default font-size for h2 */
+    display: block; /* Ensure block display */
+  }
 
-    @media only screen and (min-width: 768px) {
-      h2 {
-        font-size: 40px;
-      }
+  @media only screen and (min-width: 768px) {
+    h2 {
+      font-size: 40px;
     }
+  }
 
-    @media only screen and (min-width: 1024px) {
-      h2 {
-        font-size: 50px;
-      }
+  @media only screen and (min-width: 1024px) {
+    h2 {
+      font-size: 50px;
     }
+  }
   </style>
+`;
+
+const html = `
   <h2>
     <slot></slot>
   </h2>
@@ -33,7 +36,7 @@ class Hero extends HTMLElement {
   constructor() {
     super();
     this.attachShadow({ mode: 'open' });
-    this.shadowRoot.innerHTML = html;
+    this.shadowRoot.innerHTML = css + html;
   }
 }