The details component allows you to display a summary and a detailed description.


Details component can be used to display a summary and a detailed description.

// create element
const details = document.createElement('monster-details');

// insert element into the DOM

In order to display the summary, the attribute data-monster-button-label must be set.


The content of the overlay can be set via slotted content. The content is displayed in the body of the summary. In this example, the content is a simple text.

    <p>I am the content of the overlay.</p>

It is also possible to load the content from an external file. For this purpose, the reload component is used.

    <monster-reload data-monster-url="./nav.html"></monster-reload>


Combine multiple details into one Accordion.

    <div>lorem ipsum dolor st amet, consteitur sadpselit, sed dam noum eiimocie naboeyminvit ut </div>
    <div>ineimad  imnimevinam,  qusi nostrud exerci tation ullacmorper susicpti lobrotis nsil uta lquiip</div>

If you do not want to use the accordion, you can set the feature flag features.accordion to false.


The following events are fired by the component.


The select control can be customized to your own needs. For this purpose, the control can be designed via CSS.

The different parts of the control can be designed using CSS. Since the internals of the component are in a shadow tree, access is via css pseudo-element parts.

To change the color of the open button, the following CSS can be used.

details::part(container) {
    border: 1px solid red;

The individual parts are shown in the following picture.