attribute on component

11 months ago · 501254cd4f
parent eb7b786bdd
commit 501254cd4f
2 changed files with 11 additions and 4 deletions
--- a/component.js
+++ b/component.js
@ -1,17 +1,24 @@
-class MyComponent extends HTMLElement {
+class Pet extends HTMLElement {
 	constructor() {
 		super(); 

 		const shadow = this.attachShadow({ mode: 'closed' });

 		const root = document.createElement('section');
+
+		const name = this.getAttribute('name')
+
 		root.innerHTML = `
-			<h2>Hello from MyComponent!</h2>
+			<h2>Pet</h2>
+			<dl>
+				<dt>Name</dt>
+				<dd>${name}</dd>
+			</dl>
 		`;

 		shadow.appendChild(root)
 	}
 }

-customElements.define('my-component', MyComponent);
+customElements.define('pet-component', Pet);

--- a/index.html
+++ b/index.html
@ -6,6 +6,6 @@
 	<script defer src="component.js"></script>
 </head>
 <body>
-	<my-component></my-component>
+	<pet-component name="fido"></pet-component>
 </body>
 </html>