# \<custom-dialog>

{% tabs %}
{% tab title="📗 參考" %}
* 👉 [Styling in Shadow DOM](../../shadow-dom/styles#cheat-sheet)
{% endtab %}
{% endtabs %}

💾 [replit](https://replit.com/@pegasusroe/custom-dialog#index.html)

{% tabs %}
{% tab title="html" %}
```markup
<!-- ⭐️ 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>
```
{% endtab %}

{% tab title="codepen" %}
{% embed url="https://codepen.io/lochiwei/pen/zYzpGNz" %}


{% endtab %}

{% tab title="📗 參考" %}
* 👉 [Styling in Shadow DOM](../../shadow-dom/styles#cheat-sheet)
{% endtab %}
{% endtabs %}
