joicomponents
Version:
Design patterns to build native web components
31 lines (28 loc) • 758 B
HTML
<script src="polyfill-loader.js"></script>
<script type="module">
window.WebComponents.waitFor(() => {
class MyElement extends HTMLElement {
connectedCallback() {
this.style.display = "block";
this.style.width = "200px";
this.style.height = "250px";
this.style.borderRadius = "50%";
this.style.backgroundColor = "orange";
}
}
customElements.define("my-element", MyElement);
});
setTimeout(
() => {
let me = document.createElement("my-element");
document.body.appendChild(me);
me.style.border = "20px dotted red";
},
1000
);
setTimeout(
() => document.body.innerHTML += "<my-element></my-element>",
2000
);
</script>
<my-element></my-element>