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

chore: formatting; add sample

Browse source
This commit is contained in:
Ayo 2023-09-17 01:36:58 +02:00
parent ee80a55649
commit 1287b42186
4 changed files with 40 additions and 12 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

3
.vscode/settings.json vendored Normal file
View file

@ -0,0 +1,3 @@
{
"editor.formatOnSave": true
}

2
WebComponent.mjs
View file

@ -20,7 +20,7 @@ export class WebComponent extends HTMLElement {
this.render();
}
this.onChanges({previousValue, currentValue});
this.onChanges({ previousValue, currentValue });
}
render() {

16
demo/SimpleText.mjs Normal file
View file

@ -0,0 +1,16 @@
// @ts-check
import WebComponent from "../index.mjs";
class SimpleText extends WebComponent {
greeting = "Hello";
static get observedAttributes() {
return ["greeting"];
}
get template() {
return `<p>Simple text ${this.greeting}</p>`;
}
}
customElements.define("simple-text", SimpleText);

27
demo/index.html
View file

@ -1,12 +1,21 @@
<head>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>WC demo</title>
<script type="module" src="HelloWorld.mjs"></script>
</head>
<body>
<hello-world name="Ayo" emotion="sad">
<script>
const helloWorld = document.querySelector('hello-world');
<script type="module" src="SimpleText.mjs"></script>
</head>
<body>
<hello-world name="Ayo" emotion="sad"></hello-world>
<simple-text greeting="hey"></simple-text>
<script type="module">
const helloWorld = document.querySelector("hello-world");
setTimeout(() => {
helloWorld.setAttribute('emotion', 'excited');
}, 2500)
helloWorld.setAttribute("emotion", "excited");
}, 2500);
</script>
</body>
</body>
</html>