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

fix: README examples

Browse source
This commit is contained in:
Ayo 2023-11-17 23:23:32 +01:00
parent 3d31b41f53
commit 693c35d082
1 changed files with 2 additions and 10 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

12
README.md
View file

@ -48,14 +48,11 @@ In your component class:
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 { class HelloWorld extends WebComponent {
dataName = "World";
emotion = "excited";
static properties = ["data-name", "emotion"]; static properties = ["data-name", "emotion"];
get template() { get template() {
return ` return `
<h1>Hello ${this.dataName}${this.emotion === "sad" ? ". 😭" : "! 🙌"}</h1>`; <h1>Hello ${this.props.dataName}${this.props.emotion === "sad" ? ". 😭" : "! 🙌"}</h1>`;
} }
} }
@ -127,20 +124,15 @@ Here is an example of using a custom element in a single .html file:
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> <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 from unpkg
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 { class HelloWorld extends WebComponent {
static properties = ["data-name"]; static properties = ["data-name"];
get template() { get template() {
return `<h1>Hello ${this.dataName || 'World'}!</h1>`; return `<h1>Hello ${this.props.dataName ?? 'World'}!</h1>`;
} }
} }
customElements.define("hello-world", HelloWorld); customElements.define("hello-world", HelloWorld);
</script> </script>
</head> </head>
<body> <body>