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