> For the complete documentation index, see [llms.txt](https://lochiwei.gitbook.io/web/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://lochiwei.gitbook.io/web/component/examples/custom-dialog.md).

# \<custom-dialog>

{% tabs %}
{% tab title="📗 參考" %}

* 👉 [Styling in Shadow DOM](/web/component/shadow-dom/styles.md#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](/web/component/shadow-dom/styles.md#cheat-sheet)
  {% endtab %}
  {% endtabs %}