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

feat: better example to show observed attrs are only smallcase

Browse source
This commit is contained in:
Ayo 2023-11-17 16:08:25 +01:00
parent bef423fde1
commit aabbb09c89
2 changed files with 5 additions and 4 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

5
demo/BooleanPropTest.mjs
View file

@ -2,15 +2,16 @@ import WebComponent from "../src/WebComponent.js";
export class BooleanPropTest extends WebComponent { export class BooleanPropTest extends WebComponent {
isInline = false; isInline = false;
anotherone = false;
static properties = ["is-inline"]; static properties = ["is-inline", "anotherone"];
onChanges(changes) { onChanges(changes) {
console.log(">>> boolean prop test", changes); console.log(">>> boolean prop test", changes);
} }
get template() { get template() {
return `<span>${this.isInline}</span>`; return `<p>is-inline: ${this.isInline}</p><p>another-one: ${this.anotherone}</p>`;
} }
} }

4
demo/index.html
View file

@ -11,10 +11,10 @@
<body> <body>
<hello-world id="hey" data-name="Ayo" emotion="sad"></hello-world> <hello-world id="hey" data-name="Ayo" emotion="sad"></hello-world>
<p> <p>
<simple-text greeting="hey"></simple-text> <simple-text></simple-text>
</p> </p>
<p> <p>
<boolean-prop-test></boolean-prop-test> <boolean-prop-test is-inline anotherOne></boolean-prop-test>
</p> </p>
<script type="module"> <script type="module">