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

update sample demo page

Browse source
This commit is contained in:
Ayo 2023-11-18 23:27:23 +01:00
parent 12acf83c8c
commit f8ca80da72
1 changed files with 6 additions and 7 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

13
sample.html
View file

@ -1,27 +1,26 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>WC Base Test</title>
<script type="module">
import WebComponent from "https://unpkg.com/web-component-base/index.js";
class HelloWorld extends WebComponent {
static properties = ["data-name"];
class HelloWorld extends WebComponent {
static properties = ["my-name"];
get template() {
return `<h1>Hello ${this.props.dataName ?? "World"}!</h1>`;
return `<h1>Hello ${this.props.myName}!</h1>`;
}
}
customElements.define("hello-world", HelloWorld);
</script>
</head>
<body>
<hello-world data-name="Ayo"></hello-world>
<hello-world my-name="Ayo"></hello-world>
<script>
const helloWorld = document.querySelector("hello-world");
setTimeout(() => {
helloWorld.setAttribute("data-name", "Ayo zzzZzzz");
helloWorld.props.myName = "Ayo zzzZzzz";
}, 2500);
</script>
</body>