Allow "style" and "json" in `as` attribute for `modulepreload` #11981

KurtCattiSchmidt · 2025-12-02T19:26:51Z

Updates the definition of modulepreload to support as="style" and as="json" for preloading style and JSON module scripts respectively.

Fixes #10233

At least two implementers are interested (and none opposed):
- Chromium
- WebKit
Tests are written and can be reviewed and commented upon at:
- [CSS Modules] Add tests for modulepreload links with JSON and CSS, remove json with non-module preload web-platform-tests/wpt#56617
Implementation bugs are filed:
- Chromium: https://issues.chromium.org/issues/466888680
- Gecko: https://bugzilla.mozilla.org/show_bug.cgi?id=2004751
- WebKit: https://bugs.webkit.org/show_bug.cgi?id=303761
- Deno (only for timers, structured clone, base64 utils, channel messaging, module resolution, web workers, and web storage): …
- Node.js (only for timers, structured clone, base64 utils, channel messaging, and module resolution): …
Corresponding HTML AAM & ARIA in HTML issues & PRs: N/A, as this feature is unrelated to accessibility.
MDN issue is filed: PR here: Updates to modulepreload and preload to incorporate WHATWG changes for "style" and "json" mdn/content#42333
The top of this comment includes a clear commit message to use.

(See WHATWG Working Mode: Changes for more details.)

/acknowledgements.html ( diff )
/indices.html ( diff )
/links.html ( diff )
/semantics.html ( diff )

annevk

Should we also disallow "json" for <link rel=preload>?

source

KurtCattiSchmidt · 2025-12-05T22:04:36Z

Should we also disallow "json" for <link rel=preload>?

You're right, "json" doesn't really make sense in preload if it's supported for modulepreload. I think this should be handled separately though, because WebKit recently added support for <link rel=preload as=json>, and we can have both for some window of time.

Filed #11995 to track and discuss separately.

annevk · 2025-12-08T07:20:55Z

I'd rather tackle them together as I have a feeling #11995 will not be addressed anytime soon otherwise. And it would be good to have that infrastructure in place as we add more types, such as text and bytes.

KurtCattiSchmidt · 2025-12-08T17:40:28Z

I assumed there would be some window of overlap between the new and deprecated version, which is why I filed a separate bug. But if we can do them in one shot that's great. This feature is a little different in that it's not directly observable, so it does seem safe to just deprecate.

I'll update this PR to remove <link type="preload" as="json"> today.

@rniwa - you recently added support for <link type="preload" as="json"> in WebKit so your input here is appreciated.

KurtCattiSchmidt · 2025-12-08T21:55:59Z

Latest push handles removing "json" for "preload". I also added the implementation bugs. I'll work on tests next.

KurtCattiSchmidt · 2025-12-09T22:55:04Z

Tests and MDN PR's have been are added, so the only missing part in compliance above is "two implementors are interested". @rniwa - can you give a WebKit position in https://bugs.webkit.org/show_bug.cgi?id=303761?

bakkot · 2025-12-11T21:18:54Z

Note that the set of module types might be expanding - there's active proposals for text and bytes imports from JS.

KurtCattiSchmidt · 2025-12-12T01:54:12Z

@annevk - you mentioned a missing conformance section for the as attribute, but I don't see an existing section for it, just https://html.spec.whatwg.org/#attr-link-as. Is this something I should add? Or is the table I edited in this PR under https://html.spec.whatwg.org/#attributes-3 sufficient?

annevk · 2025-12-17T09:28:04Z

@KurtCattiSchmidt those are the conformance requirements. You'll have to adjust the wording there to make it clear json is not a valid potential destination. Maybe something like:

Each potential destination except for "json" is a keyword for this attribute ...

Or maybe define preload destination as a concept which takes care of that.

KurtCattiSchmidt · 2025-12-18T00:55:12Z

Thanks @annevk - it was awkward updating "potential destination" to exclude "json" everywhere, so I added a preload destination concept. This reduced some duplication elsewhere too.

noamr · 2025-12-18T16:20:47Z

source

