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

feat: support boolean attribute

Browse source 
if no value is passed to an attribute it returns 'true'
This commit is contained in:
Ayo 2023-11-17 15:42:45 +01:00
parent 670c882e44
commit bef423fde1
3 changed files with 23 additions and 7 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

17
demo/BooleanPropTest.mjs Normal file
View file

@ -0,0 +1,17 @@
import WebComponent from "../src/WebComponent.js";
export class BooleanPropTest extends WebComponent {
isInline = false;
static properties = ["is-inline"];
onChanges(changes) {
console.log(">>> boolean prop test", changes);
}
get template() {
return `<span>${this.isInline}</span>`;
}
}
customElements.define("boolean-prop-test", BooleanPropTest);

9
demo/index.html
View file

@ -6,23 +6,22 @@
<title>WC demo</title>
<script type="module" src="HelloWorld.mjs"></script>
<script type="module" src="SimpleText.mjs"></script>
<script type="module" src="BooleanPropTest.mjs"></script>
</head>
<body>
<hello-world id="hey" data-name="Ayo" emotion="sad"></hello-world>
<p>
<simple-text greeting="hey"></simple-text>
</p>
<p>
<boolean-prop-test></boolean-prop-test>
</p>
<script type="module">
const helloWorld = document.querySelector("hello-world");
setTimeout(() => {
helloWorld.setAttribute("emotion", "excited");
}, 2500);
const clickableText = document.querySelector("simple-text");
setTimeout(() => {
clickableText.remove();
}, 2000);
</script>
</body>
</html>

4
src/WebComponent.js
View file

@ -90,8 +90,8 @@ export class WebComponent extends HTMLElement {
attributeChangedCallback(property, previousValue, currentValue) {
const camelCaps = this.#getCamelCaps(property);
if (previousValue !== currentValue) {
this[property] = currentValue;
this[camelCaps] = currentValue;
this[property] = currentValue === "" || currentValue;
this[camelCaps] = currentValue === "" || currentValue;
this.render();
this.onChanges({ property, previousValue, currentValue });
}