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

chore: update samples in readme

Browse source
This commit is contained in:
Ayo 2023-10-20 12:14:20 +02:00
parent 5ee41e9a1d
commit b5cb00d26f
1 changed files with 4 additions and 4 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

8
README.md
View file

@ -98,7 +98,7 @@ This mental model attempts to reduce the cognitive complexity of authoring compo
Attributes are generally in `kebab-case`. You can access attribute properties in two ways Attributes are generally in `kebab-case`. You can access attribute properties in two ways
1. Use the camelCase counterpart: `this.myProp`, which is automatically filled. 1. Use the camelCase counterpart: `this.myProp`, which is automatically filled.
1. Or stick with kebab-case: `this[my-prop]` 1. Or stick with kebab-case: `this["my-prop"]`
```js ```js
class HelloWorld extends WebComponent { class HelloWorld extends WebComponent {
@ -107,7 +107,7 @@ class HelloWorld extends WebComponent {
get template() { get template() {
return ` return `
<h1>Hello ${this.myProp}</h1> <h1>Hello ${this.myProp}</h1>
<h2>Hello ${this['my-prop']}</h2> <h2>Hello ${this["my-prop"]}</h2>
`; `;
} }
} }
@ -130,10 +130,10 @@ Here is an example of using a custom element in a single .html file:
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 = ["name"]; static properties = ["data-name"];
get template() { get template() {
return `<h1>Hello ${this.name || 'World'}!</h1>`; return `<h1>Hello ${this.dataName || 'World'}!</h1>`;
} }
} }