<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>
Previous<element-details>Next<user-card>

Last updated

Was this helpful?