<element-details>
Last updated
Last updated
<!-- ⭐️ 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"><<slot name="element-name">slot="element-name"</slot>></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 <span>)</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 <div>)
</div>
</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);
}
});