details custom-block inside list item doesn't toggle on click

[jtsternberg]

Describe the bug

<details> elements rendered from the ::: details custom block container don't toggle when clicking the summary row. The native <details> disclosure triangle (chevron) appears via the ::marker pseudo-element on <summary>, but clicks in the summary area land on the <details> element itself rather than <summary>, so the native toggle never fires.

Reproduction

Use ::: details inside a markdown list:

* ::: details <span>Collapsible group</span>
    * `field1` - Description of field 1
    * `field2` - Description of field 2

This renders as:

<ul>
  <li>
    <details class="details custom-block">
      <summary>Collapsible group</summary>
      <ul>
        <li><code>field1</code> - Description of field 1</li>
        <li><code>field2</code> - Description of field 2</li>
      </ul>
    </details>
  </li>
</ul>

Clicking the chevron or the summary text does not expand the details.

Root cause

The .custom-block CSS on <details> adds padding that creates a hit area around the <summary>. When clicking what visually appears to be the summary row, the event target is DETAILS (the wrapper), not SUMMARY. Since native <details> toggle behavior only fires when <summary> receives the click, nothing happens.

Evidence from debugging:

• summary.click() via JavaScript does toggle the details (confirms the HTML structure is valid)
• Adding a capturing click listener on document shows the event target is DETAILS.details.custom-block, not SUMMARY
• The summary's own click listener never fires on physical clicks
• elementFromPoint() at the chevron coordinates returns child elements (<code>) or the details wrapper, not the summary

Expected behavior

Clicking anywhere in the summary row (including the disclosure triangle / ::marker) should toggle the <details> open/closed.

System Info

• VitePress: 1.6.3
• Browser: Chrome (macOS)

Possible fix

The .custom-block padding on <details> likely needs to be moved to (or only applied to) the children inside the details, so that the summary row's click target isn't obscured by the details wrapper's padding. Alternatively, a small JS handler could call details.toggleAttribute('open') when the details element itself receives a click (and the click target is not inside the content area).

[brc-dd]

I think that's coming from your own styles (likely you have negative margins on <summary> itself).

On default theme, <summary> is clickable:

padding is the green area, it doesn't overlap with summary:

https://stackblitz.com/edit/vite-a27h583r?file=docs/index.md

also your markdown syntax somehow works, but is not quite valid.

The native <details> disclosure triangle (chevron) appears via the ::marker pseudo-element on <summary>,

This is also not true, it's from some custom styles in your case.

[jtsternberg]

You were right — this was entirely my custom theme CSS, not VitePress. Thanks for pointing me in the right direction. (I actually forgot we had customized our theme this much!)

Your observation about the custom styles led me to the actual culprit: my theme hides the native <summary> marker and replaces it with a ::before pseudo-element — but I'd attached it to <details> instead of <summary>:

/* broken — clicks on this target <details>, not <summary> */
li:has(.nested-property) > details:before {
  content: '›';
}

/* fixed — clicks now hit <summary> and the native toggle fires */
li:has(.nested-property) > details > summary:before {
  content: '›';
}

Native <details> toggle only fires when <summary> receives the click. Pseudo-elements on <details> produce click events targeting the wrapper, so the toggle never activated.

Apologies for the noise, and thanks for the quick response + the StackBlitz repro confirming the default theme works correctly!