+  A <dfn data-x="concept-preload-destination">preload destination</dfn> is a <span
+  data-x="concept-potential-destination">potential destination</span>, excluding "<code
+  data-x="">json</code>" when used with <code data-x="rel-preload">preload</code> links, and is
+  either "<code data-x="">json</code>", "<code data-x="">style</code>", or a <span


Sounds like those are two different destinations then? A preload destination and a modulepreload destination?

smaug---- · 2025-12-18T16:37:13Z

source

@@ -16396,18 +16390,23 @@ interface <dfn interface>HTMLLinkElement</dfn> : <span>HTMLElement</span> {

  <hr>

+  A <dfn data-x="concept-preload-destination">preload destination</dfn> is a <span
+  data-x="concept-potential-destination">potential destination</span>, excluding "<code
+  data-x="">json</code>" when used with <code data-x="rel-preload">preload</code> links, and is


Excluding a single thing this way is a bit icky special case, and special cases tend to cause issues later. Would there be some other way to express this (if we need to exclude json. Not sure why we need to, but perhaps it doesn't matter too much.).

noamr · 2025-12-18T17:28:43Z

Should we also disallow "json" for <link rel=preload>?

It's already disallowed. See https://html.spec.whatwg.org/multipage/links.html#translate-a-preload-destination
It's probably enough to add json and style to modulepreload specifically.

KurtCattiSchmidt · 2025-12-18T18:31:22Z

Should we also disallow "json" for <link rel=preload>?

It's already disallowed. See https://html.spec.whatwg.org/multipage/links.html#translate-a-preload-destination It's probably enough to add json and style to modulepreload specifically.

Not exactly, https://html.spec.whatwg.org/#consume-a-preloaded-resource lists JSON as a preload destination. I reverted to the prior commit in this PR, which removes that part and adds "style" and "json" to modulepreload. Does this version look correct @noamr?

noamr · 2025-12-18T21:55:03Z

source

     <td> <code data-x="attr-link-as">link</code>
     <td> <span data-x="concept-potential-destination">Potential destination</span> for a preload request (for <code data-x="attr-link-rel">rel</code>="<code data-x="rel-preload">preload</code>" and <code data-x="attr-link-rel">rel</code>="<code data-x="rel-modulepreload">modulepreload</code>")
-     <td> <span data-x="concept-potential-destination">Potential destination</span>, for <code data-x="attr-link-rel">rel</code>="<code data-x="rel-preload">preload</code>"; <span data-x="concept-script-like-destination">script-like destination</span>, for <code data-x="attr-link-rel">rel</code>="<code data-x="rel-modulepreload">modulepreload</code>"
+     <td> <span data-x="concept-potential-destination">Potential destination</span>, for <code data-x="attr-link-rel">rel</code>="<code data-x="rel-preload">preload</code>", excluding "<code data-x="">json</code>"; "<code data-x="">json</code>", "<code data-x="">style</code>", or a <span data-x="concept-script-like-destination">script-like destination</span> for <code data-x="attr-link-rel">rel</code>="<code data-x="rel-modulepreload">modulepreload</code>"


Don't need the "excluding json". It's a subset of potential destination, we can either say "potential destination" for preload or call out the options ("fetch", "font", "image", "script", "style", or "track").

Left it as "potential destination"

noamr · 2025-12-18T21:55:43Z

source

-   task</span> on the <span>networking task source</span> given <var>el</var> to <span
-   data-x="concept-event-fire">fire an event</span> named <code data-x="event-error">error</code>
-   at <var>el</var>, and return.</p></li>
+   <li><p>If <var>destination</var> is not "<code data-x="">json</code>","<code


Perhaps have a definition of "module destination" which is json, style or a script-like destination, and refer to it from both places.

Called it "module preload destination", as the new definition is unfortunately specific to module preloads. Modules in general use "javascript-or-wasm" for as="script".

KurtCattiSchmidt added 2 commits December 2, 2025 11:06

Initial commit

4648338

Wrapping json and style in <code> blocks

9ba538e

KurtCattiSchmidt changed the title ~~Expanding <link type="modulepreload"> to allow "style" and "json" in as attribute~~ Allow "style" and "json" in as attribute in modulepreload Dec 2, 2025

KurtCattiSchmidt changed the title ~~Allow "style" and "json" in as attribute in modulepreload~~ Allow "style" and "json" in as attribute for modulepreload Dec 2, 2025

KurtCattiSchmidt mentioned this pull request Dec 3, 2025

Upcoming WHATNOT meeting on 2025-12-04 #11982

Closed

annevk reviewed Dec 3, 2025

View reviewed changes

source Outdated Show resolved Hide resolved

KurtCattiSchmidt mentioned this pull request Dec 5, 2025

Deprecate JSON as preload destination in favor of modulepreload #11995

Open

KurtCattiSchmidt added 2 commits December 5, 2025 14:13

Adding comma, fixing line breaking, and adding missing 'destination'

901f5ea

Fixing trailing whitespace

d0b0497

Removing JSON from preload

7bf83f8

This was referenced Dec 9, 2025

[CSS Modules] Add tests for modulepreload links with JSON and CSS, remove json with non-module preload web-platform-tests/wpt#56617

Open

Updates to modulepreload and preload to incorporate WHATWG changes for "style" and "json" mdn/content#42333

Open

KurtCattiSchmidt mentioned this pull request Dec 11, 2025

Upcoming WHATNOT meeting on 2025-12-11 #11989

Closed

KurtCattiSchmidt mentioned this pull request Dec 15, 2025

Upcoming WHATNOT meeting on 2025-12-18 #12015

Closed

Adding preload destination concept

74887d7

cwilso added the agenda+ To be discussed at a triage meeting label Dec 18, 2025

noamr reviewed Dec 18, 2025

View reviewed changes

smaug---- reviewed Dec 18, 2025

View reviewed changes

Removing preload destination concept

c0cbc7e

noamr reviewed Dec 18, 2025

View reviewed changes

Adding module preload destination concept

b32eac5

Allow "style" and "json" in as attribute for modulepreload #11981

Are you sure you want to change the base?

Allow "style" and "json" in as attribute for modulepreload #11981

Conversation

KurtCattiSchmidt commented Dec 2, 2025 • edited by pr-preview bot Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

annevk left a comment • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

KurtCattiSchmidt commented Dec 5, 2025

Uh oh!

annevk commented Dec 8, 2025

Uh oh!

KurtCattiSchmidt commented Dec 8, 2025

Uh oh!

KurtCattiSchmidt commented Dec 8, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

KurtCattiSchmidt commented Dec 9, 2025

Uh oh!

bakkot commented Dec 11, 2025

Uh oh!

KurtCattiSchmidt commented Dec 12, 2025

Uh oh!

annevk commented Dec 17, 2025

Uh oh!

KurtCattiSchmidt commented Dec 18, 2025

Uh oh!

noamr Dec 18, 2025

Choose a reason for hiding this comment

Uh oh!

smaug---- Dec 18, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

noamr commented Dec 18, 2025

Uh oh!

KurtCattiSchmidt commented Dec 18, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

noamr Dec 18, 2025

Choose a reason for hiding this comment

Uh oh!

KurtCattiSchmidt Dec 18, 2025

Choose a reason for hiding this comment

Uh oh!

noamr Dec 18, 2025

Choose a reason for hiding this comment

Uh oh!

KurtCattiSchmidt Dec 18, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Milestone

Development

Uh oh!

6 participants

Allow "style" and "json" in `as` attribute for `modulepreload` #11981

Allow "style" and "json" in `as` attribute for `modulepreload` #11981

KurtCattiSchmidt commented Dec 2, 2025 •

edited by pr-preview bot

Loading

annevk left a comment •

edited

Loading

KurtCattiSchmidt commented Dec 8, 2025 •

edited

Loading

smaug---- Dec 18, 2025 •

edited

Loading

KurtCattiSchmidt commented Dec 18, 2025 •

edited

Loading

KurtCattiSchmidt Dec 18, 2025 •

edited

Loading