Update profiles and profile comp.

src/components/profile.ts

@@ -5,22 +5,29 @@ const template = document.createElement('template');
 template.innerHTML = `
 <style>
 	.profileWrapper {
-		max-width: 300px;
+		display: inline-block;
+		text-align: center;
+		padding: 10px 10px;
+	}
+	.backDrop {
+		padding: 20px 20px;
 		background-color: #eee;
 	}
 	.profileImg {
 		width: 100px;
 	}
+	.job, .name {
+		position: relative;
+		padding: 10px 0 0 0;
+	}
 </style>
 
 <div class="profileWrapper">
-    <div>
+    <div class="backDrop">
         <img class="profileImg" src="${profileSvg}" alt="Profile">
-        <div>Fred</div>
-    </div>
-    <div>
-        Developer
+        <div class="name">Fred</div>
     </div>
+	<div class="job">Unknown</div>
 </div>
 `;
 
@@ -33,6 +40,21 @@ class Profile extends HTMLElement {
 		// create a shadow root
 		const shadow = this.attachShadow({ mode: 'open' });
 		shadow.appendChild(template.content.cloneNode(true));
+
+		// set job attribute
+		if (typeof this.getAttribute('job') === 'string') {
+			//! use exclamation mark to tell TS that this attribute is definitely set
+			shadow.querySelector('.job')!.innerHTML = this.getAttribute('job')!;
+		} else {
+			console.log('Job attr not set');
+		}
+
+		// set name attribute
+		if (typeof this.getAttribute('name') === 'string') {
+			shadow.querySelector('.name')!.innerHTML = this.getAttribute('name')!;
+		} else {
+			console.log('Name attr not set');
+		}
 	}
 }
 

src/components/profiles.ts

@@ -0,0 +1,33 @@
+// use a template instead of multiple createElement
+const template = document.createElement('template');
+template.innerHTML = `
+<style>
+	.profilesWrapper {
+		max-width: 800px;
+		margin: 0 auto;
+		text-align: center;
+	}
+</style>
+
+<div class="profilesWrapper">
+	<kbsb-profile name="Fred" job="Designer"></kbsb-profile>
+	<kbsb-profile name="Hans" job="Developer"></kbsb-profile>
+	<kbsb-profile name="John" job="Manager"></kbsb-profile>
+	<kbsb-profile name="Vic" job="Engineer"></kbsb-profile>
+</div>
+`;
+
+// create a class for the element
+class Profiles extends HTMLElement {
+	constructor() {
+		// always call super first in constructor
+		super();
+
+		// create a shadow root
+		const shadow = this.attachShadow({ mode: 'open' });
+		shadow.appendChild(template.content.cloneNode(true));
+	}
+}
+
+// Define the new element
+customElements.define('kbsb-profiles', Profiles);