<element-details>

📘 手冊

• MDN ⟩ <details> ❤️ - 裡面有將 <details> 變漂亮的 CSS ⭐️

• MDN ⟩ Using the <element-details> custom element with named slots

👉 相關

• styling <details>

💾 replit

screenshoot

codepen

html with <template>

<!-- ⭐️ 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>

<element-details>

// ⭐️ 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);
  }
  
});