Merge pull request #16 from DaleStudy/sam/add-hero-component

feat : implemented hero component
DaleStudy · Jun 7, 2024 · 0bd754e · 0bd754e
2 parents 9ed08fc + 50bf2db
commit 0bd754e
Show file tree

Hide file tree

Showing 3 changed files with 22 additions and 0 deletions.
diff --git a/components/hero/hero.css b/components/hero/hero.css
@@ -0,0 +1,4 @@
+.hero-description {
+  font-size: 5rem;
+  font-weight: medium;
+}
diff --git a/components/hero/hero.js b/components/hero/hero.js
@@ -0,0 +1,17 @@
+const template = document.createElement('template');
+template.innerHTML = `
+  <link rel="stylesheet" href="./components/hero/hero.css">
+  <p class="hero-description">
+    <slot></slot>
+  </p>
+`;
+
+class Hero extends HTMLElement {
+  constructor() {
+    super();
+    this.attachShadow({ mode: 'open' });
+    this.shadowRoot.appendChild(template.content.cloneNode(true));
+  }
+}
+
+window.customElements.define('hero-component', Hero);
diff --git a/main.js b/main.js
@@ -1 +1,2 @@
 import "./components/divider/divider.js";
+import "./bomponents/hero/hero.js";