Allow as=style and as=json for <link rel=modulepreload>

Updates the definition of rel=modulepreload to support as=style and as=json for preloading style and JSON module scripts respectively. Also clarify the allowed values for rel=preload with a new "preload destination" concept.

Fixes #10233.

Author: KurtCattiSchmidt

source

@@ -16397,17 +16397,19 @@ interface <dfn interface>HTMLLinkElement</dfn> : <span>HTMLElement</span> {
   <hr>
 
   <p>The <dfn element-attr for="link"><code data-x="attr-link-as">as</code></dfn> attribute
-  specifies the <span data-x="concept-potential-destination">potential destination</span> for a
-  preload request for the resource given by the <code data-x="attr-link-href">href</code> attribute.
-  It is an <span>enumerated attribute</span>. Each <span
-  data-x="concept-potential-destination">potential destination</span> is a keyword for this
+  specifies either a <span>preload destination</span> or a <span>module preload destination</span>
+  for a preload request for the resource given by the <code data-x="attr-link-href">href</code>
+  attribute. It is an <span>enumerated attribute</span>. Each of the union of <span
+  data-x="preload destination">preload destinations</span> and <span
+  data-x="module preload destination">module preload destinations</span> is a keyword for this
   attribute, mapping to a state of the same name. The attribute must be specified on
   <code>link</code> elements that have a <code data-x="attr-link-rel">rel</code> attribute that
-  contains the <code data-x="rel-preload">preload</code> keyword. It may be specified on
-  <code>link</code> elements that have a <code data-x="attr-link-rel">rel</code> attribute that
-  contains the <code data-x="rel-modulepreload">modulepreload</code> keyword; in such cases it must
-  have a value which is a <span data-x="concept-script-like-destination">script-like
-  destination</span>. For other <code>link</code> elements, it must not be specified.</p>
+  contains the <code data-x="rel-preload">preload</code> keyword; in such cases it must have a
+  value which is a <span>preload destination</span>. It may be specified on <code>link</code>
+  elements that have a <code data-x="attr-link-rel">rel</code> attribute that contains the
+  <code data-x="rel-modulepreload">modulepreload</code> keyword; in such cases it must have a value
+  which is a <span>module preload destination</span>. For other <code>link</code> elements, it must
+  not be specified.</p>
 
   <p w-nodev>The processing model for how the <code data-x="attr-link-as">as</code> attribute is
   used is given in an individual link type's <span>fetch and process the linked resource</span>
@@ -27474,7 +27476,7 @@ document.body.appendChild(wbr);</code></pre>
      <td colspan="2"><em>not allowed</em></td>
      <td class="yes"> Yes </td>
      <td class="yes"> Yes </td>
-     <td>Specifies that the user agent must preemptively <span data-x="concept-fetch">fetch</span> and cache the target resource for current <span data-x="navigate">navigation</span> according to the <span data-x="concept-potential-destination">potential destination</span> given by the <code data-x="attr-link-as">as</code> attribute (and the <span data-x="concept-request-priority">priority</span> associated with the <span data-x="concept-potential-destination-translate">corresponding</span> <span data-x="concept-request-destination">destination</span>).</td>
+     <td>Specifies that the user agent must preemptively <span data-x="concept-fetch">fetch</span> and cache the target resource for current <span data-x="navigate">navigation</span> according to the <span>preload destination</span> given by the <code data-x="attr-link-as">as</code> attribute (and the <span data-x="concept-request-priority">priority</span> associated with the <span data-x="concept-potential-destination-translate">corresponding</span> <span data-x="concept-request-destination">destination</span>).</td>
     </tr>
 
     <tr>
@@ -28340,6 +28342,10 @@ document.body.appendChild(wbr);</code></pre>
 
   <p>A user agent must not <span>delay the load event</span> for this link type.</p>
 
+  A <dfn>module preload destination</dfn> is "<code data-x="">json</code>", "<code
+  data-x="">style</code>", or a <span
+  data-x="concept-script-like-destination">script-like destination</span>.
+
   <div algorithm>
   <p>The appropriate times to <span>fetch and process the linked resource</span> for such a link
   are:</p>
@@ -28382,11 +28388,10 @@ document.body.appendChild(wbr);</code></pre>
    data-x="concept-request-destination">destination</span>), or "<code data-x="">script</code>" if
    it is in no state.</p></li>
 
