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

chore: update README examples

Browse source
This commit is contained in:
Ayo 2023-11-18 09:11:51 +01:00
parent 3e828912db
commit 8343fded9c
1 changed files with 8 additions and 8 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

16
README.md
View file

@ -33,7 +33,7 @@ import WebComponent from "https://unpkg.com/web-component-base/index.js";
``` ```
## Installation via npm ## Installation via npm
Usable for projects using typescript, or with bundlers, or using import maps. Usable for projects with bundlers or using import maps.
```bash ```bash
npm i web-component-base npm i web-component-base
@ -48,11 +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 {
static properties = ["data-name", "emotion"]; static properties = ["my-name", "emotion"];
get template() { get template() {
return ` return `
<h1>Hello ${this.props.dataName}${this.props.emotion === "sad" ? ". 😭" : "! 🙌"}</h1>`; <h1>Hello ${this.props.myName}${this.props.emotion === "sad" ? ". 😭" : "! 🙌"}</h1>`;
} }
} }
@ -67,7 +67,7 @@ In your HTML page:
<script type="module" src="HelloWorld.mjs"></script> <script type="module" src="HelloWorld.mjs"></script>
</head> </head>
<body> <body>
<hello-world name="Ayo" emotion="sad"> <hello-world my-name="Ayo" emotion="sad">
<script> <script>
const helloWorld = document.querySelector('hello-world'); const helloWorld = document.querySelector('hello-world');
@ -128,21 +128,21 @@ Here is an example of using a custom element in a single .html file:
<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 { class HelloWorld extends WebComponent {
static properties = ["data-name"]; static properties = ["my-name"];
get template() { get template() {
return `<h1>Hello ${this.props.dataName ?? 'World'}!</h1>`; return `<h1>Hello ${this.props.myName ?? 'World'}!</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.setAttribute('my-name', 'Ayo zzzZzzz');
}, 2500); }, 2500);
</script> </script>
</body> </body>