From acac3fb9f6581d444dce2868dd401bbe7ed6fd45 Mon Sep 17 00:00:00 2001
From: Sascha Schulz <sschulz@dh-software.de>
Date: Mo, 15 Jan 2024 18:26:51 +0100
Subject: [PATCH] Merge branch 'draft'
---
assets/html/hello-sayer.js | 30 ++++++++++++++++++++++++++++++
1 files changed, 30 insertions(+), 0 deletions(-)
diff --git a/assets/html/hello-sayer.js b/assets/html/hello-sayer.js
new file mode 100644
index 0000000..ada75bc
--- /dev/null
+++ b/assets/html/hello-sayer.js
@@ -0,0 +1,30 @@
+class HelloSayerComponent extends HTMLElement {
+ static observedAttributes = ["name"];
+
+ constructor() {
+ super();
+
+ this.root = this.attachShadow({mode: "open"});
+
+ this.root.innerHTML = `
+ <style>
+ div {
+ background-color: coral;
+ color: white;
+ }
+ </style>
+ <div>Hello!</div>
+ `;
+ }
+
+ attributeChangedCallback(name, oldValue, newValue) {
+ this.root.querySelector("div").innerHTML = `Hello ${newValue}!`;
+ }
+}
+
+window.customElements.define("hello-sayer", HelloSayerComponent);
+
+const names = ["Joe", "Allie"];
+let counter = 0;
+
+setInterval(() => document.querySelector("hello-sayer").setAttribute("name", names[counter++ % 2]), 2000);
--
Gitblit v1.9.3