-   <li><p>If <var>destination</var> is not <span
-   data-x="concept-script-like-destination">script-like</span>, then <span>queue an element
-   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 a <span>module preload destination</span>, then
+   <span>queue an element 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>Let <var>url</var> be the result of <span>encoding-parsing a URL</span> given
    <var>el</var>'s <code data-x="attr-link-href">href</code> attribute's value, relative to
@@ -28800,9 +28805,8 @@ document.body.appendChild(wbr);</code></pre>
 
   <p>The <code data-x="rel-preload">preload</code> keyword indicates that the user agent will
   preemptively <span data-x="concept-fetch">fetch</span> and cache the specified resource according
-  to the <span data-x="concept-potential-destination">potential destination</span> given by the
-  <code data-x="attr-link-as">as</code> attribute, and the <span
-  data-x="concept-request-priority">priority</span> given by the <code
+  to the <span>preload destination</span> given by the <code data-x="attr-link-as">as</code>
+  attribute, and the <span data-x="concept-request-priority">priority</span> given by the <code
   data-x="attr-link-fetchpriority">fetchpriority</code> attribute, as it is highly likely that the
   user will require this resource for the current navigation.
 
@@ -28861,8 +28865,8 @@ document.body.appendChild(wbr);</code></pre>
    <dt><dfn data-x="preload URL">URL</dfn>
    <dd>A <span>URL</span>
 
-   <dt><dfn data-x="preload destination">destination</dfn>
-   <dd>A string
+   <dt><dfn data-x="preload-key-destination">destination</dfn>
+   <dd>A <span>preload destination</span>
 
    <dt><dfn data-x="preload mode">mode</dfn>
    <dd>A <span data-x="concept-request-mode">request mode</span>, either
@@ -28996,9 +29000,6 @@ document.body.appendChild(wbr);</code></pre>
      <li><p><var>destination</var> is "<code data-x="">font</code>" and
      <var>mimeTypeRecord</var> is a <span>font MIME type</span>;</p></li>
 
-     <li><p><var>destination</var> is "<code data-x="">json</code>" and
-     <var>mimeTypeRecord</var> is a <span>JSON MIME type</span>;</p></li>
-
      <li><p><var>destination</var> is "<code data-x="">style</code>" and
      <var>mimeTypeRecord</var>'s <span data-x="MIME type essence">essence</span> is
      <code>text/css</code>; or</p></li>
@@ -29026,13 +29027,16 @@ document.body.appendChild(wbr);</code></pre>
   data-x="concept-request-credentials-mode">credentials mode</span>.</p>
   </div>
 
+  A <dfn>preload destination</dfn> is "<code data-x="">fetch</code>", "<code
+  data-x="">font</code>", "<code data-x="">image</code>", "<code data-x="">script</code>", "<code
+  data-x="">style</code>", or "<code data-x="">track</code>".
+
   <div algorithm>
   <p>To <dfn>translate a preload destination</dfn> given a string <var>destination</var>:</p>
 
   <ol>
-   <li><p>If <var>destination</var> is not "<code data-x="">fetch</code>", "<code data-x="">font</code>",
-   "<code data-x="">image</code>", "<code data-x="">script</code>", "<code data-x="">style</code>",
-   or "<code data-x="">track</code>", then return null.</p></li>
+   <li><p>If <var>destination</var> is not a <span>preload destination</span>, then return
+   null.</p></li>
 
    <li><p>Return the result of <span
    data-x="concept-potential-destination-translate">translating</span>
@@ -153116,8 +153120,8 @@ interface <dfn interface>External</dfn> {
     <tr>
      <th> <code data-x="">as</code>
      <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> Destination 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>Preload destination</span>, for <code data-x="attr-link-rel">rel</code>="<code data-x="rel-preload">preload</code>"; <span>module preload destination</span>, for <code data-x="attr-link-rel">rel</code>="<code data-x="rel-modulepreload">modulepreload</code>"
     <tr>
      <th> <code data-x="">async</code>
      <td> <code data-x="attr-script-async">script</code>
@@ -157000,6 +157004,7 @@ INSERT INTERFACES HERE
   Kristof Zelechovski,
   Krzysztof Maczy&#x0144;ski,
   &#x9ed2;&#x6fa4;&#x525b;&#x5fd7; (Kurosawa Takeshi),
+  Kurt Catti-Schmidt,
   Kyle Barnhart,
   Kyle Hofmann<!-- Ozob -->,
   Kyle Huey,