Details html element hack to overcome the impossibility to change its display style

details-summary-display-hack.md

I was trying to apply a display:grid on a details element for a project, but it fails. After some search, it's seems to be impossible to change the display style of this element. Only solution is to simulate this element with new custom element and some javascript. Here is the result.

Here is the CSS part

custom-details > custom-summary {
    cursor: pointer;
    display: list-item;
    list-style-position: inside;
    list-style-type: disclosure-closed;
}
custom-details[open] > custom-summary {
    list-style-type: disclosure-open;
}
custom-details:not([open]) > *:not(custom-summary) {
    display: none;
}

And the javascript part for the behavior

[...document.querySelectorAll(`custom-summary`)].forEach(e => e.onclick = () => e.closest(`custom-details`).toggleAttribute(`open`));

Here is a working example