demo · v131
Nested File Tree
Nested <details> elements styled as a file-tree widget. Chrome 131’s ::details-content pseudo-element handles indentation and smooth animation — no wrapper <div>s needed.
webplatform-showcase/
src/
components/
Button.js
Card.js
Modal.js
utils/
slugify.js
fetchFeatures.js
main.js
public/
styles.css
logo.svg
tests/
components.test.js
utils.test.js
deno.json
README.md
::details-content — Chrome 131 exposes the content area of
<details> as a real CSS box. Setting
padding-left on it provides indentation without any extra markup, and
targeting it with block-size + transition gives the smooth
expand animation. Previously you had to add a wrapper <div> inside
each <details> just to achieve either effect.
the code
/* Indentation — no wrapper div needed */
details::details-content {
padding-left: var(--space-3);
}
/* Smooth expand/collapse animation */
details::details-content {
overflow: hidden;
block-size: 0;
transition:
block-size 0.22s ease,
content-visibility 0.22s allow-discrete;
interpolate-size: allow-keywords;
}
details[open]::details-content {
block-size: auto;
}
@starting-style {
details[open]::details-content { block-size: 0; }
}
/* Folder icon via ::before on summary */
summary::before { content: "📁"; }
details[open] > summary::before { content: "📂"; }
/* Remove default disclosure triangle */
summary { list-style: none; }
summary::-webkit-details-marker { display: none; }