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
}

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);

19
demo/index.html
View file

@ -1,12 +1,21 @@
<!DOCTYPE html>
<html lang="en">
<head> <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> <script type="module" src="HelloWorld.mjs"></script>
<script type="module" src="SimpleText.mjs"></script>
</head> </head>
<body> <body>
<hello-world name="Ayo" emotion="sad"> <hello-world name="Ayo" emotion="sad"></hello-world>
<script> <simple-text greeting="hey"></simple-text>
const helloWorld = document.querySelector('hello-world');
<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>