<custom-dialog>
๐พ replit
<!-- โญ๏ธ template for custom-dialog -->
<template id="tmpl">
<style>
/* โญ๏ธ select host (from inside) */
:host {
display: inline-block;
border: 1px solid blue;
padding: 10px;
}
/* โญ๏ธ select host with class="centered" */
:host(.centered) {
position: fixed; /* โญ๏ธ relative to viewport */
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
background-color: hsl(60, 90%, 50%);
border-color: red;
}
</style>
<!-- โญ๏ธ default slot -->
<slot></slot>
</template>
<script>
// โญ๏ธ register <custom-dialog> element
customElements.define('custom-dialog', class extends HTMLElement {
connectedCallback() {
this
.attachShadow({mode: 'open'})
.append(tmpl.content.cloneNode(true));
}
});
</script>
<!-- โญ๏ธ custom element -->
<custom-dialog class="centered">Centered!</custom-dialog>
<custom-dialog>Not Centered!</custom-dialog>
Last updated