From 1b66d357cecda646009620ce9ba9424a4fa39517 Mon Sep 17 00:00:00 2001
From: Sascha Schulz <sschulz@dh-software.de>
Date: Mo, 15 Jan 2024 16:10:49 +0100
Subject: [PATCH] add hello sayer component excercise
---
templates/web-components/hello-sayer.js | 17 +++++++++++++++++
templates/web-components/hello-sayer.html | 11 +++++++++++
2 files changed, 28 insertions(+), 0 deletions(-)
diff --git a/templates/web-components/hello-sayer.html b/templates/web-components/hello-sayer.html
new file mode 100644
index 0000000..5bc4f4f
--- /dev/null
+++ b/templates/web-components/hello-sayer.html
@@ -0,0 +1,11 @@
+<!DOCTYPE html>
+<html lang="en">
+ <head>
+ <meta charset="UTF-8">
+ <title>Web Components</title>
+ <script defer src="hello-sayer.js"></script>
+ </head>
+ <body>
+ <hello-sayer></hello-sayer>
+ </body>
+</html>
diff --git a/templates/web-components/hello-sayer.js b/templates/web-components/hello-sayer.js
new file mode 100644
index 0000000..3dec4a5
--- /dev/null
+++ b/templates/web-components/hello-sayer.js
@@ -0,0 +1,17 @@
+class HelloSayerComponent extends HTMLElement {
+ connectedCallback() {
+ const shadowRoot = this.attachShadow({mode: "open"});
+
+ shadowRoot.innerHTML = `
+ <style>
+ div {
+ background-color: coral;
+ color: white;
+ }
+ </style>
+ <div>Hello!</div>
+ `;
+ }
+}
+
+window.customElements.define("hello-sayer", HelloSayerComponent);
--
Gitblit v1.9.3