ayo/wcb
1
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

initial commit

Browse source
This commit is contained in:
Ayo 2023-09-16 22:31:49 +02:00
commit 7bfd2ab15a
4 changed files with 80 additions and 0 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

34
components/HelloWorld.mjs Normal file
View file

@ -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 `
<h1>Hello ${this.name}${emotionPostfix[this.emotion]}</h1>
<h2>How do you feel about web components:
<span style="color:${emotionColor[this.emotion]}">
${this.emotion.toUpperCase()}
</span>
</h2>`;
}
}

23
components/WebComponent.mjs Normal file
View file

@ -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
}
}

18
index.html Normal file
View file

@ -0,0 +1,18 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Hello World WC</title>
<script type="module" src="./index.js"></script>
</head>
<body>
<hello-world name="Ayo" emotion="sad" />
<script>
const helloWorld = document.querySelector('hello-world');
setTimeout(() => {
helloWorld.setAttribute('emotion', 'excited');
}, 2500)
</script>
</body>
</html>

5
index.js Normal file
View file

@ -0,0 +1,5 @@
// @ts-check
import { HelloWorld } from './components/HelloWorld.mjs'
customElements.define('hello-world', HelloWorld)