Spoilers should be expanded in print CSS layout

[ComFreek]

I really like the {{< spoiler text="..." >}} shortcode that was recently introduced. But when I am printing my website to PDF (using a Chromium-based browser), all spoilers are closed.
Is this the intended behavior?

Can I somehow override this in CSS?

[gcushen]

It appears to be an open issue in the CSS Working Group: w3c/csswg-drafts#2084 . Hopefully the next big iteration of web browsers supports it.

[ComFreek]

I do not quite get the relation between the CSS standard for <details>/<summary> elements and wowchemy's spoilers. After all, wowchemy's spoilers are <div>+<a> combinations with some JS attached:

[ComFreek]

I've now come up with a JS script on my own to do expanding/collapsing when printing, see my answer. I think it would be still good if wowchemy offered this script as a built-in.

[ComFreek]

I've come up with the JS script below that will expand spoilers for printing and revert them after printing.

Usage: Save the JS below as assets/js/print-spoiler-contents.js; create the js directory if non-existing. In config/_default/params.toml, locate the plugins_js setting and add print-spoiler-contents to it; e.g. to get plugins_js = ["print-spoiler-contents"].

let expandedSpoilers = [];

window.addEventListener("beforeprint", () => {
    expandedSpoilers = [];
    for (const spoiler of document.querySelectorAll(".spoiler a[aria-expanded=false]")) {
        expandedSpoilers.push(spoiler);
        spoiler.click();
    };
});

window.addEventListener("afterprint", () => {
    for (const spoiler of expandedSpoilers) {
        spoiler.click();
    }
    expandedSpoilers = [];
});