From 7bfd2ab15ad9c203e92c33ef13893e0e5b540392 Mon Sep 17 00:00:00 2001 From: Ayo Date: Sat, 16 Sep 2023 22:31:49 +0200 Subject: [PATCH] initial commit --- components/HelloWorld.mjs | 34 ++++++++++++++++++++++++++++++++++ components/WebComponent.mjs | 23 +++++++++++++++++++++++ index.html | 18 ++++++++++++++++++ index.js | 5 +++++ 4 files changed, 80 insertions(+) create mode 100644 components/HelloWorld.mjs create mode 100644 components/WebComponent.mjs create mode 100644 index.html create mode 100644 index.js diff --git a/components/HelloWorld.mjs b/components/HelloWorld.mjs new file mode 100644 index 0000000..bbfe786 --- /dev/null +++ b/components/HelloWorld.mjs @@ -0,0 +1,34 @@ +// @ts-check +import { WebComponent } from "./WebComponent.mjs"; +const emotionPostfix = { + excited: "!", + sad: " :(", + }; +const emotionColor = { + excited: "green", + sad: "red", + }; + +/** + * Component to greet a person + * and display sentiment toward web components + */ +export class HelloWorld extends WebComponent { + name = "World"; + emotion = "excited"; + + + static get observedAttributes() { + return ["name", "emotion"]; + } + + get template() { + return ` +

Hello ${this.name}${emotionPostfix[this.emotion]}

+

How do you feel about web components: + + ${this.emotion.toUpperCase()} + +

`; + } +} diff --git a/components/WebComponent.mjs b/components/WebComponent.mjs new file mode 100644 index 0000000..72b2608 --- /dev/null +++ b/components/WebComponent.mjs @@ -0,0 +1,23 @@ +// @ts-check + +export class WebComponent extends HTMLElement { + + get template () { + return '' + } + + connectedCallback() { + this.render() + } + + attributeChangedCallback(property, prev, value) { + if (prev !== value) { + this[property] = value + this.render() + } + } + + render() { + this.innerHTML = this.template + } +} \ No newline at end of file diff --git a/index.html b/index.html new file mode 100644 index 0000000..7d0d3bc --- /dev/null +++ b/index.html @@ -0,0 +1,18 @@ + + + + + + Hello World WC + + + + + + + \ No newline at end of file diff --git a/index.js b/index.js new file mode 100644 index 0000000..f3ba126 --- /dev/null +++ b/index.js @@ -0,0 +1,5 @@ +// @ts-check + +import { HelloWorld } from './components/HelloWorld.mjs' + +customElements.define('hello-world', HelloWorld) \ No newline at end of file