Convert nav comp; Add slot option

kaboomshebang · Dec 14, 2021 · ba4be22 · ba4be22
1 parent de6ba7b
commit ba4be22
Show file tree

Hide file tree

Showing 2 changed files with 27 additions and 43 deletions.
diff --git a/index.html b/index.html
@@ -12,7 +12,9 @@
     <script type="module" src="/src/main.ts"></script>
 
     <!-- default kbsb navigation component -->
-    <kbsb-navbar></kbsb-navbar>
+    <kbsb-navbar>
+        <img slot="logo" src="https://www.kaboomshebang.com/logos/kaboom_shebang_logo.svg" alt="Kaboom Shebang"/>
+    </kbsb-navbar>
 
     <!-- profile app -->
     <section class="section">

diff --git a/src/components/navBar.ts b/src/components/navBar.ts
@@ -1,3 +1,26 @@
+// use a template instead of multiple createElement
+const navTemplate = document.createElement('template');
+
+navTemplate.innerHTML = `
+<style>
+	nav {
+		max-width: 1200px;
+		margin: 0 auto;
+		padding: 1rem 0 0 0;
+	}
+
+	::slotted(img) {
+		max-width: 10rem;
+	}
+</style>
+
+<nav>
+	<a href="https://www.kaboomshebang.com/" target="_blank" rel="noopener noreferrer">
+		<slot name="logo" />
+	</a>
+</nav>
+`;
+
 // create a class for the element
 class Navigation extends HTMLElement {
 	constructor() {
@@ -6,48 +29,7 @@ class Navigation extends HTMLElement {
 
 		// create a shadow root
 		const shadow = this.attachShadow({ mode: 'open' });
-
-		// create nav
-		const nav = document.createElement('nav');
-
-		// append link
-		const link = document.createElement('a');
-		const logoUrl = 'https://www.kaboomshebang.com/';
-		link.setAttribute('href', logoUrl);
-		link.setAttribute('target', '_blank');
-		link.setAttribute('rel', 'noopener noreferrer');
-
-		// append image
-		const img = document.createElement('img');
-		const logoImg = 'https://www.kaboomshebang.com/logos/kaboom_shebang_logo.svg';
-		img.setAttribute('src', logoImg);
-		img.setAttribute('class', 'logo-kaboom');
-		img.setAttribute('alt', 'Kaboom Shebang');
-
-		// instead of using a template you can also just append directly to the shadowDOM
-		// append link and image to the nav element
-		nav.appendChild(link);
-		link.appendChild(img);
-
-		// Create some CSS to apply to the shadow dom
-		const style = document.createElement('style');
-
-		style.textContent = `
-		nav {
-			max-width: 1200px;
-			margin: 0 auto;
-			padding: 1rem 0 0 0;
-		}
-		
-		.logo-kaboom {
-			max-width: 10rem;
-		}
-		`;
-
-		// attach the styles to the shadow dom
-		shadow.appendChild(style);
-		// and finally, attach the top element to the shadow dom
-		shadow.appendChild(nav);
+		shadow.append(navTemplate.content.cloneNode(true));
 	}
 }