joicomponents
Version:
Design patterns to build native web components
46 lines (42 loc) • 1.46 kB
HTML
<body>
<script>
class UpgradeTwo extends HTMLElement {
constructor() {
super();
console.log("UpgradeTwo constructor");
console.log("UpgradeTwo constructor dirty check: ", emptyShell === this);
this.attachShadow({mode: "open"});
this.shadowRoot.innerHTML = "<slot></slot><span></span>";
this.shadowRoot.addEventListener("slotchange", function(){
console.log("UpgradeTwo slotchange");
})
}
static get observedAttributes() {
console.log("UpgradeTwo observedAttributes");
return ["punctuation"];
}
attributeChangedCallback(name, oldValue, newValue) {
console.log("UpgradeTwo attributesChangedCallback");
if (name === "punctuation") {
this.shadowRoot.querySelector("span").innerText = newValue;
}
}
connectedCallback() {
console.log("UpgradeTwo connectedCallback");
console.log("UpgradeTwo connectedCallback dirty check: ", emptyShell === this);
}
}
console.log("App start");
customElements.define("upgrade-two", UpgradeTwo);
console.log("App upgrade-two defined");
</script>
<template>
<upgrade-two punctuation=".">hello norway</upgrade-two>
</template>
<script>
var emptyShell = document.querySelector("template").content.children[0];
console.log("App before appending upgrade-two");
document.querySelector("body").appendChild(emptyShell);
console.log("App after appending upgrade-two");
</script>
</body>