> 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/element-details.md).

# \<element-details>

{% tabs %}
{% tab title="📘 手冊" %}

* MDN ⟩ [\<details>](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/details) ❤️ - 裡面有將 \<details> 變漂亮的 CSS ⭐️
* MDN ⟩ [Using the \<element-details> custom element with named slots](https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_templates_and_slots#using_the_%3Celement-details%3E_custom_element_with_named_slots)
  {% endtab %}

{% tab title="👉 相關" %}

* [styling \<details>](/web/css/examples/styling-details.md)
  {% endtab %}
  {% endtabs %}

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

{% tabs %}
{% tab title="screenshoot" %}
![](https://2527454625-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MfvEFZnSBhKT6fJmus0%2F-MjmuQFX1gltBEY8rihF%2F-MjmvA-3ksu_gxzyc5dv%2Felement-details.png?alt=media\&token=c68540e1-c5d0-4d75-976c-a0db71d4edf4)
{% endtab %}

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

{% endtab %}

{% tab title="html with <template>" %}

```markup
<!-- ⭐️ template for element-details  -->
<template id="element-details-template">
  
  <!--  ⭐️ shadow DOM styles  -->
  <style>
    
    /* ⭐️ custom element itself */
    :host {
      border: 1px dotted black;
      display: block;
      margin: 8px auto;
      padding: 4px;
      background: #eee;
    }
    
    /*  ⭐️ slotted elements (from light DOM) */
    ::slotted(*) {
      box-shadow: 2px 2px 5px 0px #404040 inset;
      background: hsl(60, 90%, 80%);
    }

    /* ⭐️ select <slot> with class="block" */
    slot.block {
      margin-left: 2rem;
      display: block;
    }

    details {
        border: 1px solid #aaa;
        border-radius: 4px;
        padding: .5em .5em 0;
    }

    summary {
        font-weight: bold;
        margin: -.5em -.5em 0;
        padding: .5em;
    }

    details[open] {
        padding: .5em;
    }

    details[open] summary {
        border-bottom: 1px solid #aaa;
        margin-bottom: .5em;
    }

    .name {
      font-weight: bold;
      color: #217ac0;
      font-size: 120%
    }

    h4 {
      margin: 1rem;
      font-weight: normal;
    }

    h4 span {
      color: #eee;
      background: tomato;
      padding: 2px 6px;
      border: 1px solid black;
      border-radius: 4px
    }
    
    .desc h4 span {
      background: hsl(225, 80%, 60%);
    }

    .attributes, .desc {
      font-size: 90%
    }
  </style>
  
  <!--  ⭐️ shadow DOM tree  -->
  <details>
    <summary>
        <!--    ⭐️ "element-name" slot     -->
        <code class="name">&lt;<slot name="element-name">slot="element-name"</slot>&gt;</code>
    </summary>
    
    <div class="desc">
      <h4><span>Description</span></h4>
      <!--    ⭐️ "description" slot     -->
      <slot name="description" class="block">slot="description"</slot>
    </div>
    
    <div class="attributes">
      <h4><span>Attributes</span></h4>
      
      <!--  ⭐️  "attributes" slot    -->
      <slot name="attributes" class="block">
        <p>None</p>
      </slot>
      
    </div>
  </details>

</template>


<element-details>
  <!--  ⭐️ light DOM  -->
  <span slot="element-name">slot</span>
  <span slot="description">A placeholder inside a web
    component that users can fill with their own markup,
    with the effect of composing different DOM trees
    together. <br>(✳️ this slotted element is a &lt;span&gt;)</span>
  <dl slot="attributes">
    <dt>name</dt>
    <dd>slot name</dd>
    <dt>whatever</dt>
    <dd>no such attribute</dd>
  </dl>
</element-details>

<element-details>
  <span slot="element-name">template</span>
  <div slot="description">A mechanism for holding client-
    side content that is not to be rendered when a page is
    loaded but may subsequently be instantiated during
    runtime using JavaScript.
    <br>(✳️ this slotted element is a &lt;div&gt;)
  </div>
</element-details>

```

{% endtab %}

{% tab title="<element-details>" %}

```javascript
// ⭐️ register <element-details> tag
customElements.define('element-details', class extends HTMLElement {
  
  connectedCallback() {
    // template content (cloned)
    const content = document
      .getElementById('element-details-template')
      .content
      .cloneNode(true);
    
    this.attachShadow({mode: 'open'})
        .appendChild(content);
  }
  
});
```

{% endtab %}
{% endtabs %}