Add Support for local <style> tag internal references for <link> tags

source

@@ -15999,6 +15999,88 @@ interface <dfn interface>HTMLLinkElement</dfn> : <span>HTMLElement</span> {
   and process, e.g., because it is waiting for the resource to be needed, do not <span>delay the
   load event</span>.)</p>
 
+  <h5><span id="sharing-a-resource-from-a-link-element"></span>Sharing an internal resource
+  between a <code>link</code> element and a <code>style</code> element</h5>
+
+  <p id="link-internal-resource">All <span data-x="internal resource link">internal resource
+  links</span> with the <code data-x="attr-link-rel">rel</code> attribute containing the keyword
+  <code data-x="rel-stylesheet">stylesheet</code> have a
+  <span>share the local style resource</span> algorithm, which takes a <code>link</code> element
+  <var>el</var>.
+
+  <p>The <dfn>share the local style resource</dfn>, given a <code>link</code> element
+    <var>el</var>, is as follows:</p>
+
+    <ol>
+      <li><p>Let <var>doc</var> be <var>el</var>'s <span>node document</span>.</p></li>
+
+      <li><p>Let <var>indicatedElement</var> be the result of <span
+      data-x="select the indicated part">selecting the indicated part</span> given <var>doc</var>
+      and <var>url</var>.</p></li>
+
+      <li>
+        <p>If all of the following are true:</p>
+
+        <ul>
+          <li><p><var>el</var> creates an <span>internal resource link</span>;</p></li>
+
+          <li><p><var>el</var> is <span>browsing-context connected</span>;</p></li>
+
+          <li><p><var>el</var>'s <code data-x="attr-link-rel">rel</code> attribute
+          contains <code data-x="rel-stylesheet">stylesheet</code>;</p></li>
+
+          <li><p><var>el</var>'s <code data-x="attr-link-media">media</code> attribute
+          <span>matches the environment</span>; and</p></li>
+
+          <li><p><var>indicatedElement</var> is a <code>style</code> element
+          whose associated <code>Document</code> is <var>doc</var>,</p></li>
+
+          <li><p><var>indicatedElement</var> is <span>browsing-context connected</span>;</p></li>
+
+          <li><p><var>indicatedElement</var> has an <span>associated CSS style sheet</span> that
+          does not have its
+          <span data-x="concept-css-style-sheet-disabled-flag">disabled flag</span>set;</p></li>
+        </ul>
+
+        <p>then share the <span>CSS style sheet</span> from <var>indicatedElement</var> with
+        <var>el</var>.</p>
+      </li>
+    </ol>
+
+    <p>Whenever a shared stylesheet <code>link</code> element <var>el</var>
+    <span>becomes browsing-context disconnected</span>, or <var>el</var>'s
+    <span data-x="dom-link-href">href attribute</span>'s value is changed <span
+    data-x="remove a CSS style sheet">remove the CSS style sheet</span> in question.</p>
+
+    <div class="example">
+      <p>In the following example, the page has been made yellow-on-blue using CSS. Without the
+      <code>link</code> tag, the content within the <code>template</code> would not have
+      yellow-on-blue text.</p>
+
+      <pre><code class="html">&lt;!DOCTYPE html>
+&lt;html lang="en">
+&lt;head>
+  &lt;title>Style sharing sample page&lt;/title>
+  &lt;style id="shared-styles">
+  * { background: navy; color: yellow; }
+  &lt;/style>
+&lt;/head>
+&lt;body>
+  &lt;h1>Sample styled content outside shadow&lt;/h1>
+  &lt;div>
+    &lt;template shadowrootmode="open">
+      &lt;link rel="stylesheet" href="#shared-styles">
+      &lt;h1>Sample styled content inside shadow&lt;/h1>
+    &lt;/template>
+  &lt;/div>
+&lt;/body>
+&lt;/html></code></pre>
+    </div>
+
+  <p class="note">Note that the shared styles are a live reference, so updates to the style rules
+  in the referenced <code>style</code> element will be reflected in the referenced
+  <code>link</code>'s CSS stylesheet.</p>
+
   <h5>Processing `<code data-x="http-link">Link</code>` headers</h5>
 
   <p>All link types that can be <span data-x="external resource link">external resource
@@ -26347,7 +26429,10 @@ document.body.appendChild(wbr);</code></pre>
 
     <tr>
      <td><code data-x="rel-stylesheet">stylesheet</code></td>
-     <td><span data-x="external resource link">External Resource</span></td>
+     <td>
+         <span data-x="external resource link">External Resource</span> or
+         <span data-x="internal resource link">Internal Resource</span>
+     </td>
      <td colspan="2"><em>not allowed</em></td>
      <td class="yes"> Yes </td>
      <td class="no"> &middot; </td>
@@ -27999,12 +28084,14 @@ document.body.appendChild(wbr);</code></pre>
   data-x="rel-stylesheet">stylesheet</code></dfn>"</h5>
 
   <p>The <code data-x="rel-stylesheet">stylesheet</code> keyword may be used with <code>link</code>
-  elements. This keyword creates an <span data-x="external resource link">external resource
-  link</span> that contributes to the styling processing model. This keyword is
-  <span>body-ok</span>.</p>
+  elements. This keyword creates either an <span data-x="external resource link">external resource
+  link</span> or an <span data-x="internal resource link">internal resource link</span> that
+  contributes to the styling processing model. This keyword is <span>body-ok</span>.</p>
 
-  <p>The specified resource is a <span>CSS style sheet</span> that describes how to present the
-  document.</p>
+  <p>The specified resource is a <span>CSS style sheet</span> for <span
+  data-x="external resource link">external resource links</span> or an <span
+  data-x="internal resource link">internal resource link</span> to a <code>style</code> element
+  that describes how to present the document.</p>
 
   <p>If the <code data-x="rel-alternate">alternate</code> keyword is also specified on the
   <code>link</code> element, then <dfn id="the-link-is-an-alternative-stylesheet">the link is an
@@ -147649,6 +147736,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,