joicomponents
Version:
Design patterns to build native web components
42 lines (38 loc) • 1.39 kB
HTML
<body>
<script>
class UpgradeThree extends HTMLElement {
constructor() {
super();
console.log("UpgradeThree constructor");
this.attachShadow({mode: "open"});
this.shadowRoot.innerHTML = "<slot></slot><span></span>";
this.shadowRoot.addEventListener("slotchange", function(){
console.log("UpgradeThree slotchange");
})
}
static get observedAttributes() {
console.log("UpgradeThree observedAttributes");
return ["punctuation"];
}
attributeChangedCallback(name, oldValue, newValue) {
console.log("UpgradeThree attributesChangedCallback");
if (name === "punctuation") {
this.shadowRoot.querySelector("span").innerText = newValue;
}
}
connectedCallback() {
console.log("UpgradeThree connectedCallback");
}
}
console.log("App start");
customElements.define("upgrade-three", UpgradeThree);
console.log("App after upgrade-two defined");
var template = document.createElement("template");
template.innerHTML = '<upgrade-three punctuation=")">Hello Ukraine</upgrade-three>';
console.log("App after template instantiating upgrade-three");
var clone = template.content.cloneNode(true);
console.log("App after cloning upgrade-three");
document.querySelector("body").appendChild(clone);
console.log("App after appending upgrade-three");
</script>
</body>