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.render();
} }
this.onChanges({previousValue, currentValue}); this.onChanges({ previousValue, currentValue });
} }
render() { 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);

31
demo/index.html
View file

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