basic component

11 months ago · eb7b786bdd
parent df30312aee
commit eb7b786bdd
2 changed files with 28 additions and 0 deletions
--- a/component.js
+++ b/component.js
@ -0,0 +1,17 @@
+class MyComponent extends HTMLElement {
+	constructor() {
+		super(); 
+
+		const shadow = this.attachShadow({ mode: 'closed' });
+
+		const root = document.createElement('section');
+		root.innerHTML = `
+			<h2>Hello from MyComponent!</h2>
+		`;
+
+		shadow.appendChild(root)
+	}
+}
+
+customElements.define('my-component', MyComponent);
+
--- a/index.html
+++ b/index.html
@ -0,0 +1,11 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+	<meta charset="UTF-8">
+	<title></title>
+	<script defer src="component.js"></script>
+</head>
+<body>
+	<my-component></my-component>
+</body>
+</html>