<details> feature detect causes a forced layout of the page

Description

Calling Mzp.Supports.details() can cause a forced layout of the page in some scenarios. Firefox Nightly gives the following warning when this happens:

Layout was forced before the page was fully loaded. If stylesheets are not yet loaded this may cause a flash of unstyled content.

Steps to reproduce

1. Visit https://protocol.mozilla.org/patterns/molecules/details.html
2. Open Dev Tools and inspect the warning message.

The warning links to this line: https://github.com/mozilla/protocol/blob/main/src/assets/js/protocol/protocol-supports.js#L70

Expected result

Is it possible to write a feature detect that doesn't cause the browser to do a forced layout? If not, we should make sure it gets called after the DOMContentLoaded event?

Actual result

The browser is forced to do a layout before it has fully loaded, which probasbly means it then has to do a second layout once finished.

Environment

Firefox Nightly

Start at src/assets/js/protocol/protocol-supports.js around line 70, then reproduce the warning on the details pattern page in Firefox Nightly with Dev Tools open. Investigate whether calling Mzp.Supports.details() triggers the forced layout before page loading completes. Done means the feature detection no longer causes the reported premature layout, or its invocation is safely deferred if that is necessary.