diff --git a/packages/react-devtools-shared/src/backend/renderer.js b/packages/react-devtools-shared/src/backend/renderer.js
index 4d71e6e9f0d67..abd1327c0de01 100644
--- a/packages/react-devtools-shared/src/backend/renderer.js
+++ b/packages/react-devtools-shared/src/backend/renderer.js
@@ -223,7 +223,7 @@ export function getInternalReactConstants(version: string): {
       HostComponent: 5,
       HostPortal: 4,
       HostRoot: 3,
-      HostResource: 26, // In reality, 18.2+. But doesn't hurt to include it here
+      HostHoistable: 26, // In reality, 18.2+. But doesn't hurt to include it here
       HostSingleton: 27, // Same as above
       HostText: 6,
       IncompleteClassComponent: 17,
@@ -257,7 +257,7 @@ export function getInternalReactConstants(version: string): {
       HostComponent: 5,
       HostPortal: 4,
       HostRoot: 3,
-      HostResource: -1, // Doesn't exist yet
+      HostHoistable: -1, // Doesn't exist yet
       HostSingleton: -1, // Doesn't exist yet
       HostText: 6,
       IncompleteClassComponent: 17,
@@ -290,7 +290,7 @@ export function getInternalReactConstants(version: string): {
       HostComponent: 5,
       HostPortal: 4,
       HostRoot: 3,
-      HostResource: -1, // Doesn't exist yet
+      HostHoistable: -1, // Doesn't exist yet
       HostSingleton: -1, // Doesn't exist yet
       HostText: 6,
       IncompleteClassComponent: 17,
@@ -323,7 +323,7 @@ export function getInternalReactConstants(version: string): {
       HostComponent: 7,
       HostPortal: 6,
       HostRoot: 5,
-      HostResource: -1, // Doesn't exist yet
+      HostHoistable: -1, // Doesn't exist yet
       HostSingleton: -1, // Doesn't exist yet
       HostText: 8,
       IncompleteClassComponent: -1, // Doesn't exist yet
@@ -356,7 +356,7 @@ export function getInternalReactConstants(version: string): {
       HostComponent: 5,
       HostPortal: 4,
       HostRoot: 3,
-      HostResource: -1, // Doesn't exist yet
+      HostHoistable: -1, // Doesn't exist yet
       HostSingleton: -1, // Doesn't exist yet
       HostText: 6,
       IncompleteClassComponent: -1, // Doesn't exist yet
@@ -397,7 +397,7 @@ export function getInternalReactConstants(version: string): {
     IndeterminateComponent,
     ForwardRef,
     HostRoot,
-    HostResource,
+    HostHoistable,
     HostSingleton,
     HostComponent,
     HostPortal,
@@ -465,7 +465,7 @@ export function getInternalReactConstants(version: string): {
         return null;
       case HostComponent:
       case HostSingleton:
-      case HostResource:
+      case HostHoistable:
         return type;
       case HostPortal:
       case HostText:
@@ -591,7 +591,7 @@ export function attach(
     Fragment,
     FunctionComponent,
     HostRoot,
-    HostResource,
+    HostHoistable,
     HostSingleton,
     HostPortal,
     HostComponent,
@@ -1032,7 +1032,7 @@ export function attach(
       case HostRoot:
         return ElementTypeRoot;
       case HostComponent:
-      case HostResource:
+      case HostHoistable:
       case HostSingleton:
         return ElementTypeHostComponent;
       case HostPortal:
diff --git a/packages/react-devtools-shared/src/backend/types.js b/packages/react-devtools-shared/src/backend/types.js
index ef03c5717a505..3bf60b8cb5416 100644
--- a/packages/react-devtools-shared/src/backend/types.js
+++ b/packages/react-devtools-shared/src/backend/types.js
@@ -40,7 +40,7 @@ export type WorkTagMap = {
   HostComponent: WorkTag,
   HostPortal: WorkTag,
   HostRoot: WorkTag,
-  HostResource: WorkTag,
+  HostHoistable: WorkTag,
   HostSingleton: WorkTag,
   HostText: WorkTag,
   IncompleteClassComponent: WorkTag,
diff --git a/packages/react-devtools-shared/src/devtools/views/Components/InspectedElementStateTree.js b/packages/react-devtools-shared/src/devtools/views/Components/InspectedElementStateTree.js
index f3a83da5ea628..a1767f7f6e07c 100644
--- a/packages/react-devtools-shared/src/devtools/views/Components/InspectedElementStateTree.js
+++ b/packages/react-devtools-shared/src/devtools/views/Components/InspectedElementStateTree.js
@@ -36,7 +36,7 @@ export default function InspectedElementStateTree({
 }: Props): React.Node {
   const {state, type} = inspectedElement;
 
-  // HostSingleton and HostResource may have state that we don't want to expose to users
+  // HostSingleton and HostHoistable may have state that we don't want to expose to users
   const isHostComponent = type === ElementTypeHostComponent;
 
   const entries = state != null ? Object.entries(state) : null;
diff --git a/packages/react-dom-bindings/src/client/ReactDOMComponentTree.js b/packages/react-dom-bindings/src/client/ReactDOMComponentTree.js
index aa28e7e13c6a6..58244b6ef47a0 100644
--- a/packages/react-dom-bindings/src/client/ReactDOMComponentTree.js
+++ b/packages/react-dom-bindings/src/client/ReactDOMComponentTree.js
@@ -7,7 +7,7 @@
  * @flow
  */
 
-import type {FloatRoot, RootResources} from './ReactDOMFloatClient';
+import type {HoistableRoot, RootResources} from './ReactDOMFloatClient';
 import type {Fiber} from 'react-reconciler/src/ReactInternalTypes';
 import type {ReactScopeInstance} from 'shared/ReactTypes';
 import type {
@@ -24,7 +24,7 @@ import type {
 
 import {
   HostComponent,
-  HostResource,
+  HostHoistable,
   HostSingleton,
   HostText,
   HostRoot,
@@ -178,7 +178,7 @@ export function getInstanceFromNode(node: Node): Fiber | null {
       tag === HostComponent ||
       tag === HostText ||
       tag === SuspenseComponent ||
-      (enableFloat ? tag === HostResource : false) ||
+      (enableFloat ? tag === HostHoistable : false) ||
       (enableHostSingletons ? tag === HostSingleton : false) ||
       tag === HostRoot
     ) {
@@ -198,7 +198,7 @@ export function getNodeFromInstance(inst: Fiber): Instance | TextInstance {
   const tag = inst.tag;
   if (
     tag === HostComponent ||
-    (enableFloat ? tag === HostResource : false) ||
+    (enableFloat ? tag === HostHoistable : false) ||
     (enableHostSingletons ? tag === HostSingleton : false) ||
     tag === HostText
   ) {
@@ -277,14 +277,12 @@ export function doesTargetHaveEventHandle(
   return eventHandles.has(eventHandle);
 }
 
-export function getResourcesFromRoot(root: FloatRoot): RootResources {
+export function getResourcesFromRoot(root: HoistableRoot): RootResources {
   let resources = (root: any)[internalRootNodeResourcesKey];
   if (!resources) {
     resources = (root: any)[internalRootNodeResourcesKey] = {
-      styles: new Map(),
-      scripts: new Map(),
-      head: new Map(),
-      lastStructuredMeta: new Map(),
+      hoistableStyles: new Map(),
+      hoistableScripts: new Map(),
     };
   }
   return resources;
diff --git a/packages/react-dom-bindings/src/client/ReactDOMFloatClient.js b/packages/react-dom-bindings/src/client/ReactDOMFloatClient.js
index 3ea7dfe16d115..33d2800ec37e4 100644
--- a/packages/react-dom-bindings/src/client/ReactDOMFloatClient.js
+++ b/packages/react-dom-bindings/src/client/ReactDOMFloatClient.js
@@ -9,23 +9,24 @@
 
 import type {Instance, Container} from './ReactDOMHostConfig';
 
+import {isAttributeNameSafe} from '../shared/DOMProperty';
+import {precacheFiberNode} from './ReactDOMComponentTree';
+
 import ReactDOMSharedInternals from 'shared/ReactDOMSharedInternals.js';
 const {Dispatcher} = ReactDOMSharedInternals;
 import {DOCUMENT_NODE} from '../shared/HTMLNodeType';
 import {
-  warnOnMissingHrefAndRel,
-  validatePreloadResourceDifference,
-  validateURLKeyedUpdatedProps,
-  validateStyleResourceDifference,
-  validateScriptResourceDifference,
-  validateLinkPropsForStyleResource,
-  validateLinkPropsForPreloadResource,
   validatePreloadArguments,
   validatePreinitArguments,
 } from '../shared/ReactDOMResourceValidation';
 import {createElement, setInitialProperties} from './ReactDOMComponent';
+import {
+  checkAttributeStringCoercion,
+  checkPropStringCoercion,
+} from 'shared/CheckStringCoercion';
 import {
   getResourcesFromRoot,
+  isMarkedResource,
   markNodeAsResource,
 } from './ReactDOMComponentTree';
 import {HTML_NAMESPACE, SVG_NAMESPACE} from '../shared/DOMNamespaces';
@@ -35,128 +36,48 @@ import {getCurrentRootHostContainer} from 'react-reconciler/src/ReactFiberHostCo
 // In the future this may need to change, especially when modules / scripts are supported
 type ResourceType = 'style' | 'font' | 'script';
 
-type PreloadProps = {
-  rel: 'preload',
-  href: string,
-  [string]: mixed,
+type HoistableTagType = 'link' | 'meta' | 'title' | 'script' | 'style';
+type TResource<T: 'stylesheet' | 'style' | 'script' | 'void'> = {
+  type: T,
+  instance: null | Instance,
+  count: number,
 };
-type PreloadResource = {
-  type: 'preload',
-  href: string,
-  ownerDocument: Document,
-  props: PreloadProps,
-  instance: Element,
+type StylesheetResource = TResource<'stylesheet'>;
+type StyleTagResource = TResource<'style'>;
+type StyleResource = StyleTagResource | StylesheetResource;
+type ScriptResource = TResource<'script'>;
+type VoidResource = TResource<'void'>;
+type Resource = StyleResource | ScriptResource | VoidResource;
+
+type StyleTagProps = {
+  'data-href': string,
+  'data-precedence': string,
+  [string]: mixed,
 };
-
-type StyleProps = {
+type StylesheetProps = {
   rel: 'stylesheet',
   href: string,
   'data-precedence': string,
   [string]: mixed,
 };
-type StyleResource = {
-  type: 'style',
-
-  // Ref count for resource
-  count: number,
 
-  // Resource Descriptors
-  href: string,
-  precedence: string,
-  props: StyleProps,
-
-  // Related Resources
-  hint: ?PreloadResource,
-
-  // Insertion
-  preloaded: boolean,
-  loaded: boolean,
-  error: mixed,
-  instance: ?Element,
-  root: FloatRoot,
-};
 type ScriptProps = {
   src: string,
+  async: true,
   [string]: mixed,
 };
-type ScriptResource = {
-  type: 'script',
-  src: string,
-  props: ScriptProps,
-
-  instance: ?Element,
-  root: FloatRoot,
-};
-
-type TitleProps = {
-  [string]: mixed,
-};
-type TitleResource = {
-  type: 'title',
-  props: TitleProps,
-
-  count: number,
-  instance: ?Element,
-  root: Document,
-};
-
-type MetaProps = {
-  [string]: mixed,
-};
-type MetaResource = {
-  type: 'meta',
-  matcher: string,
-  property: ?string,
-  parentResource: ?MetaResource,
-  props: MetaProps,
-
-  count: number,
-  instance: ?Element,
-  root: Document,
-};
 
-type LinkProps = {
+type PreloadProps = {
+  rel: 'preload',
   href: string,
-  rel: string,
   [string]: mixed,
 };
-type LinkResource = {
-  type: 'link',
-  props: LinkProps,
-
-  count: number,
-  instance: ?Element,
-  root: Document,
-};
-
-type BaseResource = {
-  type: 'base',
-  matcher: string,
-  props: Props,
-
-  count: number,
-  instance: ?Element,
-  root: Document,
-};
-
-type Props = {[string]: mixed};
-
-type HeadResource = TitleResource | MetaResource | LinkResource | BaseResource;
-type Resource = StyleResource | ScriptResource | PreloadResource | HeadResource;
 
 export type RootResources = {
-  styles: Map<string, StyleResource>,
-  scripts: Map<string, ScriptResource>,
-  head: Map<string, HeadResource>,
-  lastStructuredMeta: Map<string, MetaResource>,
+  hoistableStyles: Map<string, StyleResource>,
+  hoistableScripts: Map<string, ScriptResource>,
 };
 
-// Brief on purpose due to insertion by script when streaming late boundaries
-// s = Status
-// l = loaded
-// e = errored
-type StyleResourceLoadingState = Promise<mixed> & {s?: 'l' | 'e'};
-
 // It is valid to preload even when we aren't actively rendering. For cases where Float functions are
 // called when there is no rendering we track the last used document. It is not safe to insert
 // arbitrary resources into the lastCurrentDocument b/c it may not actually be the document
@@ -184,13 +105,13 @@ export function cleanupAfterRenderResources() {
 // from Internals -> ReactDOM -> FloatClient -> Internals so this doesn't introduce a new one.
 export const ReactDOMClientDispatcher = {preload, preinit};
 
-export type FloatRoot = Document | ShadowRoot;
+export type HoistableRoot = Document | ShadowRoot;
 
 // global maps of Resources
-const preloadResources: Map<string, PreloadResource> = new Map();
+const preloadPropsMap: Map<string, PreloadProps> = new Map();
 
 // getRootNode is missing from IE and old jsdom versions
-function getRootNode(container: Container): FloatRoot {
+function getRootNode(container: Container): HoistableRoot {
   // $FlowFixMe[method-unbinding]
   return typeof container.getRootNode === 'function'
     ? /* $FlowFixMe[incompatible-return] Flow types this as returning a `Node`,
@@ -199,33 +120,11 @@ function getRootNode(container: Container): FloatRoot {
     : container.ownerDocument;
 }
 
-function getCurrentResourceRoot(): null | FloatRoot {
+function getCurrentResourceRoot(): null | HoistableRoot {
   const currentContainer = getCurrentRootHostContainer();
   return currentContainer ? getRootNode(currentContainer) : null;
 }
 
-// This resource type constraint can be loosened. It really is everything except PreloadResource
-// because that is the only one that does not have an optional instance type. Expand as needed.
-function resetInstance(resource: ScriptResource | HeadResource) {
-  resource.instance = undefined;
-}
-
-export function clearRootResources(rootContainer: Container): void {
-  const rootNode = getRootNode(rootContainer);
-  const resources = getResourcesFromRoot(rootNode);
-
-  // We can't actually delete the resource cache because this function is called
-  // during commit after we have rendered. Instead we detatch any instances from
-  // the Resource object if they are going to be cleared
-
-  // Styles stay put
-  // Scripts get reset
-  resources.scripts.forEach(resetInstance);
-  // Head Resources get reset
-  resources.head.forEach(resetInstance);
-  // lastStructuredMeta stays put
-}
-
 // Preloads are somewhat special. Even if we don't have the Document
 // used by the root that is rendering a component trying to insert a preload
 // we can still seed the file cache by doing the preload on any document we have
@@ -245,10 +144,15 @@ function getDocumentForPreloads(): ?Document {
   }
 }
 
-function getDocumentFromRoot(root: FloatRoot): Document {
+function getDocumentFromRoot(root: HoistableRoot): Document {
   return root.ownerDocument || root;
 }
 
+export function getHoistableRoot(container: Container): HoistableRoot {
+  // Flow thinks getRootNode returns Node but we know it is actualy either a Document or ShadowRoot
+  return ((container.getRootNode(): any): Document | ShadowRoot);
+}
+
 // --------------------------------------
 //      ReactDOM.Preload
 // --------------------------------------
@@ -267,22 +171,33 @@ function preload(href: string, options: PreloadOptions) {
     ownerDocument
   ) {
     const as = options.as;
-    const resource = preloadResources.get(href);
-    if (resource) {
-      if (__DEV__) {
-        const originallyImplicit =
-          (resource: any)._dev_implicit_construction === true;
-        const latestProps = preloadPropsFromPreloadOptions(href, as, options);
-        validatePreloadResourceDifference(
-          resource.props,
-          originallyImplicit,
-          latestProps,
-          false,
+    const limitedEscapedHref =
+      escapeSelectorAttributeValueInsideDoubleQuotes(href);
+    const preloadKey = `link[rel="preload"][as="${as}"][href="${limitedEscapedHref}"]`;
+    let key = preloadKey;
+    switch (as) {
+      case 'style':
+        key = getStyleKey(href);
+        break;
+      case 'script':
+        key = getScriptKey(href);
+        break;
+    }
+    if (!preloadPropsMap.has(key)) {
+      const preloadProps = preloadPropsFromPreloadOptions(href, as, options);
+      preloadPropsMap.set(key, preloadProps);
+
+      if (null === ownerDocument.querySelector(preloadKey)) {
+        const preloadInstance = createElement(
+          'link',
+          preloadProps,
+          ownerDocument,
+          HTML_NAMESPACE,
         );
+        setInitialProperties(preloadInstance, 'link', preloadProps);
+        markNodeAsResource(preloadInstance);
+        (ownerDocument.head: any).appendChild(preloadInstance);
       }
-    } else {
-      const resourceProps = preloadPropsFromPreloadOptions(href, as, options);
-      createPreloadResource(ownerDocument, href, resourceProps);
     }
   }
 }
@@ -326,20 +241,45 @@ function preinit(href: string, options: PreinitOptions) {
     const resourceRoot = getCurrentResourceRoot();
     const as = options.as;
     if (!resourceRoot) {
-      // We are going to emit a preload as a best effort fallback since this preinit
-      // was called outside of a render. Given the passive nature of this fallback
-      // we do not warn in dev when props disagree if there happens to already be a
-      // matching preload with this href
-      const preloadDocument = getDocumentForPreloads();
-      if (preloadDocument) {
-        const preloadResource = preloadResources.get(href);
-        if (!preloadResource) {
-          const preloadProps = preloadPropsFromPreinitOptions(
-            href,
-            as,
-            options,
-          );
-          createPreloadResource(preloadDocument, href, preloadProps);
+      if (as === 'style' || as === 'script') {
+        // We are going to emit a preload as a best effort fallback since this preinit
+        // was called outside of a render. Given the passive nature of this fallback
+        // we do not warn in dev when props disagree if there happens to already be a
+        // matching preload with this href
+        const preloadDocument = getDocumentForPreloads();
+        if (preloadDocument) {
+          const limitedEscapedHref =
+            escapeSelectorAttributeValueInsideDoubleQuotes(href);
+          const preloadKey = `link[rel="preload"][as="${as}"][href="${limitedEscapedHref}"]`;
+          let key = preloadKey;
+          switch (as) {
+            case 'style':
+              key = getStyleKey(href);
+              break;
+            case 'script':
+              key = getScriptKey(href);
+              break;
+          }
+          if (!preloadPropsMap.has(key)) {
+            const preloadProps = preloadPropsFromPreinitOptions(
+              href,
+              as,
+              options,
+            );
+            preloadPropsMap.set(key, preloadProps);
+
+            if (null === preloadDocument.querySelector(preloadKey)) {
+              const preloadInstance = createElement(
+                'link',
+                preloadProps,
+                preloadDocument,
+                HTML_NAMESPACE,
+              );
+              setInitialProperties(preloadInstance, 'link', preloadProps);
+              markNodeAsResource(preloadInstance);
+              (preloadDocument.head: any).appendChild(preloadInstance);
+            }
+          }
         }
       }
       return;
@@ -347,54 +287,98 @@ function preinit(href: string, options: PreinitOptions) {
 
     switch (as) {
       case 'style': {
-        const styleResources = getResourcesFromRoot(resourceRoot).styles;
+        const styles = getResourcesFromRoot(resourceRoot).hoistableStyles;
+
+        const key = getStyleKey(href);
         const precedence = options.precedence || 'default';
-        let resource = styleResources.get(href);
+
+        // Check if this resource already exists
+        let resource = styles.get(key);
         if (resource) {
-          if (__DEV__) {
-            const latestProps = stylePropsFromPreinitOptions(
-              href,
-              precedence,
-              options,
-            );
-            validateStyleResourceDifference(resource.props, latestProps);
-          }
-        } else {
-          const resourceProps = stylePropsFromPreinitOptions(
+          // We can early return. The resource exists and there is nothing
+          // more to do
+          return;
+        }
+
+        // Attempt to hydrate instance from DOM
+        let instance: null | Instance = resourceRoot.querySelector(
+          getStylesheetSelectorFromKey(key),
+        );
+        if (!instance) {
+          // Construct a new instance and insert it
+          const stylesheetProps = stylesheetPropsFromPreinitOptions(
             href,
             precedence,
             options,
           );
-          resource = createStyleResource(
-            styleResources,
+          const preloadProps = preloadPropsMap.get(key);
+          if (preloadProps) {
+            adoptPreloadPropsForStylesheet(stylesheetProps, preloadProps);
+          }
+          instance = createElement(
+            'link',
+            stylesheetProps,
             resourceRoot,
-            href,
-            precedence,
-            resourceProps,
+            HTML_NAMESPACE,
           );
+          markNodeAsResource(instance);
+          setInitialProperties(instance, 'link', stylesheetProps);
+          insertStylesheet(instance, precedence, resourceRoot);
         }
-        acquireResource(resource);
+
+        // Construct a Resource and cache it
+        resource = {
+          type: 'stylesheet',
+          instance,
+          count: 1,
+        };
+        styles.set(key, resource);
         return;
       }
       case 'script': {
         const src = href;
-        const scriptResources = getResourcesFromRoot(resourceRoot).scripts;
-        let resource = scriptResources.get(src);
+        const scripts = getResourcesFromRoot(resourceRoot).hoistableScripts;
+
+        const key = getScriptKey(src);
+
+        // Check if this resource already exists
+        let resource = scripts.get(key);
         if (resource) {
-          if (__DEV__) {
-            const latestProps = scriptPropsFromPreinitOptions(src, options);
-            validateScriptResourceDifference(resource.props, latestProps);
+          // We can early return. The resource exists and there is nothing
+          // more to do
+          return;
+        }
+
+        // Attempt to hydrate instance from DOM
+        let instance: null | Instance = resourceRoot.querySelector(
+          getScriptSelectorFromKey(key),
+        );
+        if (!instance) {
+          // Construct a new instance and insert it
+          const scriptProps = scriptPropsFromPreinitOptions(src, options);
+          // Adopt certain preload props
+          const preloadProps = preloadPropsMap.get(key);
+          if (preloadProps) {
+            adoptPreloadPropsForScript(scriptProps, preloadProps);
           }
-        } else {
-          const resourceProps = scriptPropsFromPreinitOptions(src, options);
-          resource = createScriptResource(
-            scriptResources,
+          instance = createElement(
+            'script',
+            scriptProps,
             resourceRoot,
-            src,
-            resourceProps,
+            HTML_NAMESPACE,
           );
+          markNodeAsResource(instance);
+          setInitialProperties(instance, 'link', scriptProps);
+          (getDocumentFromRoot(resourceRoot).head: any).appendChild(instance);
         }
-        acquireResource(resource);
+
+        // Construct a Resource and cache it
+        resource = {
+          type: 'script',
+          instance,
+          count: 1,
+        };
+        scripts.set(key, resource);
         return;
       }
     }
@@ -415,11 +399,11 @@ function preloadPropsFromPreinitOptions(
   };
 }
 
-function stylePropsFromPreinitOptions(
+function stylesheetPropsFromPreinitOptions(
   href: string,
   precedence: string,
   options: PreinitOptions,
-): StyleProps {
+): StylesheetProps {
   return {
     rel: 'stylesheet',
     href,
@@ -444,32 +428,24 @@ function scriptPropsFromPreinitOptions(
 //      Resources from render
 // --------------------------------------
 
-type StyleQualifyingProps = {
-  rel: 'stylesheet',
+type StyleTagQualifyingProps = {
   href: string,
   precedence: string,
   [string]: mixed,
 };
-type PreloadQualifyingProps = {
-  rel: 'preload',
+
+type StylesheetQualifyingProps = {
+  rel: 'stylesheet',
   href: string,
-  [string]: mixed,
-};
-type ScriptQualifyingProps = {
-  src: string,
-  async: true,
+  precedence: string,
   [string]: mixed,
 };
 
-function getTitleKey(child: string | number): string {
-  return 'title:' + child;
-}
-
 // This function is called in begin work and we should always have a currentDocument set
 export function getResource(
   type: string,
-  pendingProps: Props,
-  currentProps: null | Props,
+  currentProps: any,
+  pendingProps: any,
 ): null | Resource {
   const resourceRoot = getCurrentResourceRoot();
   if (!resourceRoot) {
@@ -478,515 +454,169 @@ export function getResource(
     );
   }
   switch (type) {
-    case 'base': {
-      const headRoot: Document = getDocumentFromRoot(resourceRoot);
-      const headResources = getResourcesFromRoot(headRoot).head;
-      const {target, href} = pendingProps;
-      let matcher = 'base';
-      matcher +=
-        typeof href === 'string'
-          ? `[href="${escapeSelectorAttributeValueInsideDoubleQuotes(href)}"]`
-          : ':not([href])';
-      matcher +=
-        typeof target === 'string'
-          ? `[target="${escapeSelectorAttributeValueInsideDoubleQuotes(
-              target,
-            )}"]`
-          : ':not([target])';
-      let resource = headResources.get(matcher);
-      if (!resource) {
-        resource = {
-          type: 'base',
-          matcher,
-          props: Object.assign({}, pendingProps),
-          count: 0,
-          instance: null,
-          root: headRoot,
-        };
-        headResources.set(matcher, resource);
-      }
-      return resource;
+    case 'meta':
+    case 'title': {
+      return null;
     }
-    case 'meta': {
-      let matcher, propertyString, parentResource;
-      const {charSet, content, httpEquiv, name, itemProp, property} =
-        pendingProps;
-      const headRoot: Document = getDocumentFromRoot(resourceRoot);
-      const {head: headResources, lastStructuredMeta} =
-        getResourcesFromRoot(headRoot);
-      if (typeof charSet === 'string') {
-        matcher = 'meta[charset]';
-      } else if (typeof content === 'string') {
-        if (typeof httpEquiv === 'string') {
-          matcher = `meta[http-equiv="${escapeSelectorAttributeValueInsideDoubleQuotes(
-            httpEquiv,
-          )}"][content="${escapeSelectorAttributeValueInsideDoubleQuotes(
-            content,
-          )}"]`;
-        } else if (typeof property === 'string') {
-          propertyString = property;
-          matcher = `meta[property="${escapeSelectorAttributeValueInsideDoubleQuotes(
-            property,
-          )}"][content="${escapeSelectorAttributeValueInsideDoubleQuotes(
-            content,
-          )}"]`;
-
-          const parentPropertyPath = property.split(':').slice(0, -1).join(':');
-          parentResource = lastStructuredMeta.get(parentPropertyPath);
-          if (parentResource) {
-            // When using parentResource the matcher is not functional for locating
-            // the instance in the DOM but it still serves as a unique key.
-            matcher = parentResource.matcher + matcher;
-          }
-        } else if (typeof name === 'string') {
-          matcher = `meta[name="${escapeSelectorAttributeValueInsideDoubleQuotes(
-            name,
-          )}"][content="${escapeSelectorAttributeValueInsideDoubleQuotes(
-            content,
-          )}"]`;
-        } else if (typeof itemProp === 'string') {
-          matcher = `meta[itemprop="${escapeSelectorAttributeValueInsideDoubleQuotes(
-            itemProp,
-          )}"][content="${escapeSelectorAttributeValueInsideDoubleQuotes(
-            content,
-          )}"]`;
-        }
-      }
-      if (matcher) {
-        let resource = headResources.get(matcher);
+    case 'style': {
+      if (
+        typeof pendingProps.precedence === 'string' &&
+        typeof pendingProps.href === 'string'
+      ) {
+        const key = getStyleKey(pendingProps.href);
+        const styles = getResourcesFromRoot(resourceRoot).hoistableStyles;
+        let resource = styles.get(key);
         if (!resource) {
           resource = {
-            type: 'meta',
-            matcher,
-            property: propertyString,
-            parentResource,
-            props: Object.assign({}, pendingProps),
-            count: 0,
+            type: 'style',
             instance: null,
-            root: headRoot,
+            count: 0,
           };
-          headResources.set(matcher, resource);
-        }
-        if (typeof resource.property === 'string') {
-          // We cast because flow doesn't know that this resource must be a Meta resource
-          lastStructuredMeta.set(resource.property, (resource: any));
+          styles.set(key, resource);
         }
         return resource;
       }
-      return null;
+      return {
+        type: 'void',
+        instance: null,
+        count: 0,
+      };
     }
-    case 'title': {
-      const children = pendingProps.children;
-      let child;
-      if (Array.isArray(children)) {
-        child = children.length === 1 ? children[0] : null;
-      } else {
-        child = children;
-      }
+    case 'link': {
       if (
-        typeof child !== 'function' &&
-        typeof child !== 'symbol' &&
-        child !== null &&
-        child !== undefined
+        pendingProps.rel === 'stylesheet' &&
+        typeof pendingProps.href === 'string' &&
+        typeof pendingProps.precedence === 'string'
       ) {
-        // eslint-disable-next-line react-internal/safe-string-coercion
-        const childString = '' + (child: any);
-        const headRoot: Document = getDocumentFromRoot(resourceRoot);
-        const headResources = getResourcesFromRoot(headRoot).head;
-        const key = getTitleKey(childString);
-        let resource = headResources.get(key);
+        const qualifiedProps: StylesheetQualifyingProps = pendingProps;
+        const key = getStyleKey(qualifiedProps.href);
+
+        const styles = getResourcesFromRoot(resourceRoot).hoistableStyles;
+
+        let resource = styles.get(key);
         if (!resource) {
-          const titleProps = titlePropsFromRawProps(childString, pendingProps);
+          // We asserted this above but Flow can't figure out that the type satisfies
+          const ownerDocument = getDocumentFromRoot(resourceRoot);
           resource = {
-            type: 'title',
-            props: titleProps,
-            count: 0,
+            type: 'stylesheet',
             instance: null,
-            root: headRoot,
+            count: 0,
           };
-          headResources.set(key, resource);
+          styles.set(key, resource);
+          if (!preloadPropsMap.has(key)) {
+            preloadStylesheet(
+              ownerDocument,
+              key,
+              preloadPropsFromStylesheet(qualifiedProps),
+            );
+          }
         }
         return resource;
       }
       return null;
     }
-    case 'link': {
-      const {rel} = pendingProps;
-      switch (rel) {
-        case 'stylesheet': {
-          const styleResources = getResourcesFromRoot(resourceRoot).styles;
-          let didWarn;
-          if (__DEV__) {
-            if (currentProps) {
-              didWarn = validateURLKeyedUpdatedProps(
-                pendingProps,
-                currentProps,
-                'style',
-                'href',
-              );
-            }
-            if (!didWarn) {
-              didWarn = validateLinkPropsForStyleResource(pendingProps);
-            }
-          }
-          const {precedence, href} = pendingProps;
-          if (typeof href === 'string' && typeof precedence === 'string') {
-            // We've asserted all the specific types for StyleQualifyingProps
-            const styleRawProps: StyleQualifyingProps = (pendingProps: any);
-
-            // We construct or get an existing resource for the style itself and return it
-            let resource = styleResources.get(href);
-            if (resource) {
-              if (__DEV__) {
-                if (!didWarn) {
-                  const latestProps = stylePropsFromRawProps(styleRawProps);
-                  if ((resource: any)._dev_preload_props) {
-                    adoptPreloadPropsForStyle(
-                      latestProps,
-                      (resource: any)._dev_preload_props,
-                    );
-                  }
-                  validateStyleResourceDifference(resource.props, latestProps);
-                }
-              }
-            } else {
-              const resourceProps = stylePropsFromRawProps(styleRawProps);
-              resource = createStyleResource(
-                styleResources,
-                resourceRoot,
-                href,
-                precedence,
-                resourceProps,
-              );
-              immediatelyPreloadStyleResource(resource);
-            }
-            return resource;
-          }
-          return null;
-        }
-        case 'preload': {
-          if (__DEV__) {
-            validateLinkPropsForPreloadResource(pendingProps);
-          }
-          const {href} = pendingProps;
-          if (typeof href === 'string') {
-            // We've asserted all the specific types for PreloadQualifyingProps
-            const preloadRawProps: PreloadQualifyingProps = (pendingProps: any);
-            let resource = preloadResources.get(href);
-            if (resource) {
-              if (__DEV__) {
-                const originallyImplicit =
-                  (resource: any)._dev_implicit_construction === true;
-                const latestProps = preloadPropsFromRawProps(preloadRawProps);
-                validatePreloadResourceDifference(
-                  resource.props,
-                  originallyImplicit,
-                  latestProps,
-                  false,
-                );
-              }
-            } else {
-              const resourceProps = preloadPropsFromRawProps(preloadRawProps);
-              resource = createPreloadResource(
-                getDocumentFromRoot(resourceRoot),
-                href,
-                resourceProps,
-              );
-            }
-            return resource;
-          }
-          return null;
-        }
-        default: {
-          const {href, sizes, media} = pendingProps;
-          if (typeof rel === 'string' && typeof href === 'string') {
-            const sizeKey =
-              '::sizes:' + (typeof sizes === 'string' ? sizes : '');
-            const mediaKey =
-              '::media:' + (typeof media === 'string' ? media : '');
-            const key = 'rel:' + rel + '::href:' + href + sizeKey + mediaKey;
-            const headRoot = getDocumentFromRoot(resourceRoot);
-            const headResources = getResourcesFromRoot(headRoot).head;
-            let resource = headResources.get(key);
-            if (!resource) {
-              resource = {
-                type: 'link',
-                props: Object.assign({}, pendingProps),
-                count: 0,
-                instance: null,
-                root: headRoot,
-              };
-              headResources.set(key, resource);
-            }
-            return resource;
-          }
-          if (__DEV__) {
-            warnOnMissingHrefAndRel(pendingProps, currentProps);
-          }
-          return null;
-        }
-      }
-    }
     case 'script': {
-      const scriptResources = getResourcesFromRoot(resourceRoot).scripts;
-      let didWarn;
-      if (__DEV__) {
-        if (currentProps) {
-          didWarn = validateURLKeyedUpdatedProps(
-            pendingProps,
-            currentProps,
-            'script',
-            'src',
-          );
-        }
-      }
-      const {src, async} = pendingProps;
-      if (async && typeof src === 'string') {
-        const scriptRawProps: ScriptQualifyingProps = (pendingProps: any);
-        let resource = scriptResources.get(src);
-        if (resource) {
-          if (__DEV__) {
-            if (!didWarn) {
-              const latestProps = scriptPropsFromRawProps(scriptRawProps);
-              if ((resource: any)._dev_preload_props) {
-                adoptPreloadPropsForScript(
-                  latestProps,
-                  (resource: any)._dev_preload_props,
-                );
-              }
-              validateScriptResourceDifference(resource.props, latestProps);
-            }
-          }
-        } else {
-          const resourceProps = scriptPropsFromRawProps(scriptRawProps);
-          resource = createScriptResource(
-            scriptResources,
-            resourceRoot,
-            src,
-            resourceProps,
-          );
+      if (typeof pendingProps.src === 'string' && pendingProps.async === true) {
+        const scriptProps: ScriptProps = pendingProps;
+        const key = getScriptKey(scriptProps.src);
+        const scripts = getResourcesFromRoot(resourceRoot).hoistableScripts;
+
+        let resource = scripts.get(key);
+        if (!resource) {
+          resource = {
+            type: 'script',
+            instance: null,
+            count: 0,
+          };
+          scripts.set(key, resource);
         }
         return resource;
       }
-      return null;
+      return {
+        type: 'void',
+        instance: null,
+        count: 0,
+      };
     }
     default: {
       throw new Error(
-        `getResource encountered a resource type it did not expect: "${type}". this is a bug in React.`,
+        `getResource encountered a type it did not expect: "${type}". this is a bug in React.`,
       );
     }
   }
 }
 
-function preloadPropsFromRawProps(
-  rawBorrowedProps: PreloadQualifyingProps,
-): PreloadProps {
-  // $FlowFixMe[prop-missing] - recommended fix is to use object spread operator
-  return Object.assign({}, rawBorrowedProps);
-}
-
-function titlePropsFromRawProps(
-  child: string | number,
-  rawProps: Props,
-): TitleProps {
-  const props: TitleProps = Object.assign({}, rawProps);
-  props.children = child;
-  return props;
+function styleTagPropsFromRawProps(
+  rawProps: StyleTagQualifyingProps,
+): StyleTagProps {
+  return {
+    ...rawProps,
+    'data-href': rawProps.href,
+    'data-precedence': rawProps.precedence,
+    href: null,
+    precedence: null,
+  };
 }
 
-function stylePropsFromRawProps(rawProps: StyleQualifyingProps): StyleProps {
-  // $FlowFixMe[prop-missing] - recommended fix is to use object spread operator
-  const props: StyleProps = Object.assign({}, rawProps);
-  props['data-precedence'] = rawProps.precedence;
-  props.precedence = null;
-
-  return props;
+function getStyleKey(href: string) {
+  const limitedEscapedHref =
+    escapeSelectorAttributeValueInsideDoubleQuotes(href);
+  return `href="${limitedEscapedHref}"`;
 }
 
-function scriptPropsFromRawProps(rawProps: ScriptQualifyingProps): ScriptProps {
-  // $FlowFixMe[prop-missing] - recommended fix is to use object spread operator
-  const props: ScriptProps = Object.assign({}, rawProps);
-  return props;
+function getStyleTagSelectorFromKey(key: string) {
+  return `style[data-${key}]`;
 }
 
-// --------------------------------------
-//      Resource Reconciliation
-// --------------------------------------
-
-export function acquireResource(resource: Resource): Instance {
-  switch (resource.type) {
-    case 'base':
-    case 'title':
-    case 'link':
-    case 'meta': {
-      return acquireHeadResource(resource);
-    }
-    case 'style': {
-      return acquireStyleResource(resource);
-    }
-    case 'script': {
-      return acquireScriptResource(resource);
-    }
-    case 'preload': {
-      return resource.instance;
-    }
-    default: {
-      throw new Error(
-        `acquireResource encountered a resource type it did not expect: "${resource.type}". this is a bug in React.`,
-      );
-    }
-  }
+function getStylesheetSelectorFromKey(key: string) {
+  return `link[rel="stylesheet"][${key}]`;
 }
 
-export function releaseResource(resource: Resource): void {
-  switch (resource.type) {
-    case 'link':
-    case 'title':
-    case 'meta': {
-      return releaseHeadResource(resource);
-    }
-    case 'style': {
-      resource.count--;
-      return;
-    }
-  }
+function getPreloadStylesheetSelectorFromKey(key: string) {
+  return `link[rel="preload"][as="style"][${key}]`;
 }
 
-function releaseHeadResource(resource: HeadResource): void {
-  if (--resource.count === 0) {
-    // the instance will have existed since we acquired it
-    const instance: Instance = (resource.instance: any);
-    const parent = instance.parentNode;
-    if (parent) {
-      parent.removeChild(instance);
-    }
-    resource.instance = null;
-  }
+function stylesheetPropsFromRawProps(
+  rawProps: StylesheetQualifyingProps,
+): StylesheetProps {
+  return {
+    ...rawProps,
+    'data-precedence': rawProps.precedence,
+    precedence: null,
+  };
 }
 
-function createResourceInstance(
-  type: string,
-  props: Object,
+function preloadStylesheet(
   ownerDocument: Document,
-): Instance {
-  const element = createElement(type, props, ownerDocument, HTML_NAMESPACE);
-  setInitialProperties(element, type, props);
-  markNodeAsResource(element);
-  return element;
-}
-
-function createStyleResource(
-  styleResources: Map<string, StyleResource>,
-  root: FloatRoot,
-  href: string,
-  precedence: string,
-  props: StyleProps,
-): StyleResource {
-  if (__DEV__) {
-    if (styleResources.has(href)) {
-      console.error(
-        'createStyleResource was called when a style Resource matching the same href already exists. This is a bug in React.',
+  key: string,
+  preloadProps: PreloadProps,
+) {
+  preloadPropsMap.set(key, preloadProps);
+
+  if (!ownerDocument.querySelector(getStylesheetSelectorFromKey(key))) {
+    // There is no matching stylesheet instance in the Document.
+    // We will insert a preload now to kick off loading because
+    // we expect this stylesheet to commit
+    if (
+      null ===
+      ownerDocument.querySelector(getPreloadStylesheetSelectorFromKey(key))
+    ) {
+      const preloadInstance = createElement(
+        'link',
+        preloadProps,
+        ownerDocument,
+        HTML_NAMESPACE,
       );
+      setInitialProperties(preloadInstance, 'link', preloadProps);
+      markNodeAsResource(preloadInstance);
+      (ownerDocument.head: any).appendChild(preloadInstance);
     }
   }
-
-  const limitedEscapedHref =
-    escapeSelectorAttributeValueInsideDoubleQuotes(href);
-  const existingEl = root.querySelector(
-    `link[rel="stylesheet"][href="${limitedEscapedHref}"]`,
-  );
-  const resource = {
-    type: 'style',
-    count: 0,
-    href,
-    precedence,
-    props,
-    hint: null,
-    preloaded: false,
-    loaded: false,
-    error: false,
-    root,
-    instance: null,
-  };
-  styleResources.set(href, resource);
-
-  if (existingEl) {
-    // If we have an existing element in the DOM we don't need to preload this resource nor can we
-    // adopt props from any preload that might exist already for this resource. We do need to try
-    // to reify the Resource loading state the best we can.
-    const loadingState: ?StyleResourceLoadingState = (existingEl: any)._p;
-    if (loadingState) {
-      switch (loadingState.s) {
-        case 'l': {
-          resource.loaded = true;
-          break;
-        }
-        case 'e': {
-          resource.error = true;
-          break;
-        }
-        default: {
-          attachLoadListeners(existingEl, resource);
-        }
-      }
-    } else {
-      // This is unfortunately just an assumption. The rationale here is that stylesheets without
-      // a loading state must have been flushed in the shell and would have blocked until loading
-      // or error. we can't know afterwards which happened for all types of stylesheets (cross origin)
-      // for instance) and the techniques for determining if a sheet has loaded that we do have still
-      // fail if the sheet loaded zero rules. At the moment we are going to just opt to assume the
-      // sheet is loaded if it was flushed in the shell
-      resource.loaded = true;
-    }
-  } else {
-    const hint = preloadResources.get(href);
-    if (hint) {
-      // $FlowFixMe[incompatible-type]: found when upgrading Flow
-      resource.hint = hint;
-      // If a preload for this style Resource already exists there are certain props we want to adopt
-      // on the style Resource, primarily focussed on making sure the style network pathways utilize
-      // the preload pathways. For instance if you have diffreent crossOrigin attributes for a preload
-      // and a stylesheet the stylesheet will make a new request even if the preload had already loaded
-      const preloadProps = hint.props;
-      adoptPreloadPropsForStyle(resource.props, hint.props);
-      if (__DEV__) {
-        (resource: any)._dev_preload_props = preloadProps;
-      }
-    }
-  }
-
-  return resource;
 }
 
-function adoptPreloadPropsForStyle(
-  styleProps: StyleProps,
-  preloadProps: PreloadProps,
-): void {
-  if (styleProps.crossOrigin == null)
-    styleProps.crossOrigin = preloadProps.crossOrigin;
-  if (styleProps.referrerPolicy == null)
-    styleProps.referrerPolicy = preloadProps.referrerPolicy;
-  if (styleProps.title == null) styleProps.title = preloadProps.title;
-}
-
-function immediatelyPreloadStyleResource(resource: StyleResource) {
-  // This function must be called synchronously after creating a styleResource otherwise it may
-  // violate assumptions around the existence of a preload. The reason it is extracted out is we
-  // don't always want to preload a style, in particular when we are going to synchronously insert
-  // that style. We confirm the style resource has no preload already and then construct it. If
-  // we wait and call this later it is possible a preload will already exist for this href
-  if (resource.loaded === false && resource.hint === null) {
-    const {href, props} = resource;
-    const preloadProps = preloadPropsFromStyleProps(props);
-    resource.hint = createPreloadResource(
-      getDocumentFromRoot(resource.root),
-      href,
-      preloadProps,
-    );
-  }
-}
-
-function preloadPropsFromStyleProps(props: StyleProps): PreloadProps {
+function preloadPropsFromStylesheet(
+  props: StylesheetQualifyingProps,
+): PreloadProps {
   return {
     rel: 'preload',
     as: 'style',
@@ -999,378 +629,160 @@ function preloadPropsFromStyleProps(props: StyleProps): PreloadProps {
   };
 }
 
-function createScriptResource(
-  scriptResources: Map<string, ScriptResource>,
-  root: FloatRoot,
-  src: string,
-  props: ScriptProps,
-): ScriptResource {
-  if (__DEV__) {
-    if (scriptResources.has(src)) {
-      console.error(
-        'createScriptResource was called when a script Resource matching the same src already exists. This is a bug in React.',
-      );
-    }
-  }
-
+function getScriptKey(src: string): string {
   const limitedEscapedSrc = escapeSelectorAttributeValueInsideDoubleQuotes(src);
-  const existingEl = root.querySelector(
-    `script[async][src="${limitedEscapedSrc}"]`,
-  );
-  const resource = {
-    type: 'script',
-    src,
-    props,
-    root,
-    instance: existingEl || null,
-  };
-  scriptResources.set(src, resource);
-
-  if (!existingEl) {
-    const hint = preloadResources.get(src);
-    if (hint) {
-      // If a preload for this style Resource already exists there are certain props we want to adopt
-      // on the style Resource, primarily focussed on making sure the style network pathways utilize
-      // the preload pathways. For instance if you have diffreent crossOrigin attributes for a preload
-      // and a stylesheet the stylesheet will make a new request even if the preload had already loaded
-      const preloadProps = hint.props;
-      adoptPreloadPropsForScript(props, hint.props);
-      if (__DEV__) {
-        (resource: any)._dev_preload_props = preloadProps;
-      }
-    }
-  } else {
-    markNodeAsResource(existingEl);
-  }
-
-  return resource;
+  return `[src="${limitedEscapedSrc}"]`;
 }
 
-function adoptPreloadPropsForScript(
-  scriptProps: ScriptProps,
-  preloadProps: PreloadProps,
-): void {
-  if (scriptProps.crossOrigin == null)
-    scriptProps.crossOrigin = preloadProps.crossOrigin;
-  if (scriptProps.referrerPolicy == null)
-    scriptProps.referrerPolicy = preloadProps.referrerPolicy;
-  if (scriptProps.integrity == null)
-    scriptProps.referrerPolicy = preloadProps.integrity;
+function getScriptSelectorFromKey(key: string): string {
+  return 'script[async]' + key;
 }
 
-function createPreloadResource(
-  ownerDocument: Document,
-  href: string,
-  props: PreloadProps,
-): PreloadResource {
-  const limitedEscapedHref =
-    escapeSelectorAttributeValueInsideDoubleQuotes(href);
-  let element: null | Instance | HTMLElement = ownerDocument.querySelector(
-    `link[rel="preload"][href="${limitedEscapedHref}"]`,
-  );
-  if (!element) {
-    element = createResourceInstance('link', props, ownerDocument);
-    insertResourceInstanceBefore(ownerDocument, element, null);
-  } else {
-    markNodeAsResource(element);
-  }
-  return {
-    type: 'preload',
-    href: href,
-    ownerDocument,
-    props,
-    instance: element,
-  };
-}
+// --------------------------------------
+//      Hoistable Resource Reconciliation
+// --------------------------------------
 
-function acquireHeadResource(resource: HeadResource): Instance {
+export function acquireResource(
+  hoistableRoot: HoistableRoot,
+  resource: Resource,
+  props: any,
+): null | Instance {
   resource.count++;
-  let instance = resource.instance;
-  if (!instance) {
-    const {props, root, type} = resource;
-    switch (type) {
-      case 'title': {
-        const titles = root.querySelectorAll('title');
-        for (let i = 0; i < titles.length; i++) {
-          if (titles[i].textContent === props.children) {
-            instance = resource.instance = titles[i];
-            markNodeAsResource(instance);
-            return instance;
-          }
-        }
-        instance = resource.instance = createResourceInstance(
-          type,
-          props,
-          root,
-        );
-        const firstTitle = titles[0];
-        insertResourceInstanceBefore(
-          root,
-          instance,
-          firstTitle && firstTitle.namespaceURI !== SVG_NAMESPACE
-            ? firstTitle
-            : null,
+  if (resource.instance === null) {
+    switch (resource.type) {
+      case 'style': {
+        const qualifiedProps: StyleTagQualifyingProps = props;
+        const key = getStyleKey(qualifiedProps.href);
+
+        // Attempt to hydrate instance from DOM
+        let instance: null | Instance = hoistableRoot.querySelector(
+          getStyleTagSelectorFromKey(key),
         );
-        break;
-      }
-      case 'meta': {
-        let insertBefore = null;
-
-        const metaResource: MetaResource = (resource: any);
-        const {matcher, property, parentResource} = metaResource;
-
-        if (parentResource && typeof property === 'string') {
-          // This resoruce is a structured meta type with a parent.
-          // Instead of using the matcher we just traverse forward
-          // siblings of the parent instance until we find a match
-          // or exhaust.
-          const parent = parentResource.instance;
-          if (parent) {
-            let node = null;
-            let nextNode = (insertBefore = parent.nextSibling);
-            while ((node = nextNode)) {
-              nextNode = node.nextSibling;
-              if (node.nodeName === 'META') {
-                const meta: Element = (node: any);
-                const propertyAttr = meta.getAttribute('property');
-                if (typeof propertyAttr !== 'string') {
-                  continue;
-                } else if (
-                  propertyAttr === property &&
-                  meta.getAttribute('content') === props.content
-                ) {
-                  resource.instance = meta;
-                  markNodeAsResource(meta);
-                  return meta;
-                } else if (property.startsWith(propertyAttr + ':')) {
-                  // This meta starts a new instance of a parent structure for this meta type
-                  // We need to halt our search here because even if we find a later match it
-                  // is for a different parent element
-                  break;
-                }
-              }
-            }
-          }
-        } else if ((instance = root.querySelector(matcher))) {
+        if (instance) {
           resource.instance = instance;
-          markNodeAsResource(instance);
           return instance;
         }
-        instance = resource.instance = createResourceInstance(
-          type,
-          props,
-          root,
+
+        const styleProps = styleTagPropsFromRawProps(props);
+        instance = createElement(
+          'style',
+          styleProps,
+          hoistableRoot,
+          HTML_NAMESPACE,
         );
-        insertResourceInstanceBefore(root, instance, insertBefore);
-        break;
+
+        markNodeAsResource(instance);
+        setInitialProperties(instance, 'style', styleProps);
+        insertStylesheet(instance, qualifiedProps.precedence, hoistableRoot);
+        resource.instance = instance;
+
+        return instance;
       }
-      case 'link': {
-        const linkProps: LinkProps = (props: any);
-        const limitedEscapedRel =
-          escapeSelectorAttributeValueInsideDoubleQuotes(linkProps.rel);
-        const limitedEscapedHref =
-          escapeSelectorAttributeValueInsideDoubleQuotes(linkProps.href);
-        let selector = `link[rel="${limitedEscapedRel}"][href="${limitedEscapedHref}"]`;
-        if (typeof linkProps.sizes === 'string') {
-          const limitedEscapedSizes =
-            escapeSelectorAttributeValueInsideDoubleQuotes(linkProps.sizes);
-          selector += `[sizes="${limitedEscapedSizes}"]`;
-        }
-        if (typeof linkProps.media === 'string') {
-          const limitedEscapedMedia =
-            escapeSelectorAttributeValueInsideDoubleQuotes(linkProps.media);
-          selector += `[media="${limitedEscapedMedia}"]`;
-        }
-        const existingEl = root.querySelector(selector);
-        if (existingEl) {
-          instance = resource.instance = existingEl;
-          markNodeAsResource(instance);
+      case 'stylesheet': {
+        // This typing is enforce by `getResource`. If we change the logic
+        // there for what qualifies as a stylesheet resource we need to ensure
+        // this cast still makes sense;
+        const qualifiedProps: StylesheetQualifyingProps = props;
+        const key = getStyleKey(qualifiedProps.href);
+
+        // Attempt to hydrate instance from DOM
+        let instance: null | Instance = hoistableRoot.querySelector(
+          getStylesheetSelectorFromKey(key),
+        );
+        if (instance) {
+          resource.instance = instance;
           return instance;
         }
-        instance = resource.instance = createResourceInstance(
-          type,
-          props,
-          root,
+
+        const stylesheetProps = stylesheetPropsFromRawProps(props);
+        const preloadProps = preloadPropsMap.get(key);
+        if (preloadProps) {
+          adoptPreloadPropsForStylesheet(stylesheetProps, preloadProps);
+        }
+
+        // Construct and insert a new instance
+        instance = createElement(
+          'link',
+          stylesheetProps,
+          hoistableRoot,
+          HTML_NAMESPACE,
+        );
+        markNodeAsResource(instance);
+        const linkInstance: HTMLLinkElement = (instance: any);
+        (linkInstance: any)._p = new Promise((resolve, reject) => {
+          linkInstance.onload = resolve;
+          linkInstance.onerror = reject;
+        }).then(
+          () => ((linkInstance: any)._p.s = 'l'),
+          () => ((linkInstance: any)._p.s = 'e'),
         );
-        insertResourceInstanceBefore(root, instance, null);
+        setInitialProperties(instance, 'link', stylesheetProps);
+        insertStylesheet(instance, qualifiedProps.precedence, hoistableRoot);
+        resource.instance = instance;
+
         return instance;
       }
-      case 'base': {
-        const baseResource: BaseResource = (resource: any);
-        const {matcher} = baseResource;
-        const base = root.querySelector(matcher);
-        if (base) {
-          instance = resource.instance = base;
-          markNodeAsResource(instance);
-        } else {
-          instance = resource.instance = createResourceInstance(
-            type,
-            props,
-            root,
-          );
-          insertResourceInstanceBefore(
-            root,
-            instance,
-            root.querySelector('base'),
-          );
+      case 'script': {
+        // This typing is enforce by `getResource`. If we change the logic
+        // there for what qualifies as a stylesheet resource we need to ensure
+        // this cast still makes sense;
+        const borrowedScriptProps: ScriptProps = props;
+        const key = getScriptKey(borrowedScriptProps.src);
+
+        // Attempt to hydrate instance from DOM
+        let instance: null | Instance = hoistableRoot.querySelector(
+          getScriptSelectorFromKey(key),
+        );
+        if (instance) {
+          resource.instance = instance;
+          return instance;
         }
+
+        let scriptProps = borrowedScriptProps;
+        const preloadProps = preloadPropsMap.get(key);
+        if (preloadProps) {
+          scriptProps = {...borrowedScriptProps};
+          adoptPreloadPropsForScript(scriptProps, preloadProps);
+        }
+
+        // Construct and insert a new instance
+        instance = createElement(
+          'script',
+          scriptProps,
+          hoistableRoot,
+          HTML_NAMESPACE,
+        );
+        markNodeAsResource(instance);
+        setInitialProperties(instance, 'link', scriptProps);
+        (getDocumentFromRoot(hoistableRoot).head: any).appendChild(instance);
+        resource.instance = instance;
+
         return instance;
       }
+      case 'void': {
+        return null;
+      }
       default: {
         throw new Error(
-          `acquireHeadResource encountered a resource type it did not expect: "${type}". This is a bug in React.`,
+          `acquireResource encountered a resource type it did not expect: "${resource.type}". this is a bug in React.`,
         );
       }
     }
   }
-  return instance;
-}
-
-function acquireStyleResource(resource: StyleResource): Instance {
-  let instance = resource.instance;
-  if (!instance) {
-    const {props, root, precedence} = resource;
-    const limitedEscapedHref = escapeSelectorAttributeValueInsideDoubleQuotes(
-      props.href,
-    );
-    const existingEl = root.querySelector(
-      `link[rel="stylesheet"][data-precedence][href="${limitedEscapedHref}"]`,
-    );
-    if (existingEl) {
-      instance = resource.instance = existingEl;
-      markNodeAsResource(instance);
-      resource.preloaded = true;
-      const loadingState: ?StyleResourceLoadingState = (existingEl: any)._p;
-      if (loadingState) {
-        // if an existingEl is found there should always be a loadingState because if
-        // the resource was flushed in the head it should have already been found when
-        // the resource was first created. Still defensively we gate this
-        switch (loadingState.s) {
-          case 'l': {
-            resource.loaded = true;
-            resource.error = false;
-            break;
-          }
-          case 'e': {
-            resource.error = true;
-            break;
-          }
-          default: {
-            attachLoadListeners(existingEl, resource);
-          }
-        }
-      } else {
-        resource.loaded = true;
-      }
-    } else {
-      instance = resource.instance = createResourceInstance(
-        'link',
-        resource.props,
-        getDocumentFromRoot(root),
-      );
-
-      attachLoadListeners(instance, resource);
-      insertStyleInstance(instance, precedence, root);
-    }
-  }
-  resource.count++;
-  return instance;
-}
-
-function acquireScriptResource(resource: ScriptResource): Instance {
-  let instance = resource.instance;
-  if (!instance) {
-    const {props, root} = resource;
-    const limitedEscapedSrc = escapeSelectorAttributeValueInsideDoubleQuotes(
-      props.src,
-    );
-    const existingEl = root.querySelector(
-      `script[async][src="${limitedEscapedSrc}"]`,
-    );
-    if (existingEl) {
-      instance = resource.instance = existingEl;
-      markNodeAsResource(instance);
-    } else {
-      instance = resource.instance = createResourceInstance(
-        'script',
-        resource.props,
-        getDocumentFromRoot(root),
-      );
-
-      insertResourceInstanceBefore(getDocumentFromRoot(root), instance, null);
-    }
-  }
-  return instance;
-}
-
-function attachLoadListeners(instance: Instance, resource: StyleResource) {
-  const listeners: {
-    [string]: () => mixed,
-  } = {};
-  listeners.load = onResourceLoad.bind(
-    null,
-    instance,
-    resource,
-    listeners,
-    loadAndErrorEventListenerOptions,
-  );
-  listeners.error = onResourceError.bind(
-    null,
-    instance,
-    resource,
-    listeners,
-    loadAndErrorEventListenerOptions,
-  );
-
-  instance.addEventListener(
-    'load',
-    listeners.load,
-    loadAndErrorEventListenerOptions,
-  );
-  instance.addEventListener(
-    'error',
-    listeners.error,
-    loadAndErrorEventListenerOptions,
-  );
+  return resource.instance;
 }
 
-const loadAndErrorEventListenerOptions = {
-  passive: true,
-};
-
-function onResourceLoad(
-  instance: Instance,
-  resource: StyleResource,
-  listeners: {[string]: () => mixed},
-  listenerOptions: typeof loadAndErrorEventListenerOptions,
-) {
-  resource.loaded = true;
-  resource.error = false;
-  for (const event in listeners) {
-    instance.removeEventListener(event, listeners[event], listenerOptions);
-  }
-}
-
-function onResourceError(
-  instance: Instance,
-  resource: StyleResource,
-  listeners: {[string]: () => mixed},
-  listenerOptions: typeof loadAndErrorEventListenerOptions,
-) {
-  resource.loaded = false;
-  resource.error = true;
-  for (const event in listeners) {
-    instance.removeEventListener(event, listeners[event], listenerOptions);
-  }
+export function releaseResource(resource: Resource): void {
+  resource.count--;
 }
 
-function insertStyleInstance(
+function insertStylesheet(
   instance: Instance,
   precedence: string,
-  root: FloatRoot,
+  root: HoistableRoot,
 ): void {
   const nodes = root.querySelectorAll(
-    'link[rel="stylesheet"][data-precedence]',
+    'link[rel="stylesheet"][data-precedence],style[data-precedence]',
   );
   const last = nodes.length ? nodes[nodes.length - 1] : null;
   let prior = last;
@@ -1390,40 +802,220 @@ function insertStyleInstance(
     ((prior.parentNode: any): Node).insertBefore(instance, prior.nextSibling);
   } else {
     const parent =
-      root.nodeType === DOCUMENT_NODE ? ((root: any): Document).head : root;
-    if (parent) {
-      parent.insertBefore(instance, parent.firstChild);
-    } else {
-      throw new Error(
-        'While attempting to insert a Resource, React expected the Document to contain' +
-          ' a head element but it was not found.',
-      );
-    }
+      root.nodeType === DOCUMENT_NODE
+        ? ((((root: any): Document).head: any): Element)
+        : ((root: any): ShadowRoot);
+    parent.insertBefore(instance, parent.firstChild);
   }
 }
 
-function insertResourceInstanceBefore(
-  ownerDocument: Document,
-  instance: Instance,
-  before: ?Node,
+function adoptPreloadPropsForStylesheet(
+  stylesheetProps: StylesheetProps,
+  preloadProps: PreloadProps,
 ): void {
-  if (__DEV__) {
-    if (instance.tagName === 'LINK' && (instance: any).rel === 'stylesheet') {
-      console.error(
-        'insertResourceInstanceBefore was called with a stylesheet. Stylesheets must be' +
-          ' inserted with insertStyleInstance instead. This is a bug in React.',
-      );
-    }
+  if (stylesheetProps.crossOrigin == null)
+    stylesheetProps.crossOrigin = preloadProps.crossOrigin;
+  if (stylesheetProps.referrerPolicy == null)
+    stylesheetProps.referrerPolicy = preloadProps.referrerPolicy;
+  if (stylesheetProps.title == null) stylesheetProps.title = preloadProps.title;
+}
+
+function adoptPreloadPropsForScript(
+  scriptProps: ScriptProps,
+  preloadProps: PreloadProps,
+): void {
+  if (scriptProps.crossOrigin == null)
+    scriptProps.crossOrigin = preloadProps.crossOrigin;
+  if (scriptProps.referrerPolicy == null)
+    scriptProps.referrerPolicy = preloadProps.referrerPolicy;
+  if (scriptProps.integrity == null)
+    scriptProps.referrerPolicy = preloadProps.integrity;
+}
+
+// --------------------------------------
+//      Hoistable Element Reconciliation
+// --------------------------------------
+
+export function hydrateHoistable(
+  hoistableRoot: HoistableRoot,
+  type: HoistableTagType,
+  props: any,
+  internalInstanceHandle: Object,
+): Instance {
+  const ownerDocument = getDocumentFromRoot(hoistableRoot);
+  const nodes = ownerDocument.getElementsByTagName(type);
+
+  const children = props.children;
+  let child, childString;
+  if (Array.isArray(children)) {
+    child = children.length === 1 ? children[0] : null;
+  } else {
+    child = children;
   }
-  const parent = (before && before.parentNode) || ownerDocument.head;
-  if (parent) {
-    parent.insertBefore(instance, before);
+  if (
+    typeof child !== 'function' &&
+    typeof child !== 'symbol' &&
+    child !== null &&
+    child !== undefined
+  ) {
+    if (__DEV__) {
+      checkPropStringCoercion(child, 'children');
+    }
+    childString = '' + (child: any);
   } else {
-    throw new Error(
-      'While attempting to insert a Resource, React expected the Document to contain' +
-        ' a head element but it was not found.',
-    );
+    childString = '';
+  }
+  nodeLoop: for (let i = 0; i < nodes.length; i++) {
+    const node = nodes[i];
+    if (
+      isMarkedResource(node) ||
+      node.namespaceURI === SVG_NAMESPACE ||
+      node.textContent !== childString
+    ) {
+      continue;
+    }
+    let checkedAttributes = 0;
+    for (const propName in props) {
+      const propValue = props[propName];
+      if (!props.hasOwnProperty(propName)) {
+        continue;
+      }
+      switch (propName) {
+        // Reserved props will never have an attribute partner
+        case 'children':
+        case 'defaultValue':
+        case 'dangerouslySetInnerHTML':
+        case 'defaultChecked':
+        case 'innerHTML':
+        case 'suppressContentEditableWarning':
+        case 'suppressHydrationWarning':
+        case 'style':
+          // we advance to the next prop
+          continue;
+
+        // Name remapped props used by hoistable tag types
+        case 'className': {
+          if (__DEV__) {
+            checkAttributeStringCoercion(propValue, propName);
+          }
+          if (node.getAttribute('class') !== '' + propValue) continue nodeLoop;
+          break;
+        }
+        case 'httpEquiv': {
+          if (__DEV__) {
+            checkAttributeStringCoercion(propValue, propName);
+          }
+          if (node.getAttribute('http-equiv') !== '' + propValue)
+            continue nodeLoop;
+          break;
+        }
+
+        // Booleanish props used by hoistable tag types
+        case 'contentEditable':
+        case 'draggable':
+        case 'spellCheck': {
+          if (__DEV__) {
+            checkAttributeStringCoercion(propValue, propName);
+          }
+          if (node.getAttribute(propName) !== '' + propValue) continue nodeLoop;
+          break;
+        }
+
+        // Boolean props used by hoistable tag types
+        case 'async':
+        case 'defer':
+        case 'disabled':
+        case 'hidden':
+        case 'noModule':
+        case 'scoped':
+        case 'itemScope':
+          if (propValue !== node.hasAttribute(propName)) continue nodeLoop;
+          break;
+
+        // The following properties are left out because they do not apply to
+        // the current set of hoistable types. They may have special handling
+        // requirements if they end up applying to a hoistable type in the future
+        // case 'acceptCharset':
+        // case 'value':
+        // case 'allowFullScreen':
+        // case 'autoFocus':
+        // case 'autoPlay':
+        // case 'controls':
+        // case 'default':
+        // case 'disablePictureInPicture':
+        // case 'disableRemotePlayback':
+        // case 'formNoValidate':
+        // case 'loop':
+        // case 'noValidate':
+        // case 'open':
+        // case 'playsInline':
+        // case 'readOnly':
+        // case 'required':
+        // case 'reversed':
+        // case 'seamless':
+        // case 'multiple':
+        // case 'selected':
+        // case 'capture':
+        // case 'download':
+        // case 'cols':
+        // case 'rows':
+        // case 'size':
+        // case 'span':
+        // case 'rowSpan':
+        // case 'start':
+
+        default:
+          if (isAttributeNameSafe(propName)) {
+            const attributeName = propName;
+            if (propValue == null && node.hasAttribute(attributeName))
+              continue nodeLoop;
+            if (__DEV__) {
+              checkAttributeStringCoercion(propValue, attributeName);
+            }
+            if (node.getAttribute(attributeName) !== '' + (propValue: any))
+              continue nodeLoop;
+          }
+      }
+      checkedAttributes++;
+    }
+
+    if (node.attributes.length !== checkedAttributes) {
+      // We didn't match ever attribute so we abandon this node
+      continue nodeLoop;
+    }
+
+    // We found a matching instance. We can return early after marking it
+    markNodeAsResource(node);
+    return node;
   }
+
+  // There is no matching instance to hydrate, we create it now
+  const instance = createElement(type, props, ownerDocument, HTML_NAMESPACE);
+  setInitialProperties(instance, type, props);
+  precacheFiberNode(internalInstanceHandle, instance);
+  markNodeAsResource(instance);
+
+  (ownerDocument.head: any).insertBefore(
+    instance,
+    type === 'title' ? ownerDocument.querySelector('head > title') : null,
+  );
+  return instance;
+}
+
+export function mountHoistable(
+  hoistableRoot: HoistableRoot,
+  type: HoistableTagType,
+  instance: Instance,
+): void {
+  const ownerDocument = getDocumentFromRoot(hoistableRoot);
+  (ownerDocument.head: any).insertBefore(
+    instance,
+    type === 'title' ? ownerDocument.querySelector('head > title') : null,
+  );
+}
+
+export function unmountHoistable(instance: Instance): void {
+  (instance.parentNode: any).removeChild(instance);
 }
 
 // When passing user input into querySelector(All) the embedded string must not alter
diff --git a/packages/react-dom-bindings/src/client/ReactDOMHostConfig.js b/packages/react-dom-bindings/src/client/ReactDOMHostConfig.js
index 92e5efd880c54..b774d570f5dab 100644
--- a/packages/react-dom-bindings/src/client/ReactDOMHostConfig.js
+++ b/packages/react-dom-bindings/src/client/ReactDOMHostConfig.js
@@ -27,6 +27,7 @@ import {
   isContainerMarkedAsRoot,
   detachDeletedInstance,
   isMarkedResource,
+  markNodeAsResource,
 } from './ReactDOMComponentTree';
 export {detachDeletedInstance};
 import {hasRole} from './DOMAccessibilityRoles';
@@ -54,7 +55,11 @@ import {
   setEnabled as ReactBrowserEventEmitterSetEnabled,
   getEventPriority,
 } from '../events/ReactDOMEventListener';
-import {getChildNamespace, SVG_NAMESPACE} from '../shared/DOMNamespaces';
+import {
+  getChildNamespace,
+  SVG_NAMESPACE,
+  HTML_NAMESPACE,
+} from '../shared/DOMNamespaces';
 import {
   ELEMENT_NODE,
   TEXT_NODE,
@@ -75,7 +80,7 @@ import {
 } from 'shared/ReactFeatureFlags';
 import {
   HostComponent,
-  HostResource,
+  HostHoistable,
   HostText,
   HostSingleton,
 } from 'react-reconciler/src/ReactWorkTags';
@@ -89,7 +94,6 @@ import {ConcurrentMode, NoMode} from 'react-reconciler/src/ReactTypeOfMode';
 import {
   prepareToRenderResources,
   cleanupAfterRenderResources,
-  clearRootResources,
 } from './ReactDOMFloatClient';
 import {validateLinkPropsForStyleResource} from '../shared/ReactDOMResourceValidation';
 
@@ -133,6 +137,7 @@ export type Container =
   | interface extends DocumentFragment {_reactRootContainer?: FiberRoot};
 export type Instance = Element;
 export type TextInstance = Text;
+export type {HoistableRoot} from './ReactDOMFloatClient';
 export interface SuspenseInstance extends Comment {
   _reactRetry?: () => void;
 }
@@ -263,6 +268,25 @@ export function resetAfterCommit(containerInfo: Container): void {
   selectionInformation = null;
 }
 
+export function createHoistableInstance(
+  type: string,
+  props: Props,
+  rootContainerInstance: Container,
+  internalInstanceHandle: Object,
+): Instance {
+  const domElement: Instance = createElement(
+    type,
+    props,
+    rootContainerInstance,
+    HTML_NAMESPACE,
+  );
+  precacheFiberNode(internalInstanceHandle, domElement);
+  updateFiberProps(domElement, props);
+  setInitialProperties(domElement, type, props);
+  markNodeAsResource(domElement);
+  return domElement;
+}
+
 export function createInstance(
   type: string,
   props: Props,
@@ -716,17 +740,10 @@ export function clearContainer(container: Container): void {
   if (enableHostSingletons) {
     const nodeType = container.nodeType;
     if (nodeType === DOCUMENT_NODE) {
-      clearRootResources(container);
       clearContainerSparingly(container);
     } else if (nodeType === ELEMENT_NODE) {
       switch (container.nodeName) {
-        case 'HEAD': {
-          // If we are clearing document.head as a container we are essentially clearing everything
-          // that was hoisted to the head and should forget the instances that will no longer be in the DOM
-          clearRootResources(container);
-          // fall through to clear child contents
-        }
-        // eslint-disable-next-line-no-fallthrough
+        case 'HEAD':
         case 'HTML':
         case 'BODY':
           clearContainerSparingly(container);
@@ -933,7 +950,6 @@ function getNextHydratable(node: ?Node) {
           // developer on how to fix.
           case 'TITLE':
           case 'META':
-          case 'BASE':
           case 'HTML':
           case 'HEAD':
           case 'BODY': {
@@ -975,8 +991,7 @@ function getNextHydratable(node: ?Node) {
         const element: Element = (node: any);
         switch (element.tagName) {
           case 'TITLE':
-          case 'META':
-          case 'BASE': {
+          case 'META': {
             continue;
           }
           case 'LINK': {
@@ -1445,7 +1460,7 @@ export function matchAccessibilityRole(node: Instance, role: string): boolean {
 
 export function getTextContent(fiber: Fiber): string | null {
   switch (fiber.tag) {
-    case HostResource:
+    case HostHoistable:
     case HostSingleton:
     case HostComponent:
       let textContent = '';
@@ -1563,7 +1578,7 @@ export function requestPostPaintCallback(callback: (time: number) => void) {
 
 export const supportsResources = true;
 
-export function isHostResourceType(
+export function isHostHoistableType(
   type: string,
   props: RawProps,
   hostContext: HostContext,
@@ -1581,100 +1596,127 @@ export function isHostResourceType(
     namespace = hostContextProd;
   }
   switch (type) {
-    case 'base':
-    case 'meta': {
-      return true;
-    }
+    case 'meta':
     case 'title': {
       return namespace !== SVG_NAMESPACE;
     }
-    case 'link': {
-      const {onLoad, onError} = props;
-      if (onLoad || onError) {
+    case 'style': {
+      if (
+        typeof props.precedence !== 'string' ||
+        typeof props.href !== 'string' ||
+        props.href === '' ||
+        namespace === SVG_NAMESPACE
+      ) {
         if (__DEV__) {
           if (outsideHostContainerContext) {
             console.error(
-              'Cannot render a <link> with onLoad or onError listeners outside the main document.' +
-                ' Try removing onLoad={...} and onError={...} or moving it into the root <head> tag or' +
-                ' somewhere in the <body>.',
-            );
-          } else if (namespace === SVG_NAMESPACE) {
-            console.error(
-              'Cannot render a <link> with onLoad or onError listeners as a descendent of <svg>.' +
-                ' Try removing onLoad={...} and onError={...} or moving it above the <svg> ancestor.',
+              'Cannot render a <style> outside the main document without knowing its precedence and a unique href key.' +
+                ' React can hoist and deduplicate <style> tags if you provide a `precedence` prop along with an `href` prop that' +
+                ' does not conflic with the `href` values used in any other hoisted <style> or <link rel="stylesheet" ...> tags. ' +
+                ' Note that hoisting <style> tags is considered an advanced feature that most will not use directly.' +
+                ' Consider moving the <style> tag to the <head> or consider adding a `precedence="default"` and `href="some unique resource identifier"`, or move the <style>' +
+                ' to the <style> tag.',
             );
           }
         }
         return false;
       }
+      return true;
+    }
+    case 'link': {
+      if (
+        typeof props.rel !== 'string' ||
+        typeof props.href !== 'string' ||
+        props.href === '' ||
+        props.onLoad ||
+        props.onError ||
+        namespace === SVG_NAMESPACE
+      ) {
+        if (__DEV__) {
+          if (
+            props.rel === 'stylesheet' &&
+            typeof props.precedence === 'string'
+          ) {
+            validateLinkPropsForStyleResource(props);
+          }
+          if (outsideHostContainerContext) {
+            if (
+              typeof props.rel !== 'string' ||
+              typeof props.href !== 'string' ||
+              props.href === ''
+            ) {
+              console.error(
+                'Cannot render a <link> outside the main document without a `rel` and `href` prop.' +
+                  ' Try adding a `rel` and/or `href` prop to this <link> or moving the link into the <head> tag',
+              );
+            } else if (props.onError || props.onLoad) {
+              console.error(
+                'Cannot render a <link> with onLoad or onError listeners outside the main document.' +
+                  ' Try removing onLoad={...} and onError={...} or moving it into the root <head> tag or' +
+                  ' somewhere in the <body>.',
+              );
+            }
+          }
+        }
+        return false;
+      }
       switch (props.rel) {
         case 'stylesheet': {
-          const {href, precedence, disabled} = props;
+          const {precedence, disabled} = props;
           if (__DEV__) {
-            validateLinkPropsForStyleResource(props);
             if (typeof precedence !== 'string') {
               if (outsideHostContainerContext) {
                 console.error(
                   'Cannot render a <link rel="stylesheet" /> outside the main document without knowing its precedence.' +
                     ' Consider adding precedence="default" or moving it into the root <head> tag.',
                 );
-              } else if (namespace === SVG_NAMESPACE) {
-                console.error(
-                  'Cannot render a <link rel="stylesheet" /> as a descendent of an <svg> element without knowing its precedence.' +
-                    ' Consider adding precedence="default" or moving it above the <svg> ancestor.',
-                );
               }
             }
           }
-          return (
-            typeof href === 'string' &&
-            typeof precedence === 'string' &&
-            disabled == null
-          );
+          return typeof precedence === 'string' && disabled == null;
         }
         default: {
-          const {rel, href} = props;
-          return typeof href === 'string' && typeof rel === 'string';
+          return true;
         }
       }
     }
     case 'script': {
-      // We don't validate because it is valid to use async with onLoad/onError unlike combining
-      // precedence with these for style resources
-      const {src, async, onLoad, onError} = props;
-      if (__DEV__) {
-        if (async !== true) {
-          if (outsideHostContainerContext) {
-            console.error(
-              'Cannot render a sync or defer <script> outside the main document without knowing its order.' +
-                ' Try adding async="" or moving it into the root <head> tag.',
-            );
-          } else if (namespace === SVG_NAMESPACE) {
-            console.error(
-              'Cannot render a sync or defer <script> as a descendent of an <svg> element.' +
-                ' Try adding async="" or moving it above the ancestor <svg> element.',
-            );
-          }
-        } else if (onLoad || onError) {
+      if (
+        props.async !== true ||
+        props.onLoad ||
+        props.onError ||
+        typeof props.src !== 'string' ||
+        !props.src ||
+        namespace === SVG_NAMESPACE
+      ) {
+        if (__DEV__) {
           if (outsideHostContainerContext) {
-            console.error(
-              'Cannot render a <script> with onLoad or onError listeners outside the main document.' +
-                ' Try removing onLoad={...} and onError={...} or moving it into the root <head> tag or' +
-                ' somewhere in the <body>.',
-            );
-          } else if (namespace === SVG_NAMESPACE) {
-            console.error(
-              'Cannot render a <script> with onLoad or onError listeners as a descendent of an <svg> element.' +
-                ' Try removing onLoad={...} and onError={...} or moving it above the ancestor <svg> element.',
-            );
+            if (props.async !== true) {
+              console.error(
+                'Cannot render a sync or defer <script> outside the main document without knowing its order.' +
+                  ' Try adding async="" or moving it into the root <head> tag.',
+              );
+            } else if (props.onLoad || props.onError) {
+              console.error(
+                'Cannot render a <script> with onLoad or onError listeners outside the main document.' +
+                  ' Try removing onLoad={...} and onError={...} or moving it into the root <head> tag or' +
+                  ' somewhere in the <body>.',
+              );
+            } else {
+              console.error(
+                'Cannot render a <script> outside the main document without `async={true}` and a non-empty `src` prop.' +
+                  ' Ensure there is a valid `src` and either make the script async or move it into the root <head> tag or' +
+                  ' somewhere in the <body>.',
+              );
+            }
           }
         }
+        return false;
       }
-      return (async: any) && typeof src === 'string' && !onLoad && !onError;
+      return true;
     }
     case 'noscript':
-    case 'template':
-    case 'style': {
+    case 'template': {
       if (__DEV__) {
         if (outsideHostContainerContext) {
           console.error(
@@ -1702,9 +1744,13 @@ export function resetRendererAfterRender() {
 }
 
 export {
+  getHoistableRoot,
   getResource,
   acquireResource,
   releaseResource,
+  hydrateHoistable,
+  mountHoistable,
+  unmountHoistable,
 } from './ReactDOMFloatClient';
 
 // -------------------
diff --git a/packages/react-dom-bindings/src/events/DOMPluginEventSystem.js b/packages/react-dom-bindings/src/events/DOMPluginEventSystem.js
index 73011e2192b72..37a054bc53968 100644
--- a/packages/react-dom-bindings/src/events/DOMPluginEventSystem.js
+++ b/packages/react-dom-bindings/src/events/DOMPluginEventSystem.js
@@ -31,7 +31,7 @@ import {
   HostRoot,
   HostPortal,
   HostComponent,
-  HostResource,
+  HostHoistable,
   HostSingleton,
   HostText,
   ScopeComponent,
@@ -623,7 +623,7 @@ export function dispatchEventForPluginEventSystem(
             if (
               parentTag === HostComponent ||
               parentTag === HostText ||
-              (enableFloat ? parentTag === HostResource : false) ||
+              (enableFloat ? parentTag === HostHoistable : false) ||
               (enableHostSingletons ? parentTag === HostSingleton : false)
             ) {
               node = ancestorInst = parentNode;
@@ -681,7 +681,7 @@ export function accumulateSinglePhaseListeners(
     // Handle listeners that are on HostComponents (i.e. <div>)
     if (
       (tag === HostComponent ||
-        (enableFloat ? tag === HostResource : false) ||
+        (enableFloat ? tag === HostHoistable : false) ||
         (enableHostSingletons ? tag === HostSingleton : false)) &&
       stateNode !== null
     ) {
@@ -795,7 +795,7 @@ export function accumulateTwoPhaseListeners(
     // Handle listeners that are on HostComponents (i.e. <div>)
     if (
       (tag === HostComponent ||
-        (enableFloat ? tag === HostResource : false) ||
+        (enableFloat ? tag === HostHoistable : false) ||
         (enableHostSingletons ? tag === HostSingleton : false)) &&
       stateNode !== null
     ) {
@@ -902,7 +902,7 @@ function accumulateEnterLeaveListenersForEvent(
     }
     if (
       (tag === HostComponent ||
-        (enableFloat ? tag === HostResource : false) ||
+        (enableFloat ? tag === HostHoistable : false) ||
         (enableHostSingletons ? tag === HostSingleton : false)) &&
       stateNode !== null
     ) {
diff --git a/packages/react-dom-bindings/src/server/ReactDOMFloatServer.js b/packages/react-dom-bindings/src/server/ReactDOMFloatServer.js
deleted file mode 100644
index bea8f4df5568a..0000000000000
--- a/packages/react-dom-bindings/src/server/ReactDOMFloatServer.js
+++ /dev/null
@@ -1,982 +0,0 @@
-/**
- * Copyright (c) Meta Platforms, Inc. and affiliates.
- *
- * This source code is licensed under the MIT license found in the
- * LICENSE file in the root directory of this source tree.
- *
- * @flow
- */
-
-import {
-  validatePreloadResourceDifference,
-  validateStyleResourceDifference,
-  validateStyleAndHintProps,
-  validateScriptResourceDifference,
-  validateScriptAndHintProps,
-  validateLinkPropsForStyleResource,
-  validateLinkPropsForPreloadResource,
-  validatePreloadArguments,
-  validatePreinitArguments,
-} from '../shared/ReactDOMResourceValidation';
-
-type Props = {[string]: mixed};
-
-type ResourceType = 'style' | 'font' | 'script';
-
-type PreloadProps = {
-  rel: 'preload',
-  as: ResourceType,
-  href: string,
-  [string]: mixed,
-};
-type PreloadResource = {
-  type: 'preload',
-  as: ResourceType,
-  href: string,
-  props: PreloadProps,
-  flushed: boolean,
-};
-
-type StyleProps = {
-  rel: 'stylesheet',
-  href: string,
-  'data-precedence': string,
-  [string]: mixed,
-};
-type StyleResource = {
-  type: 'style',
-  href: string,
-  precedence: string,
-  props: StyleProps,
-
-  flushed: boolean,
-  inShell: boolean, // flushedInShell
-  hint: PreloadResource,
-  set: Set<StyleResource>, // the precedence set this resource should be flushed in
-};
-
-type ScriptProps = {
-  src: string,
-  [string]: mixed,
-};
-type ScriptResource = {
-  type: 'script',
-  src: string,
-  props: ScriptProps,
-
-  flushed: boolean,
-  hint: PreloadResource,
-};
-
-type TitleProps = {
-  [string]: mixed,
-};
-type TitleResource = {
-  type: 'title',
-  props: TitleProps,
-
-  flushed: boolean,
-};
-
-type MetaProps = {
-  [string]: mixed,
-};
-type MetaResource = {
-  type: 'meta',
-  key: string,
-  props: MetaProps,
-
-  flushed: boolean,
-};
-
-type LinkProps = {
-  href: string,
-  rel: string,
-  [string]: mixed,
-};
-type LinkResource = {
-  type: 'link',
-  props: LinkProps,
-
-  flushed: boolean,
-};
-
-type BaseResource = {
-  type: 'base',
-  props: Props,
-
-  flushed: boolean,
-};
-
-export type Resource = PreloadResource | StyleResource | ScriptResource;
-export type HeadResource =
-  | TitleResource
-  | MetaResource
-  | LinkResource
-  | BaseResource;
-
-export type Resources = {
-  // Request local cache
-  preloadsMap: Map<string, PreloadResource>,
-  stylesMap: Map<string, StyleResource>,
-  scriptsMap: Map<string, ScriptResource>,
-  headsMap: Map<string, HeadResource>,
-
-  // Flushing queues for Resource dependencies
-  charset: null | MetaResource,
-  bases: Set<BaseResource>,
-  preconnects: Set<LinkResource>,
-  fontPreloads: Set<PreloadResource>,
-  // usedImagePreloads: Set<PreloadResource>,
-  precedences: Map<string, Set<StyleResource>>,
-  usedStylePreloads: Set<PreloadResource>,
-  scripts: Set<ScriptResource>,
-  usedScriptPreloads: Set<PreloadResource>,
-  explicitStylePreloads: Set<PreloadResource>,
-  // explicitImagePreloads: Set<PreloadResource>,
-  explicitScriptPreloads: Set<PreloadResource>,
-  headResources: Set<HeadResource>,
-
-  // cache for tracking structured meta tags
-  structuredMetaKeys: Map<string, MetaResource>,
-
-  // Module-global-like reference for current boundary resources
-  boundaryResources: ?BoundaryResources,
-  ...
-};
-
-// @TODO add bootstrap script to implicit preloads
-export function createResources(): Resources {
-  return {
-    // persistent
-    preloadsMap: new Map(),
-    stylesMap: new Map(),
-    scriptsMap: new Map(),
-    headsMap: new Map(),
-
-    // cleared on flush
-    charset: null,
-    bases: new Set(),
-    preconnects: new Set(),
-    fontPreloads: new Set(),
-    // usedImagePreloads: new Set(),
-    precedences: new Map(),
-    usedStylePreloads: new Set(),
-    scripts: new Set(),
-    usedScriptPreloads: new Set(),
-    explicitStylePreloads: new Set(),
-    // explicitImagePreloads: new Set(),
-    explicitScriptPreloads: new Set(),
-    headResources: new Set(),
-
-    // cache for tracking structured meta tags
-    structuredMetaKeys: new Map(),
-
-    // like a module global for currently rendering boundary
-    boundaryResources: null,
-  };
-}
-
-export type BoundaryResources = Set<StyleResource>;
-
-export function createBoundaryResources(): BoundaryResources {
-  return new Set();
-}
-
-let currentResources: null | Resources = null;
-const currentResourcesStack = [];
-
-export function prepareToRenderResources(resources: Resources) {
-  currentResourcesStack.push(currentResources);
-  currentResources = resources;
-}
-
-export function finishRenderingResources() {
-  currentResources = currentResourcesStack.pop();
-}
-
-export function setCurrentlyRenderingBoundaryResourcesTarget(
-  resources: Resources,
-  boundaryResources: null | BoundaryResources,
-) {
-  resources.boundaryResources = boundaryResources;
-}
-
-export const ReactDOMServerFloatDispatcher = {
-  preload,
-  preinit,
-};
-
-type PreloadAs = ResourceType;
-type PreloadOptions = {as: PreloadAs, crossOrigin?: string, integrity?: string};
-function preload(href: string, options: PreloadOptions) {
-  if (!currentResources) {
-    // While we expect that preload calls are primarily going to be observed
-    // during render because effects and events don't run on the server it is
-    // still possible that these get called in module scope. This is valid on
-    // the client since there is still a document to interact with but on the
-    // server we need a request to associate the call to. Because of this we
-    // simply return and do not warn.
-    return;
-  }
-  const resources = currentResources;
-  if (__DEV__) {
-    validatePreloadArguments(href, options);
-  }
-  if (
-    typeof href === 'string' &&
-    href &&
-    typeof options === 'object' &&
-    options !== null
-  ) {
-    const as = options.as;
-    let resource = resources.preloadsMap.get(href);
-    if (resource) {
-      if (__DEV__) {
-        const originallyImplicit =
-          (resource: any)._dev_implicit_construction === true;
-        const latestProps = preloadPropsFromPreloadOptions(href, as, options);
-        validatePreloadResourceDifference(
-          resource.props,
-          originallyImplicit,
-          latestProps,
-          false,
-        );
-      }
-    } else {
-      resource = createPreloadResource(
-        resources,
-        href,
-        as,
-        preloadPropsFromPreloadOptions(href, as, options),
-      );
-    }
-    switch (as) {
-      case 'font': {
-        resources.fontPreloads.add(resource);
-        break;
-      }
-      case 'style': {
-        resources.explicitStylePreloads.add(resource);
-        break;
-      }
-      case 'script': {
-        resources.explicitScriptPreloads.add(resource);
-        break;
-      }
-    }
-  }
-}
-
-type PreinitAs = 'style' | 'script';
-type PreinitOptions = {
-  as: PreinitAs,
-  precedence?: string,
-  crossOrigin?: string,
-  integrity?: string,
-};
-function preinit(href: string, options: PreinitOptions): void {
-  if (!currentResources) {
-    // While we expect that preinit calls are primarily going to be observed
-    // during render because effects and events don't run on the server it is
-    // still possible that these get called in module scope. This is valid on
-    // the client since there is still a document to interact with but on the
-    // server we need a request to associate the call to. Because of this we
-    // simply return and do not warn.
-    return;
-  }
-  preinitImpl(currentResources, href, options);
-}
-
-// On the server, preinit may be called outside of render when sending an
-// external SSR runtime as part of the initial resources payload. Since this
-// is an internal React call, we do not need to use the resources stack.
-export function preinitImpl(
-  resources: Resources,
-  href: string,
-  options: PreinitOptions,
-): void {
-  if (__DEV__) {
-    validatePreinitArguments(href, options);
-  }
-  if (
-    typeof href === 'string' &&
-    href &&
-    typeof options === 'object' &&
-    options !== null
-  ) {
-    const as = options.as;
-    switch (as) {
-      case 'style': {
-        let resource = resources.stylesMap.get(href);
-        if (resource) {
-          if (__DEV__) {
-            const latestProps = stylePropsFromPreinitOptions(
-              href,
-              resource.precedence,
-              options,
-            );
-            validateStyleResourceDifference(resource.props, latestProps);
-          }
-        } else {
-          const precedence = options.precedence || 'default';
-          const resourceProps = stylePropsFromPreinitOptions(
-            href,
-            precedence,
-            options,
-          );
-          resource = createStyleResource(
-            resources,
-            href,
-            precedence,
-            resourceProps,
-          );
-        }
-        resource.set.add(resource);
-        resources.explicitStylePreloads.add(resource.hint);
-
-        return;
-      }
-      case 'script': {
-        const src = href;
-        let resource = resources.scriptsMap.get(src);
-        if (resource) {
-          if (__DEV__) {
-            const latestProps = scriptPropsFromPreinitOptions(src, options);
-            validateScriptResourceDifference(resource.props, latestProps);
-          }
-        } else {
-          const scriptProps = scriptPropsFromPreinitOptions(src, options);
-          resource = createScriptResource(resources, src, scriptProps);
-          resources.scripts.add(resource);
-        }
-        return;
-      }
-    }
-  }
-}
-
-function preloadPropsFromPreloadOptions(
-  href: string,
-  as: ResourceType,
-  options: PreloadOptions,
-): PreloadProps {
-  return {
-    href,
-    rel: 'preload',
-    as,
-    crossOrigin: as === 'font' ? '' : options.crossOrigin,
-    integrity: options.integrity,
-  };
-}
-
-function preloadPropsFromRawProps(
-  href: string,
-  as: ResourceType,
-  rawProps: Props,
-): PreloadProps {
-  const props: PreloadProps = Object.assign({}, rawProps);
-  props.href = href;
-  props.rel = 'preload';
-  props.as = as;
-  if (as === 'font') {
-    // Font preloads always need CORS anonymous mode so we set it here
-    // regardless of the props provided. This should warn elsewhere in
-    // dev
-    props.crossOrigin = '';
-  }
-  return props;
-}
-
-function preloadAsStylePropsFromProps(
-  href: string,
-  props: Props | StyleProps,
-): PreloadProps {
-  return {
-    rel: 'preload',
-    as: 'style',
-    href: href,
-    crossOrigin: props.crossOrigin,
-    integrity: props.integrity,
-    media: props.media,
-    hrefLang: props.hrefLang,
-    referrerPolicy: props.referrerPolicy,
-  };
-}
-
-function preloadAsScriptPropsFromProps(
-  href: string,
-  props: Props | ScriptProps,
-): PreloadProps {
-  return {
-    rel: 'preload',
-    as: 'script',
-    href,
-    crossOrigin: props.crossOrigin,
-    integrity: props.integrity,
-    referrerPolicy: props.referrerPolicy,
-  };
-}
-
-function createPreloadResource(
-  resources: Resources,
-  href: string,
-  as: ResourceType,
-  props: PreloadProps,
-): PreloadResource {
-  const {preloadsMap} = resources;
-  if (__DEV__) {
-    if (preloadsMap.has(href)) {
-      console.error(
-        'createPreloadResource was called when a preload Resource matching the same href already exists. This is a bug in React.',
-      );
-    }
-  }
-
-  const resource = {
-    type: 'preload',
-    as,
-    href,
-    flushed: false,
-    props,
-  };
-  preloadsMap.set(href, resource);
-  return resource;
-}
-
-function stylePropsFromRawProps(
-  href: string,
-  precedence: string,
-  rawProps: Props,
-): StyleProps {
-  const props: StyleProps = Object.assign({}, rawProps);
-  props.href = href;
-  props.rel = 'stylesheet';
-  props['data-precedence'] = precedence;
-  delete props.precedence;
-
-  return props;
-}
-
-function stylePropsFromPreinitOptions(
-  href: string,
-  precedence: string,
-  options: PreinitOptions,
-): StyleProps {
-  return {
-    rel: 'stylesheet',
-    href,
-    'data-precedence': precedence,
-    crossOrigin: options.crossOrigin,
-  };
-}
-
-function createStyleResource(
-  resources: Resources,
-  href: string,
-  precedence: string,
-  props: StyleProps,
-): StyleResource {
-  if (__DEV__) {
-    if (resources.stylesMap.has(href)) {
-      console.error(
-        'createStyleResource was called when a style Resource matching the same href already exists. This is a bug in React.',
-      );
-    }
-  }
-  const {stylesMap, preloadsMap, precedences} = resources;
-
-  // If this is the first time we've seen this precedence we encode it's position in our set even though
-  // we don't add the resource to this set yet
-  let precedenceSet = precedences.get(precedence);
-  if (!precedenceSet) {
-    precedenceSet = new Set();
-    precedences.set(precedence, precedenceSet);
-  }
-
-  let hint = preloadsMap.get(href);
-  if (hint) {
-    // If a preload for this style Resource already exists there are certain props we want to adopt
-    // on the style Resource, primarily focussed on making sure the style network pathways utilize
-    // the preload pathways. For instance if you have diffreent crossOrigin attributes for a preload
-    // and a stylesheet the stylesheet will make a new request even if the preload had already loaded
-    adoptPreloadPropsForStyleProps(props, hint.props);
-
-    if (__DEV__) {
-      validateStyleAndHintProps(
-        hint.props,
-        props,
-        (hint: any)._dev_implicit_construction,
-      );
-    }
-  } else {
-    const preloadResourceProps = preloadAsStylePropsFromProps(href, props);
-    hint = createPreloadResource(
-      resources,
-      href,
-      'style',
-      preloadResourceProps,
-    );
-    if (__DEV__) {
-      (hint: any)._dev_implicit_construction = true;
-    }
-    resources.explicitStylePreloads.add(hint);
-  }
-
-  const resource = {
-    type: 'style',
-    href,
-    precedence,
-    flushed: false,
-    inShell: false,
-    props,
-    hint,
-    set: precedenceSet,
-  };
-  stylesMap.set(href, resource);
-
-  return resource;
-}
-
-function adoptPreloadPropsForStyleProps(
-  resourceProps: StyleProps,
-  preloadProps: PreloadProps,
-): void {
-  if (resourceProps.crossOrigin == null)
-    resourceProps.crossOrigin = preloadProps.crossOrigin;
-  if (resourceProps.referrerPolicy == null)
-    resourceProps.referrerPolicy = preloadProps.referrerPolicy;
-  if (resourceProps.title == null) resourceProps.title = preloadProps.title;
-}
-
-function scriptPropsFromPreinitOptions(
-  src: string,
-  options: PreinitOptions,
-): ScriptProps {
-  return {
-    src,
-    async: true,
-    crossOrigin: options.crossOrigin,
-    integrity: options.integrity,
-  };
-}
-
-function scriptPropsFromRawProps(src: string, rawProps: Props): ScriptProps {
-  const props = Object.assign({}, rawProps);
-  props.src = src;
-  return props;
-}
-
-function createScriptResource(
-  resources: Resources,
-  src: string,
-  props: ScriptProps,
-): ScriptResource {
-  if (__DEV__) {
-    if (resources.scriptsMap.has(src)) {
-      console.error(
-        'createScriptResource was called when a script Resource matching the same src already exists. This is a bug in React.',
-      );
-    }
-  }
-  const {scriptsMap, preloadsMap} = resources;
-
-  let hint = preloadsMap.get(src);
-  if (hint) {
-    // If a preload for this style Resource already exists there are certain props we want to adopt
-    // on the style Resource, primarily focussed on making sure the style network pathways utilize
-    // the preload pathways. For instance if you have diffreent crossOrigin attributes for a preload
-    // and a stylesheet the stylesheet will make a new request even if the preload had already loaded
-    adoptPreloadPropsForScriptProps(props, hint.props);
-
-    if (__DEV__) {
-      validateScriptAndHintProps(
-        hint.props,
-        props,
-        (hint: any)._dev_implicit_construction,
-      );
-    }
-  } else {
-    const preloadResourceProps = preloadAsScriptPropsFromProps(src, props);
-    hint = createPreloadResource(
-      resources,
-      src,
-      'script',
-      preloadResourceProps,
-    );
-    if (__DEV__) {
-      (hint: any)._dev_implicit_construction = true;
-    }
-    resources.explicitScriptPreloads.add(hint);
-  }
-
-  const resource = {
-    type: 'script',
-    src,
-    flushed: false,
-    props,
-    hint,
-  };
-  scriptsMap.set(src, resource);
-
-  return resource;
-}
-
-function adoptPreloadPropsForScriptProps(
-  resourceProps: ScriptProps,
-  preloadProps: PreloadProps,
-): void {
-  if (resourceProps.crossOrigin == null)
-    resourceProps.crossOrigin = preloadProps.crossOrigin;
-  if (resourceProps.referrerPolicy == null)
-    resourceProps.referrerPolicy = preloadProps.referrerPolicy;
-  if (resourceProps.integrity == null)
-    resourceProps.integrity = preloadProps.integrity;
-}
-
-function titlePropsFromRawProps(
-  child: string | number,
-  rawProps: Props,
-): TitleProps {
-  const props = Object.assign({}, rawProps);
-  props.children = child;
-  return props;
-}
-
-export function resourcesFromElement(type: string, props: Props): boolean {
-  if (!currentResources) {
-    throw new Error(
-      '"currentResources" was expected to exist. This is a bug in React.',
-    );
-  }
-  const resources = currentResources;
-  switch (type) {
-    case 'title': {
-      const children = props.children;
-      let child;
-      if (Array.isArray(children)) {
-        child = children.length === 1 ? children[0] : null;
-      } else {
-        child = children;
-      }
-      if (
-        typeof child !== 'function' &&
-        typeof child !== 'symbol' &&
-        child !== null &&
-        child !== undefined
-      ) {
-        // eslint-disable-next-line react-internal/safe-string-coercion
-        const childString = '' + (child: any);
-        const key = 'title::' + childString;
-        let resource = resources.headsMap.get(key);
-        if (!resource) {
-          resource = {
-            type: 'title',
-            props: titlePropsFromRawProps(childString, props),
-            flushed: false,
-          };
-          resources.headsMap.set(key, resource);
-          resources.headResources.add(resource);
-        }
-      }
-      return true;
-    }
-    case 'meta': {
-      let key, propertyPath;
-      if (typeof props.charSet === 'string') {
-        key = 'charSet';
-      } else if (typeof props.content === 'string') {
-        const contentKey = '::' + props.content;
-        if (typeof props.httpEquiv === 'string') {
-          key = 'httpEquiv::' + props.httpEquiv + contentKey;
-        } else if (typeof props.name === 'string') {
-          key = 'name::' + props.name + contentKey;
-        } else if (typeof props.itemProp === 'string') {
-          key = 'itemProp::' + props.itemProp + contentKey;
-        } else if (typeof props.property === 'string') {
-          const {property} = props;
-          key = 'property::' + property + contentKey;
-          propertyPath = property;
-          const parentPath = property.split(':').slice(0, -1).join(':');
-          const parentResource = resources.structuredMetaKeys.get(parentPath);
-          if (parentResource) {
-            key = parentResource.key + '::child::' + key;
-          }
-        }
-      }
-      if (key) {
-        if (!resources.headsMap.has(key)) {
-          const resource = {
-            type: 'meta',
-            key,
-            props: Object.assign({}, props),
-            flushed: false,
-          };
-          resources.headsMap.set(key, resource);
-          if (key === 'charSet') {
-            resources.charset = resource;
-          } else {
-            if (propertyPath) {
-              resources.structuredMetaKeys.set(propertyPath, resource);
-            }
-            resources.headResources.add(resource);
-          }
-        }
-      }
-      return true;
-    }
-    case 'base': {
-      const {target, href} = props;
-      // We mirror the key construction on the client since we will likely unify
-      // this code in the future to better guarantee key semantics are identical
-      // in both environments
-      let key = 'base';
-      key += typeof href === 'string' ? `[href="${href}"]` : ':not([href])';
-      key +=
-        typeof target === 'string' ? `[target="${target}"]` : ':not([target])';
-      if (!resources.headsMap.has(key)) {
-        const resource = {
-          type: 'base',
-          props: Object.assign({}, props),
-          flushed: false,
-        };
-        resources.headsMap.set(key, resource);
-        resources.bases.add(resource);
-      }
-      return true;
-    }
-  }
-  return false;
-}
-
-// Construct a resource from link props.
-export function resourcesFromLink(props: Props): boolean {
-  if (!currentResources) {
-    throw new Error(
-      '"currentResources" was expected to exist. This is a bug in React.',
-    );
-  }
-  const resources = currentResources;
-
-  const {rel, href} = props;
-  if (!href || typeof href !== 'string' || !rel || typeof rel !== 'string') {
-    return false;
-  }
-
-  let key = '';
-  switch (rel) {
-    case 'stylesheet': {
-      const {onLoad, onError, precedence, disabled} = props;
-      if (
-        typeof precedence !== 'string' ||
-        onLoad ||
-        onError ||
-        disabled != null
-      ) {
-        // This stylesheet is either not opted into Resource semantics or has conflicting properties which
-        // disqualify it for such. We can still create a preload resource to help it load faster on the
-        // client
-        if (__DEV__) {
-          validateLinkPropsForStyleResource(props);
-        }
-        let preloadResource = resources.preloadsMap.get(href);
-        if (!preloadResource) {
-          preloadResource = createPreloadResource(
-            resources,
-            href,
-            'style',
-            preloadAsStylePropsFromProps(href, props),
-          );
-          if (__DEV__) {
-            (preloadResource: any)._dev_implicit_construction = true;
-          }
-          resources.usedStylePreloads.add(preloadResource);
-        }
-        return false;
-      } else {
-        // We are able to convert this link element to a resource exclusively. We construct the relevant Resource
-        // and return true indicating that this link was fully consumed.
-        let resource = resources.stylesMap.get(href);
-
-        if (resource) {
-          if (__DEV__) {
-            const resourceProps = stylePropsFromRawProps(
-              href,
-              precedence,
-              props,
-            );
-            adoptPreloadPropsForStyleProps(resourceProps, resource.hint.props);
-            validateStyleResourceDifference(resource.props, resourceProps);
-          }
-        } else {
-          const resourceProps = stylePropsFromRawProps(href, precedence, props);
-          resource = createStyleResource(
-            // $FlowFixMe[incompatible-call] found when upgrading Flow
-            currentResources,
-            href,
-            precedence,
-            resourceProps,
-          );
-          resources.usedStylePreloads.add(resource.hint);
-        }
-        if (resources.boundaryResources) {
-          resources.boundaryResources.add(resource);
-        } else {
-          resource.set.add(resource);
-        }
-        return true;
-      }
-    }
-    case 'preload': {
-      const {as} = props;
-      switch (as) {
-        case 'script':
-        case 'style':
-        case 'font': {
-          if (__DEV__) {
-            validateLinkPropsForPreloadResource(props);
-          }
-          let resource = resources.preloadsMap.get(href);
-          if (resource) {
-            if (__DEV__) {
-              const originallyImplicit =
-                (resource: any)._dev_implicit_construction === true;
-              const latestProps = preloadPropsFromRawProps(href, as, props);
-              validatePreloadResourceDifference(
-                resource.props,
-                originallyImplicit,
-                latestProps,
-                false,
-              );
-            }
-          } else {
-            resource = createPreloadResource(
-              resources,
-              href,
-              as,
-              preloadPropsFromRawProps(href, as, props),
-            );
-            switch (as) {
-              case 'script': {
-                resources.explicitScriptPreloads.add(resource);
-                break;
-              }
-              case 'style': {
-                resources.explicitStylePreloads.add(resource);
-                break;
-              }
-              case 'font': {
-                resources.fontPreloads.add(resource);
-                break;
-              }
-            }
-          }
-          return true;
-        }
-      }
-      break;
-    }
-  }
-  if (props.onLoad || props.onError) {
-    // When a link has these props we can't treat it is a Resource but if we rendered it on the
-    // server it would look like a Resource in the rendered html (the onLoad/onError aren't emitted)
-    // Instead we expect the client to insert them rather than hydrate them which also guarantees
-    // that the onLoad and onError won't fire before the event handlers are attached
-    return true;
-  }
-
-  const sizes = typeof props.sizes === 'string' ? props.sizes : '';
-  const media = typeof props.media === 'string' ? props.media : '';
-  key =
-    'rel:' + rel + '::href:' + href + '::sizes:' + sizes + '::media:' + media;
-  let resource = resources.headsMap.get(key);
-  if (!resource) {
-    resource = {
-      type: 'link',
-      props: Object.assign({}, props),
-      flushed: false,
-    };
-    resources.headsMap.set(key, resource);
-    switch (rel) {
-      case 'preconnect':
-      case 'dns-prefetch': {
-        resources.preconnects.add(resource);
-        break;
-      }
-      default: {
-        resources.headResources.add(resource);
-      }
-    }
-  }
-  return true;
-}
-
-// Construct a resource from link props.
-export function resourcesFromScript(props: Props): boolean {
-  if (!currentResources) {
-    throw new Error(
-      '"currentResources" was expected to exist. This is a bug in React.',
-    );
-  }
-  const resources = currentResources;
-  const {src, async, onLoad, onError} = props;
-  if (!src || typeof src !== 'string') {
-    return false;
-  }
-
-  if (async) {
-    if (onLoad || onError) {
-      if (__DEV__) {
-        // validate
-      }
-      let preloadResource = resources.preloadsMap.get(src);
-      if (!preloadResource) {
-        preloadResource = createPreloadResource(
-          resources,
-          src,
-          'script',
-          preloadAsScriptPropsFromProps(src, props),
-        );
-        if (__DEV__) {
-          (preloadResource: any)._dev_implicit_construction = true;
-        }
-        resources.usedScriptPreloads.add(preloadResource);
-      }
-    } else {
-      let resource = resources.scriptsMap.get(src);
-      if (resource) {
-        if (__DEV__) {
-          const latestProps = scriptPropsFromRawProps(src, props);
-          adoptPreloadPropsForScriptProps(latestProps, resource.hint.props);
-          validateScriptResourceDifference(resource.props, latestProps);
-        }
-      } else {
-        const resourceProps = scriptPropsFromRawProps(src, props);
-        resource = createScriptResource(resources, src, resourceProps);
-        resources.scripts.add(resource);
-      }
-    }
-    return true;
-  }
-
-  return false;
-}
-
-export function hoistResources(
-  resources: Resources,
-  source: BoundaryResources,
-): void {
-  const currentBoundaryResources = resources.boundaryResources;
-  if (currentBoundaryResources) {
-    source.forEach(resource => currentBoundaryResources.add(resource));
-    source.clear();
-  }
-}
-
-export function hoistResourcesToRoot(
-  resources: Resources,
-  boundaryResources: BoundaryResources,
-): void {
-  boundaryResources.forEach(resource => resource.set.add(resource));
-  boundaryResources.clear();
-}
diff --git a/packages/react-dom-bindings/src/server/ReactDOMServerFormatConfig.js b/packages/react-dom-bindings/src/server/ReactDOMServerFormatConfig.js
index 7abe78dbbd195..782818ba2837c 100644
--- a/packages/react-dom-bindings/src/server/ReactDOMServerFormatConfig.js
+++ b/packages/react-dom-bindings/src/server/ReactDOMServerFormatConfig.js
@@ -8,8 +8,6 @@
  */
 
 import type {ReactNodeList} from 'shared/ReactTypes';
-import type {Resources, BoundaryResources} from './ReactDOMFloatServer';
-export type {Resources, BoundaryResources};
 
 import {
   checkHtmlStringCoercion,
@@ -62,23 +60,6 @@ import hasOwnProperty from 'shared/hasOwnProperty';
 import sanitizeURL from '../shared/sanitizeURL';
 import isArray from 'shared/isArray';
 
-import {
-  preinitImpl,
-  prepareToRenderResources,
-  finishRenderingResources,
-  resourcesFromElement,
-  resourcesFromLink,
-  resourcesFromScript,
-  ReactDOMServerFloatDispatcher,
-} from './ReactDOMFloatServer';
-export {
-  createResources,
-  createBoundaryResources,
-  setCurrentlyRenderingBoundaryResourcesTarget,
-  hoistResources,
-  hoistResourcesToRoot,
-} from './ReactDOMFloatServer';
-
 import {
   clientRenderBoundary as clientRenderFunction,
   completeBoundary as completeBoundaryFunction,
@@ -86,15 +67,36 @@ import {
   completeSegment as completeSegmentFunction,
 } from './fizz-instruction-set/ReactDOMFizzInstructionSetInlineCodeStrings';
 
+import {
+  getValueDescriptorExpectingObjectForWarning,
+  getValueDescriptorExpectingEnumForWarning,
+  describeDifferencesForStylesheets,
+  describeDifferencesForStylesheetOverPreinit,
+  describeDifferencesForScripts,
+  describeDifferencesForScriptOverPreinit,
+  describeDifferencesForPreinits,
+  describeDifferencesForPreinitOverStylesheet,
+  describeDifferencesForPreinitOverScript,
+  describeDifferencesForPreloads,
+  describeDifferencesForPreloadOverImplicitPreload,
+} from '../shared/ReactDOMResourceValidation';
+
 import ReactDOMSharedInternals from 'shared/ReactDOMSharedInternals';
 const ReactDOMCurrentDispatcher = ReactDOMSharedInternals.Dispatcher;
 
 const ReactDOMServerDispatcher = enableFloat
-  ? ReactDOMServerFloatDispatcher
+  ? {
+      preload,
+      preinit,
+    }
   : {};
 
+let currentResources: null | Resources = null;
+const currentResourcesStack = [];
+
 export function prepareToRender(resources: Resources): mixed {
-  prepareToRenderResources(resources);
+  currentResourcesStack.push(currentResources);
+  currentResources = resources;
 
   const previousHostDispatcher = ReactDOMCurrentDispatcher.current;
   ReactDOMCurrentDispatcher.current = ReactDOMServerDispatcher;
@@ -102,7 +104,7 @@ export function prepareToRender(resources: Resources): mixed {
 }
 
 export function cleanupAfterRender(previousDispatcher: mixed) {
-  finishRenderingResources();
+  currentResources = currentResourcesStack.pop();
   ReactDOMCurrentDispatcher.current = previousDispatcher;
 }
 
@@ -114,6 +116,13 @@ export type StreamingFormat = 0 | 1;
 const ScriptStreamingFormat: StreamingFormat = 0;
 const DataStreamingFormat: StreamingFormat = 1;
 
+export type InstructionState = number;
+const NothingSent /*                      */ = 0b0000;
+const SentCompleteSegmentFunction /*      */ = 0b0001;
+const SentCompleteBoundaryFunction /*     */ = 0b0010;
+const SentClientRenderFunction /*         */ = 0b0100;
+const SentStyleInsertionFunction /*       */ = 0b1000;
+
 // Per response, global state that is not contextual to the rendering subtree.
 export type ResponseState = {
   bootstrapChunks: Array<Chunk | PrecomputedChunk>,
@@ -123,15 +132,27 @@ export type ResponseState = {
   idPrefix: string,
   nextSuspenseID: number,
   streamingFormat: StreamingFormat,
+
   // state for script streaming format, unused if using external runtime / data
   startInlineScript: PrecomputedChunk,
-  sentCompleteSegmentFunction: boolean,
-  sentCompleteBoundaryFunction: boolean,
-  sentClientRenderFunction: boolean,
-  sentStyleInsertionFunction: boolean,
+  instructions: InstructionState,
+
   // state for data streaming format
   externalRuntimeConfig: BootstrapScriptDescriptor | null,
+
+  // preamble and postamble chunks and state
+  htmlChunks: null | Array<Chunk | PrecomputedChunk>,
+  headChunks: null | Array<Chunk | PrecomputedChunk>,
+  hasBody: boolean,
+
+  // Hoistable chunks
+  charsetChunks: Array<Chunk | PrecomputedChunk>,
+  preconnectChunks: Array<Chunk | PrecomputedChunk>,
+  preloadChunks: Array<Chunk | PrecomputedChunk>,
+  hoistableChunks: Array<Chunk | PrecomputedChunk>,
+
   // We allow the legacy renderer to extend this object.
+
   ...
 };
 
@@ -268,11 +289,15 @@ export function createResponseState(
     nextSuspenseID: 0,
     streamingFormat,
     startInlineScript: inlineScriptWithNonce,
-    sentCompleteSegmentFunction: false,
-    sentCompleteBoundaryFunction: false,
-    sentClientRenderFunction: false,
-    sentStyleInsertionFunction: false,
+    instructions: NothingSent,
     externalRuntimeConfig: externalRuntimeDesc,
+    htmlChunks: null,
+    headChunks: null,
+    hasBody: false,
+    charsetChunks: [],
+    preconnectChunks: [],
+    preloadChunks: [],
+    hoistableChunks: [],
   };
 }
 
@@ -280,17 +305,20 @@ export function createResponseState(
 // modes. We only include the variants as they matter for the sake of our purposes.
 // We don't actually provide the namespace therefore we use constants instead of the string.
 const ROOT_HTML_MODE = 0; // Used for the root most element tag.
-export const HTML_MODE = 1;
-const SVG_MODE = 2;
-const MATHML_MODE = 3;
-const HTML_TABLE_MODE = 4;
-const HTML_TABLE_BODY_MODE = 5;
-const HTML_TABLE_ROW_MODE = 6;
-const HTML_COLGROUP_MODE = 7;
+// We have a less than HTML_HTML_MODE check elsewhere. If you add more cases here, make sure it
+// still makes sense
+const HTML_HTML_MODE = 1; // Used for the <html> if it is at the top level.
+export const HTML_MODE = 2;
+const SVG_MODE = 3;
+const MATHML_MODE = 4;
+const HTML_TABLE_MODE = 5;
+const HTML_TABLE_BODY_MODE = 6;
+const HTML_TABLE_ROW_MODE = 7;
+const HTML_COLGROUP_MODE = 8;
 // We have a greater than HTML_TABLE_MODE check elsewhere. If you add more cases here, make sure it
 // still makes sense
 
-type InsertionMode = 0 | 1 | 2 | 3 | 4 | 5 | 6 | 7;
+type InsertionMode = 0 | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8;
 
 // Lets us keep track of contextual state and pick it back up after suspending.
 export type FormatContext = {
@@ -392,12 +420,16 @@ export function getChildFormatContext(
     );
   }
   if (parentContext.insertionMode === ROOT_HTML_MODE) {
-    // We've emitted the root and is now in plain HTML mode.
-    return createFormatContext(
-      HTML_MODE,
-      null,
-      parentContext.noscriptTagInScope,
-    );
+    if (type === 'html') {
+      // We've emitted the root and is now in <html> mode.
+      return createFormatContext(HTML_HTML_MODE, null, false);
+    } else {
+      // We've emitted the root and is now in plain HTML mode.
+      return createFormatContext(HTML_MODE, null, false);
+    }
+  } else if (parentContext.insertionMode === HTML_HTML_MODE) {
+    // We've emitted the document element and is now in plain HTML mode.
+    return createFormatContext(HTML_MODE, null, false);
   }
   return parentContext;
 }
@@ -487,9 +519,8 @@ const styleAttributeStart = stringToPrecomputedChunk(' style="');
 const styleAssign = stringToPrecomputedChunk(':');
 const styleSeparator = stringToPrecomputedChunk(';');
 
-function pushStyle(
+function pushStyleAttribute(
   target: Array<Chunk | PrecomputedChunk>,
-  responseState: ResponseState,
   style: Object,
 ): void {
   if (typeof style !== 'object') {
@@ -577,13 +608,12 @@ const attributeEmptyString = stringToPrecomputedChunk('=""');
 
 function pushAttribute(
   target: Array<Chunk | PrecomputedChunk>,
-  responseState: ResponseState,
   name: string,
   value: string | boolean | number | Function | Object, // not null or undefined
 ): void {
   switch (name) {
     case 'style': {
-      pushStyle(target, responseState, value);
+      pushStyleAttribute(target, value);
       return;
     }
     case 'defaultValue':
@@ -804,7 +834,6 @@ function checkSelectProp(props: any, propName: string) {
 function pushStartSelect(
   target: Array<Chunk | PrecomputedChunk>,
   props: Object,
-  responseState: ResponseState,
 ): ReactNodeList {
   if (__DEV__) {
     checkControlledValueProps('select', props);
@@ -852,7 +881,7 @@ function pushStartSelect(
           // These are set on the Context instead and applied to the nested options.
           break;
         default:
-          pushAttribute(target, responseState, propKey, propValue);
+          pushAttribute(target, propKey, propValue);
           break;
       }
     }
@@ -894,7 +923,6 @@ const selectedMarkerAttribute = stringToPrecomputedChunk(' selected=""');
 function pushStartOption(
   target: Array<Chunk | PrecomputedChunk>,
   props: Object,
-  responseState: ResponseState,
   formatContext: FormatContext,
 ): ReactNodeList {
   const selectedValue = formatContext.selectedValue;
@@ -938,7 +966,7 @@ function pushStartOption(
         // We intentionally fallthrough to also set the attribute on the node.
         // eslint-disable-next-line-no-fallthrough
         default:
-          pushAttribute(target, responseState, propKey, propValue);
+          pushAttribute(target, propKey, propValue);
           break;
       }
     }
@@ -997,7 +1025,6 @@ function pushStartOption(
 function pushInput(
   target: Array<Chunk | PrecomputedChunk>,
   props: Object,
-  responseState: ResponseState,
 ): ReactNodeList {
   if (__DEV__) {
     checkControlledValueProps('input', props);
@@ -1072,21 +1099,21 @@ function pushInput(
           value = propValue;
           break;
         default:
-          pushAttribute(target, responseState, propKey, propValue);
+          pushAttribute(target, propKey, propValue);
           break;
       }
     }
   }
 
   if (checked !== null) {
-    pushAttribute(target, responseState, 'checked', checked);
+    pushAttribute(target, 'checked', checked);
   } else if (defaultChecked !== null) {
-    pushAttribute(target, responseState, 'checked', defaultChecked);
+    pushAttribute(target, 'checked', defaultChecked);
   }
   if (value !== null) {
-    pushAttribute(target, responseState, 'value', value);
+    pushAttribute(target, 'value', value);
   } else if (defaultValue !== null) {
-    pushAttribute(target, responseState, 'value', defaultValue);
+    pushAttribute(target, 'value', defaultValue);
   }
 
   target.push(endOfStartTagSelfClosing);
@@ -1096,7 +1123,6 @@ function pushInput(
 function pushStartTextArea(
   target: Array<Chunk | PrecomputedChunk>,
   props: Object,
-  responseState: ResponseState,
 ): ReactNodeList {
   if (__DEV__) {
     checkControlledValueProps('textarea', props);
@@ -1143,7 +1169,7 @@ function pushStartTextArea(
           );
         // eslint-disable-next-line-no-fallthrough
         default:
-          pushAttribute(target, responseState, propKey, propValue);
+          pushAttribute(target, propKey, propValue);
           break;
       }
     }
@@ -1214,85 +1240,364 @@ function pushStartTextArea(
   return null;
 }
 
-function pushBase(
+function pushMeta(
   target: Array<Chunk | PrecomputedChunk>,
   props: Object,
   responseState: ResponseState,
   textEmbedded: boolean,
+  insertionMode: InsertionMode,
   noscriptTagInScope: boolean,
-): ReactNodeList {
-  if (
-    enableFloat &&
-    !noscriptTagInScope &&
-    resourcesFromElement('base', props)
-  ) {
-    if (textEmbedded) {
-      // This link follows text but we aren't writing a tag. while not as efficient as possible we need
-      // to be safe and assume text will follow by inserting a textSeparator
-      target.push(textSeparator);
+): null {
+  if (enableFloat) {
+    if (insertionMode === SVG_MODE || noscriptTagInScope) {
+      return pushSelfClosing(target, props, 'meta');
+    } else {
+      if (textEmbedded) {
+        // This link follows text but we aren't writing a tag. while not as efficient as possible we need
+        // to be safe and assume text will follow by inserting a textSeparator
+        target.push(textSeparator);
+      }
+
+      if (typeof props.charSet === 'string') {
+        return pushSelfClosing(responseState.charsetChunks, props, 'meta');
+      } else {
+        return pushSelfClosing(responseState.hoistableChunks, props, 'meta');
+      }
     }
-    // We have converted this link exclusively to a resource and no longer
-    // need to emit it
-    return null;
+  } else {
+    return pushSelfClosing(target, props, 'meta');
   }
-
-  return pushSelfClosing(target, props, 'base', responseState);
 }
 
-function pushMeta(
+function pushLink(
   target: Array<Chunk | PrecomputedChunk>,
   props: Object,
   responseState: ResponseState,
+  resources: Resources,
   textEmbedded: boolean,
+  insertionMode: InsertionMode,
   noscriptTagInScope: boolean,
-): ReactNodeList {
-  if (
-    enableFloat &&
-    !noscriptTagInScope &&
-    resourcesFromElement('meta', props)
-  ) {
-    if (textEmbedded) {
-      // This link follows text but we aren't writing a tag. while not as efficient as possible we need
-      // to be safe and assume text will follow by inserting a textSeparator
-      target.push(textSeparator);
+): null {
+  if (enableFloat) {
+    const rel = props.rel;
+    const href = props.href;
+    const precedence = props.precedence;
+    if (
+      insertionMode === SVG_MODE ||
+      noscriptTagInScope ||
+      typeof rel !== 'string' ||
+      typeof href !== 'string' ||
+      href === ''
+    ) {
+      if (__DEV__) {
+        if (rel === 'stylesheet' && typeof props.precedence === 'string') {
+          if (typeof href !== 'string' || !href) {
+            console.error(
+              'React encountered a `<link rel="stylesheet" .../>` with a `precedence` prop and expected the `href` prop to be a non-empty string but ecountered %s instead. If your intent was to have React hoist and deduplciate this stylesheet using the `precedence` prop ensure there is a non-empty string `href` prop as well, otherwise remove the `precedence` prop.',
+              getValueDescriptorExpectingObjectForWarning(href),
+            );
+          }
+        }
+      }
+      pushLinkImpl(target, props);
+      return null;
+    }
+
+    if (props.rel === 'stylesheet') {
+      // This <link> may hoistable as a Stylesheet Resource, otherwise it will emit in place
+      const key = getResourceKey('style', href);
+      if (
+        typeof precedence !== 'string' ||
+        props.disabled != null ||
+        props.onLoad ||
+        props.onError
+      ) {
+        // This stylesheet is either not opted into Resource semantics or has conflicting properties which
+        // disqualify it for such. We can still create a preload resource to help it load faster on the
+        // client
+        if (__DEV__) {
+          if (typeof precedence === 'string') {
+            if (props.disabled != null) {
+              console.error(
+                'React encountered a `<link rel="stylesheet" .../>` with a `precedence` prop and a `disabled` prop. The presence of the `disabled` prop indicates an intent to manage the stylesheet active state from your from your Component code and React will not hoist or deduplicate this stylesheet. If your intent was to have React hoist and deduplciate this stylesheet using the `precedence` prop remove the `disabled` prop, otherwise remove the `precedence` prop.',
+              );
+            } else if (props.onLoad || props.onError) {
+              const propDescription =
+                props.onLoad && props.onError
+                  ? '`onLoad` and `onError` props'
+                  : props.onLoad
+                  ? '`onLoad` prop'
+                  : '`onError` prop';
+              console.error(
+                'React encountered a `<link rel="stylesheet" .../>` with a `precedence` prop and %s. The presence of loading and error handlers indicates an intent to manage the stylesheet loading state from your from your Component code and React will not hoist or deduplicate this stylesheet. If your intent was to have React hoist and deduplciate this stylesheet using the `precedence` prop remove the %s, otherwise remove the `precedence` prop.',
+                propDescription,
+                propDescription,
+              );
+            }
+          }
+        }
+        let resource = resources.preloadsMap.get(key);
+        if (!resource) {
+          resource = {
+            type: 'preload',
+            chunks: ([]: Array<Chunk | PrecomputedChunk>),
+            state: NoState,
+            props: preloadAsStylePropsFromProps(href, props),
+          };
+          resources.preloadsMap.set(key, resource);
+          if (__DEV__) {
+            markAsImplicitResourceDEV(resource, props, resource.props);
+          }
+        }
+        pushLinkImpl(resource.chunks, resource.props);
+        resources.usedStylesheets.add(resource);
+        return pushLinkImpl(target, props);
+      } else {
+        // This stylesheet refers to a Resource and we create a new one if necessary
+        let resource = resources.stylesMap.get(key);
+        if (__DEV__) {
+          const devResource = getAsResourceDEV(resource);
+          if (devResource) {
+            switch (devResource.__provenance) {
+              case 'rendered': {
+                const differenceDescription = describeDifferencesForStylesheets(
+                  // Diff the props from the JSX element, not the derived resource props
+                  props,
+                  devResource.__originalProps,
+                );
+                if (differenceDescription) {
+                  console.error(
+                    'React encountered a <link rel="stylesheet" href="%s" .../> with a `precedence` prop that has props that conflict' +
+                      ' with another hoistable stylesheet with the same `href`. When using `precedence` with <link rel="stylsheet" .../>' +
+                      ' the props from the first encountered instance will be used and props from later instances will be ignored.' +
+                      ' Update the props on either <link rel="stylesheet" .../> instance so they agree.%s',
+                    href,
+                    differenceDescription,
+                  );
+                }
+                break;
+              }
+              case 'preinit': {
+                const differenceDescription =
+                  describeDifferencesForStylesheetOverPreinit(
+                    // Diff the props from the JSX element, not the derived resource props
+                    props,
+                    devResource.__propsEquivalent,
+                  );
+                if (differenceDescription) {
+                  console.error(
+                    'React encountered a <link rel="stylesheet" precedence="%s" href="%s" .../> with props that conflict' +
+                      ' with the options provided to `ReactDOM.preinit("%s", { as: "style", ... })`. React will use the first props or preinitialization' +
+                      ' options encountered when rendering a hoistable stylesheet with a particular `href` and will ignore any newer props or' +
+                      ' options. The first instance of this stylesheet resource was created using the `ReactDOM.preinit()` function.' +
+                      ' Please note, `ReactDOM.preinit()` is modeled off of module import assertions capabilities and does not support' +
+                      ' arbitrary props. If you need to have props not included with the preinit options you will need to rely on rendering' +
+                      ' <link> tags only.%s',
+                    precedence,
+                    href,
+                    href,
+                    differenceDescription,
+                  );
+                }
+                break;
+              }
+            }
+          }
+        }
+        if (!resource) {
+          const resourceProps = stylesheetPropsFromRawProps(props);
+          const preloadResource = resources.preloadsMap.get(key);
+          if (preloadResource) {
+            // If we already had a preload we don't want that resource to flush directly.
+            // We let the newly created resource govern flushing.
+            preloadResource.state |= Blocked;
+            adoptPreloadPropsForStylesheetProps(
+              resourceProps,
+              preloadResource.props,
+            );
+          }
+          resource = {
+            type: 'stylesheet',
+            chunks: ([]: Array<Chunk | PrecomputedChunk>),
+            state: resources.boundaryResources ? Blocked : NoState,
+            props: resourceProps,
+          };
+          resources.stylesMap.set(key, resource);
+          if (__DEV__) {
+            markAsRenderedResourceDEV(resource, props);
+          }
+          let precedenceSet = resources.precedences.get(precedence);
+          if (!precedenceSet) {
+            precedenceSet = new Set();
+            resources.precedences.set(precedence, precedenceSet);
+          }
+          precedenceSet.add(resource);
+        }
+        if (resources.boundaryResources) {
+          resources.boundaryResources.add(resource);
+        }
+        if (textEmbedded) {
+          // This link follows text but we aren't writing a tag. while not as efficient as possible we need
+          // to be safe and assume text will follow by inserting a textSeparator
+          target.push(textSeparator);
+        }
+        return null;
+      }
+    } else if (props.onLoad || props.onError) {
+      // When using load handlers we cannot hoist and need to emit links in place
+      return pushLinkImpl(target, props);
+    } else {
+      // We can hoist this link so we may need to emit a text separator.
+      // @TODO refactor text separators so we don't have to defensively add
+      // them when we don't end up emitting a tag as a result of pushStartInstance
+      if (textEmbedded) {
+        // This link follows text but we aren't writing a tag. while not as efficient as possible we need
+        // to be safe and assume text will follow by inserting a textSeparator
+        target.push(textSeparator);
+      }
+
+      switch (props.rel) {
+        case 'preconnect':
+        case 'dns-prefetch':
+          return pushLinkImpl(responseState.preconnectChunks, props);
+        case 'preload':
+          return pushLinkImpl(responseState.preloadChunks, props);
+        default:
+          return pushLinkImpl(responseState.hoistableChunks, props);
+      }
+    }
+  } else {
+    return pushLinkImpl(target, props);
+  }
+}
+
+function pushLinkImpl(
+  target: Array<Chunk | PrecomputedChunk>,
+  props: Object,
+): null {
+  target.push(startChunkForTag('link'));
+
+  for (const propKey in props) {
+    if (hasOwnProperty.call(props, propKey)) {
+      const propValue = props[propKey];
+      if (propValue == null) {
+        continue;
+      }
+      switch (propKey) {
+        case 'children':
+        case 'dangerouslySetInnerHTML':
+          throw new Error(
+            `${'link'} is a self-closing tag and must neither have \`children\` nor ` +
+              'use `dangerouslySetInnerHTML`.',
+          );
+        // eslint-disable-next-line-no-fallthrough
+        default:
+          pushAttribute(target, propKey, propValue);
+          break;
+      }
     }
-    // We have converted this link exclusively to a resource and no longer
-    // need to emit it
-    return null;
   }
 
-  return pushSelfClosing(target, props, 'meta', responseState);
+  target.push(endOfStartTagSelfClosing);
+  return null;
 }
 
-function pushLink(
+function pushStyle(
   target: Array<Chunk | PrecomputedChunk>,
   props: Object,
-  responseState: ResponseState,
+  resources: Resources,
   textEmbedded: boolean,
+  insertionMode: InsertionMode,
   noscriptTagInScope: boolean,
 ): ReactNodeList {
-  if (enableFloat && !noscriptTagInScope && resourcesFromLink(props)) {
+  if (__DEV__) {
+    if (hasOwnProperty.call(props, 'children')) {
+      const children = props.children;
+
+      const child = Array.isArray(children)
+        ? children.length < 2
+          ? children[0]
+          : null
+        : children;
+
+      if (
+        typeof child === 'function' ||
+        typeof child === 'symbol' ||
+        Array.isArray(child)
+      ) {
+        const childType =
+          typeof child === 'function'
+            ? 'a Function'
+            : typeof child === 'symbol'
+            ? 'a Sybmol'
+            : 'an Array';
+        console.error(
+          'React expect children of <style> tags to be a string, number, or object with a `toString` method but found %s instead. ' +
+            'In browsers style Elements can only have `Text` Nodes as children.',
+          childType,
+        );
+      }
+    }
+  }
+  if (enableFloat) {
+    const precedence = props.precedence;
+    const href = props.href;
+
+    if (
+      insertionMode === SVG_MODE ||
+      noscriptTagInScope ||
+      typeof precedence !== 'string' ||
+      typeof href !== 'string' ||
+      href === ''
+    ) {
+      // This style tag is not able to be turned into a Style Resource
+      return pushStyleImpl(target, props);
+    }
+
+    const key = getResourceKey('style', href);
+    let resource = resources.stylesMap.get(key);
+    if (!resource) {
+      resource = {
+        type: 'style',
+        chunks: ([]: Array<Chunk | PrecomputedChunk>),
+        state: resources.boundaryResources ? Blocked : NoState,
+        props: styleTagPropsFromRawProps(props),
+      };
+      resources.stylesMap.set(key, resource);
+      if (__DEV__) {
+        markAsRenderedResourceDEV(resource, props);
+      }
+      pushStyleImpl(resource.chunks, resource.props);
+
+      let precedenceSet = resources.precedences.get(precedence);
+      if (!precedenceSet) {
+        precedenceSet = new Set();
+        resources.precedences.set(precedence, precedenceSet);
+      }
+      precedenceSet.add(resource);
+      if (resources.boundaryResources) {
+        resources.boundaryResources.add(resource);
+      }
+    }
+
     if (textEmbedded) {
       // This link follows text but we aren't writing a tag. while not as efficient as possible we need
       // to be safe and assume text will follow by inserting a textSeparator
       target.push(textSeparator);
     }
-    // We have converted this link exclusively to a resource and no longer
-    // need to emit it
-    return null;
+  } else {
+    return pushStartGenericElement(target, props, 'style');
   }
-
-  return pushLinkImpl(target, props, responseState);
 }
 
-function pushLinkImpl(
+function pushStyleImpl(
   target: Array<Chunk | PrecomputedChunk>,
   props: Object,
-  responseState: ResponseState,
 ): ReactNodeList {
-  const isStylesheet = props.rel === 'stylesheet';
-  target.push(startChunkForTag('link'));
+  target.push(startChunkForTag('style'));
 
+  let children = null;
+  let innerHTML = null;
   for (const propKey in props) {
     if (hasOwnProperty.call(props, propKey)) {
       const propValue = props[propKey];
@@ -1301,27 +1606,35 @@ function pushLinkImpl(
       }
       switch (propKey) {
         case 'children':
+          children = propValue;
+          break;
         case 'dangerouslySetInnerHTML':
-          throw new Error(
-            `${'link'} is a self-closing tag and must neither have \`children\` nor ` +
-              'use `dangerouslySetInnerHTML`.',
-          );
-        case 'precedence': {
-          if (enableFloat && isStylesheet) {
-            // precedence is a reversed property for stylesheets to opt-into resource semantcs
-            continue;
-          }
-          // intentionally fall through
-        }
-        // eslint-disable-next-line-no-fallthrough
+          innerHTML = propValue;
+          break;
         default:
-          pushAttribute(target, responseState, propKey, propValue);
+          pushAttribute(target, propKey, propValue);
           break;
       }
     }
   }
+  target.push(endOfStartTag);
 
-  target.push(endOfStartTagSelfClosing);
+  const child = Array.isArray(children)
+    ? children.length < 2
+      ? children[0]
+      : null
+    : children;
+  if (
+    typeof child !== 'function' &&
+    typeof child !== 'symbol' &&
+    child !== null &&
+    child !== undefined
+  ) {
+    // eslint-disable-next-line react-internal/safe-string-coercion
+    target.push(stringToChunk(escapeTextForBrowser('' + child)));
+  }
+  pushInnerHTML(target, innerHTML, children);
+  target.push(endTag1, stringToChunk('style'), endTag2);
   return null;
 }
 
@@ -1329,8 +1642,7 @@ function pushSelfClosing(
   target: Array<Chunk | PrecomputedChunk>,
   props: Object,
   tag: string,
-  responseState: ResponseState,
-): ReactNodeList {
+): null {
   target.push(startChunkForTag(tag));
 
   for (const propKey in props) {
@@ -1348,7 +1660,7 @@ function pushSelfClosing(
           );
         // eslint-disable-next-line-no-fallthrough
         default:
-          pushAttribute(target, responseState, propKey, propValue);
+          pushAttribute(target, propKey, propValue);
           break;
       }
     }
@@ -1361,7 +1673,6 @@ function pushSelfClosing(
 function pushStartMenuItem(
   target: Array<Chunk | PrecomputedChunk>,
   props: Object,
-  responseState: ResponseState,
 ): ReactNodeList {
   target.push(startChunkForTag('menuitem'));
 
@@ -1379,7 +1690,7 @@ function pushStartMenuItem(
           );
         // eslint-disable-next-line-no-fallthrough
         default:
-          pushAttribute(target, responseState, propKey, propValue);
+          pushAttribute(target, propKey, propValue);
           break;
       }
     }
@@ -1397,67 +1708,73 @@ function pushTitle(
   noscriptTagInScope: boolean,
 ): ReactNodeList {
   if (__DEV__) {
-    const children = props.children;
-    const childForValidation =
-      Array.isArray(children) && children.length < 2
-        ? children[0] || null
+    if (hasOwnProperty.call(props, 'children')) {
+      const children = props.children;
+
+      const child = Array.isArray(children)
+        ? children.length < 2
+          ? children[0]
+          : null
         : children;
-    if (Array.isArray(children) && children.length > 1) {
-      console.error(
-        'A title element received an array with more than 1 element as children. ' +
-          'In browsers title Elements can only have Text Nodes as children. If ' +
-          'the children being rendered output more than a single text node in aggregate the browser ' +
-          'will display markup and comments as text in the title and hydration will likely fail and ' +
-          'fall back to client rendering',
-      );
-    } else if (
-      childForValidation != null &&
-      childForValidation.$$typeof != null
-    ) {
-      console.error(
-        'A title element received a React element for children. ' +
-          'In the browser title Elements can only have Text Nodes as children. If ' +
-          'the children being rendered output more than a single text node in aggregate the browser ' +
-          'will display markup and comments as text in the title and hydration will likely fail and ' +
-          'fall back to client rendering',
-      );
-    } else if (
-      childForValidation != null &&
-      typeof childForValidation !== 'string' &&
-      typeof childForValidation !== 'number'
-    ) {
-      console.error(
-        'A title element received a value that was not a string or number for children. ' +
-          'In the browser title Elements can only have Text Nodes as children. If ' +
-          'the children being rendered output more than a single text node in aggregate the browser ' +
-          'will display markup and comments as text in the title and hydration will likely fail and ' +
-          'fall back to client rendering',
-      );
+
+      if (Array.isArray(children) && children.length > 1) {
+        console.error(
+          'React expects the `children` prop of <title> tags to be a string, number, or object with a novel `toString` method but found an Array with length %s instead.' +
+            ' Browsers treat all child Nodes of <title> tags as Text content and React expects to be able to convert `children` of <title> tags to a single string value' +
+            ' which is why Arrays of length greater than 1 are not supported. When using JSX it can be commong to combine text nodes and value nodes.' +
+            ' For example: <title>hello {nameOfUser}</title>. While not immediately apparent, `children` in this case is an Array with length 2. If your `children` prop' +
+            ' is using this form try rewriting it using a template string: <title>{`hello ${nameOfUser}`}</title>.',
+          children.length,
+        );
+      } else if (typeof child === 'function' || typeof child === 'symbol') {
+        const childType =
+          typeof child === 'function' ? 'a Function' : 'a Sybmol';
+        console.error(
+          'React expect children of <title> tags to be a string, number, or object with a novel `toString` method but found %s instead.' +
+            ' Browsers treat all child Nodes of <title> tags as Text content and React expects to be able to convert children of <title>' +
+            ' tags to a single string value.',
+          childType,
+        );
+      } else if (child && child.toString === {}.toString) {
+        if (child.$$typeof != null) {
+          console.error(
+            'React expects the `children` prop of <title> tags to be a string, number, or object with a novel `toString` method but found an object that appears to be' +
+              ' a React element which never implements a suitable `toString` method. Browsers treat all child Nodes of <title> tags as Text content and React expects to' +
+              ' be able to convert children of <title> tags to a single string value which is why rendering React elements is not supported. If the `children` of <title> is' +
+              ' a React Component try moving the <title> tag into that component. If the `children` of <title> is some HTML markup change it to be Text only to be valid HTML.',
+          );
+        } else {
+          console.error(
+            'React expects the `children` prop of <title> tags to be a string, number, or object with a novel `toString` method but found an object that does not implement' +
+              ' a suitable `toString` method. Browsers treat all child Nodes of <title> tags as Text content and React expects to be able to convert children of <title> tags' +
+              ' to a single string value. Using the default `toString` method available on every object is almost certainly an error. Consider whether the `children` of this <title>' +
+              ' is an object in error and change it to a string or number value if so. Otherwise implement a `toString` method that React can use to produce a valid <title>.',
+          );
+        }
+      }
     }
   }
 
-  if (
-    enableFloat &&
-    // title is valid in SVG so we avoid resour
-    insertionMode !== SVG_MODE &&
-    !noscriptTagInScope &&
-    resourcesFromElement('title', props)
-  ) {
-    // We have converted this link exclusively to a resource and no longer
-    // need to emit it
-    return null;
+  if (enableFloat) {
+    if (insertionMode !== SVG_MODE && !noscriptTagInScope) {
+      pushTitleImpl(responseState.hoistableChunks, props);
+      return null;
+    } else {
+      return pushTitleImpl(target, props);
+    }
+  } else {
+    return pushTitleImpl(target, props);
   }
-  return pushTitleImpl(target, props, responseState);
 }
 
 function pushTitleImpl(
   target: Array<Chunk | PrecomputedChunk>,
   props: Object,
-  responseState: ResponseState,
 ): null {
   target.push(startChunkForTag('title'));
 
   let children = null;
+  let innerHTML = null;
   for (const propKey in props) {
     if (hasOwnProperty.call(props, propKey)) {
       const propValue = props[propKey];
@@ -1469,12 +1786,10 @@ function pushTitleImpl(
           children = propValue;
           break;
         case 'dangerouslySetInnerHTML':
-          throw new Error(
-            '`dangerouslySetInnerHTML` does not make sense on <title>.',
-          );
-        // eslint-disable-next-line-no-fallthrough
+          innerHTML = propValue;
+          break;
         default:
-          pushAttribute(target, responseState, propKey, propValue);
+          pushAttribute(target, propKey, propValue);
           break;
       }
     }
@@ -1495,6 +1810,7 @@ function pushTitleImpl(
     // eslint-disable-next-line react-internal/safe-string-coercion
     target.push(stringToChunk(escapeTextForBrowser('' + child)));
   }
+  pushInnerHTML(target, innerHTML, children);
   target.push(endTag1, stringToChunk('title'), endTag2);
   return null;
 }
@@ -1502,7 +1818,6 @@ function pushTitleImpl(
 function pushStartTitle(
   target: Array<Chunk | PrecomputedChunk>,
   props: Object,
-  responseState: ResponseState,
 ): ReactNodeList {
   target.push(startChunkForTag('title'));
 
@@ -1523,7 +1838,7 @@ function pushStartTitle(
           );
         // eslint-disable-next-line-no-fallthrough
         default:
-          pushAttribute(target, responseState, propKey, propValue);
+          pushAttribute(target, propKey, propValue);
           break;
       }
     }
@@ -1574,62 +1889,195 @@ function pushStartTitle(
 
 function pushStartHead(
   target: Array<Chunk | PrecomputedChunk>,
-  preamble: Array<Chunk | PrecomputedChunk>,
   props: Object,
-  tag: string,
   responseState: ResponseState,
+  insertionMode: InsertionMode,
 ): ReactNodeList {
-  return pushStartGenericElement(
-    enableFloat ? preamble : target,
-    props,
-    tag,
-    responseState,
-  );
+  if (enableFloat) {
+    if (insertionMode < HTML_MODE && responseState.headChunks === null) {
+      // This <head> is the Document.head and should be part of the preamble
+      responseState.headChunks = [];
+      return pushStartGenericElement(responseState.headChunks, props, 'head');
+    } else {
+      // This <head> is deep and is likely just an error. we emit it inline though.
+      // Validation should warn that this tag is the the wrong spot.
+      return pushStartGenericElement(target, props, 'head');
+    }
+  } else {
+    return pushStartGenericElement(target, props, 'head');
+  }
 }
 
 function pushStartHtml(
   target: Array<Chunk | PrecomputedChunk>,
-  preamble: Array<Chunk | PrecomputedChunk>,
   props: Object,
-  tag: string,
   responseState: ResponseState,
-  formatContext: FormatContext,
+  insertionMode: InsertionMode,
 ): ReactNodeList {
-  target = enableFloat ? preamble : target;
-  if (formatContext.insertionMode === ROOT_HTML_MODE) {
-    // If we're rendering the html tag and we're at the root (i.e. not in foreignObject)
-    // then we also emit the DOCTYPE as part of the root content as a convenience for
-    // rendering the whole document.
-    target.push(DOCTYPE);
+  if (enableFloat) {
+    if (insertionMode === ROOT_HTML_MODE && responseState.htmlChunks === null) {
+      // This <html> is the Document.documentElement and should be part of the preamble
+      responseState.htmlChunks = [DOCTYPE];
+      return pushStartGenericElement(responseState.htmlChunks, props, 'html');
+    } else {
+      // This <html> is deep and is likely just an error. we emit it inline though.
+      // Validation should warn that this tag is the the wrong spot.
+      return pushStartGenericElement(target, props, 'html');
+    }
+  } else {
+    if (insertionMode === ROOT_HTML_MODE) {
+      // If we're rendering the html tag and we're at the root (i.e. not in foreignObject)
+      // then we also emit the DOCTYPE as part of the root content as a convenience for
+      // rendering the whole document.
+      target.push(DOCTYPE);
+    }
+    return pushStartGenericElement(target, props, 'html');
   }
-  return pushStartGenericElement(target, props, tag, responseState);
 }
 
 function pushScript(
   target: Array<Chunk | PrecomputedChunk>,
   props: Object,
-  responseState: ResponseState,
+  resources: Resources,
   textEmbedded: boolean,
+  insertionMode: InsertionMode,
   noscriptTagInScope: boolean,
 ): null {
-  if (enableFloat && !noscriptTagInScope && resourcesFromScript(props)) {
+  if (enableFloat) {
+    if (
+      insertionMode === SVG_MODE ||
+      noscriptTagInScope ||
+      typeof props.src !== 'string' ||
+      !props.src
+    ) {
+      // This script will not be a resource nor can it be preloaded, we bailout early
+      // and emit it in place.
+      return pushScriptImpl(target, props);
+    }
+
+    const src = props.src;
+    const key = getResourceKey('script', src);
+    if (props.async !== true || props.onLoad || props.onError) {
+      // We can't resourcify scripts with load listeners. To avoid ambiguity with
+      // other Resourcified async scripts on the server we omit them from the server
+      // stream and expect them to be inserted during hydration on the client.
+      // We can still preload them however so the client can start fetching the script
+      // as soon as possible
+      let resource = resources.preloadsMap.get(key);
+      if (!resource) {
+        resource = {
+          type: 'preload',
+          chunks: [],
+          state: NoState,
+          props: preloadAsScriptPropsFromProps(props.src, props),
+        };
+        resources.preloadsMap.set(key, resource);
+        if (__DEV__) {
+          markAsImplicitResourceDEV(resource, props, resource.props);
+        }
+        resources.usedScripts.add(resource);
+        pushLinkImpl(resource.chunks, resource.props);
+      }
+
+      if (props.async !== true) {
+        // This is not an async script, we can preloaded it but it still needs to
+        // be emitted in place since it needs to hydrate on the client
+        pushScriptImpl(target, props);
+        return null;
+      }
+    } else {
+      // We can make this <script> into a ScriptResource
+      let resource = resources.scriptsMap.get(key);
+      if (__DEV__) {
+        const devResource = getAsResourceDEV(resource);
+        if (devResource) {
+          switch (devResource.__provenance) {
+            case 'rendered': {
+              const differenceDescription = describeDifferencesForScripts(
+                // Diff the props from the JSX element, not the derived resource props
+                props,
+                devResource.__originalProps,
+              );
+              if (differenceDescription) {
+                console.error(
+                  'React encountered a <script async={true} src="%s" .../> that has props that conflict' +
+                    ' with another hoistable script with the same `src`. When rendering hoistable scripts (async scripts without any loading handlers)' +
+                    ' the props from the first encountered instance will be used and props from later instances will be ignored.' +
+                    ' Update the props on both <script async={true} .../> instance so they agree.%s',
+                  src,
+                  differenceDescription,
+                );
+              }
+              break;
+            }
+            case 'preinit': {
+              const differenceDescription =
+                describeDifferencesForScriptOverPreinit(
+                  // Diff the props from the JSX element, not the derived resource props
+                  props,
+                  devResource.__propsEquivalent,
+                );
+              if (differenceDescription) {
+                console.error(
+                  'React encountered a <script async={true} src="%s" .../> with props that conflict' +
+                    ' with the options provided to `ReactDOM.preinit("%s", { as: "script", ... })`. React will use the first props or preinitialization' +
+                    ' options encountered when rendering a hoistable script with a particular `src` and will ignore any newer props or' +
+                    ' options. The first instance of this script resource was created using the `ReactDOM.preinit()` function.' +
+                    ' Please note, `ReactDOM.preinit()` is modeled off of module import assertions capabilities and does not support' +
+                    ' arbitrary props. If you need to have props not included with the preinit options you will need to rely on rendering' +
+                    ' <script> tags only.%s',
+                  src,
+                  src,
+                  differenceDescription,
+                );
+              }
+              break;
+            }
+          }
+        }
+      }
+      if (!resource) {
+        resource = {
+          type: 'script',
+          chunks: [],
+          state: NoState,
+          props: null,
+        };
+        resources.scriptsMap.set(key, resource);
+        if (__DEV__) {
+          markAsRenderedResourceDEV(resource, props);
+        }
+        // Add to the script flushing queue
+        resources.scripts.add(resource);
+
+        let scriptProps = props;
+        const preloadResource = resources.preloadsMap.get(key);
+        if (preloadResource) {
+          // If we already had a preload we don't want that resource to flush directly.
+          // We let the newly created resource govern flushing.
+          preloadResource.state |= Blocked;
+          scriptProps = {...props};
+          adoptPreloadPropsForScriptProps(scriptProps, preloadResource.props);
+        }
+        // encode the tag as Chunks
+        pushScriptImpl(resource.chunks, scriptProps);
+      }
+    }
+
     if (textEmbedded) {
-      // This link follows text but we aren't writing a tag. while not as efficient as possible we need
+      // This script follows text but we aren't writing a tag. while not as efficient as possible we need
       // to be safe and assume text will follow by inserting a textSeparator
       target.push(textSeparator);
     }
-    // We have converted this link exclusively to a resource and no longer
-    // need to emit it
     return null;
+  } else {
+    return pushScriptImpl(target, props);
   }
-
-  return pushScriptImpl(target, props, responseState);
 }
 
 function pushScriptImpl(
   target: Array<Chunk | PrecomputedChunk>,
   props: Object,
-  responseState: ResponseState,
 ): null {
   target.push(startChunkForTag('script'));
 
@@ -1649,7 +2097,7 @@ function pushScriptImpl(
           innerHTML = propValue;
           break;
         default:
-          pushAttribute(target, responseState, propKey, propValue);
+          pushAttribute(target, propKey, propValue);
           break;
       }
     }
@@ -1684,7 +2132,6 @@ function pushStartGenericElement(
   target: Array<Chunk | PrecomputedChunk>,
   props: Object,
   tag: string,
-  responseState: ResponseState,
 ): ReactNodeList {
   target.push(startChunkForTag(tag));
 
@@ -1704,7 +2151,7 @@ function pushStartGenericElement(
           innerHTML = propValue;
           break;
         default:
-          pushAttribute(target, responseState, propKey, propValue);
+          pushAttribute(target, propKey, propValue);
           break;
       }
     }
@@ -1725,7 +2172,6 @@ function pushStartCustomElement(
   target: Array<Chunk | PrecomputedChunk>,
   props: Object,
   tag: string,
-  responseState: ResponseState,
 ): ReactNodeList {
   target.push(startChunkForTag(tag));
 
@@ -1765,7 +2211,7 @@ function pushStartCustomElement(
           innerHTML = propValue;
           break;
         case 'style':
-          pushStyle(target, responseState, propValue);
+          pushStyleAttribute(target, propValue);
           break;
         case 'suppressContentEditableWarning':
         case 'suppressHydrationWarning':
@@ -1801,7 +2247,6 @@ function pushStartPreformattedElement(
   target: Array<Chunk | PrecomputedChunk>,
   props: Object,
   tag: string,
-  responseState: ResponseState,
 ): ReactNodeList {
   target.push(startChunkForTag(tag));
 
@@ -1821,7 +2266,7 @@ function pushStartPreformattedElement(
           innerHTML = propValue;
           break;
         default:
-          pushAttribute(target, responseState, propKey, propValue);
+          pushAttribute(target, propKey, propValue);
           break;
       }
     }
@@ -1896,9 +2341,9 @@ const DOCTYPE: PrecomputedChunk = stringToPrecomputedChunk('<!DOCTYPE html>');
 
 export function pushStartInstance(
   target: Array<Chunk | PrecomputedChunk>,
-  preamble: Array<Chunk | PrecomputedChunk>,
   type: string,
   props: Object,
+  resources: Resources,
   responseState: ResponseState,
   formatContext: FormatContext,
   textEmbedded: boolean,
@@ -1943,15 +2388,15 @@ export function pushStartInstance(
   switch (type) {
     // Special tags
     case 'select':
-      return pushStartSelect(target, props, responseState);
+      return pushStartSelect(target, props);
     case 'option':
-      return pushStartOption(target, props, responseState, formatContext);
+      return pushStartOption(target, props, formatContext);
     case 'textarea':
-      return pushStartTextArea(target, props, responseState);
+      return pushStartTextArea(target, props);
     case 'input':
-      return pushInput(target, props, responseState);
+      return pushInput(target, props);
     case 'menuitem':
-      return pushStartMenuItem(target, props, responseState);
+      return pushStartMenuItem(target, props);
     case 'title':
       return enableFloat
         ? pushTitle(
@@ -1961,13 +2406,15 @@ export function pushStartInstance(
             formatContext.insertionMode,
             formatContext.noscriptTagInScope,
           )
-        : pushStartTitle(target, props, responseState);
+        : pushStartTitle(target, props);
     case 'link':
       return pushLink(
         target,
         props,
         responseState,
+        resources,
         textEmbedded,
+        formatContext.insertionMode,
         formatContext.noscriptTagInScope,
       );
     case 'script':
@@ -1975,33 +2422,37 @@ export function pushStartInstance(
         ? pushScript(
             target,
             props,
-            responseState,
+            resources,
             textEmbedded,
+            formatContext.insertionMode,
             formatContext.noscriptTagInScope,
           )
-        : pushStartGenericElement(target, props, type, responseState);
-    case 'meta':
-      return pushMeta(
+        : pushStartGenericElement(target, props, type);
+    case 'style':
+      return pushStyle(
         target,
         props,
-        responseState,
+        resources,
         textEmbedded,
+        formatContext.insertionMode,
         formatContext.noscriptTagInScope,
       );
-    case 'base':
-      return pushBase(
+    case 'meta':
+      return pushMeta(
         target,
         props,
         responseState,
         textEmbedded,
+        formatContext.insertionMode,
         formatContext.noscriptTagInScope,
       );
     // Newline eating tags
     case 'listing':
     case 'pre': {
-      return pushStartPreformattedElement(target, props, type, responseState);
+      return pushStartPreformattedElement(target, props, type);
     }
     // Omitted close tags
+    case 'base':
     case 'area':
     case 'br':
     case 'col':
@@ -2013,7 +2464,7 @@ export function pushStartInstance(
     case 'source':
     case 'track':
     case 'wbr': {
-      return pushSelfClosing(target, props, type, responseState);
+      return pushSelfClosing(target, props, type);
     }
     // These are reserved SVG and MathML elements, that are never custom elements.
     // https://w3c.github.io/webcomponents/spec/custom/#custom-elements-core-concepts
@@ -2025,28 +2476,31 @@ export function pushStartInstance(
     case 'font-face-format':
     case 'font-face-name':
     case 'missing-glyph': {
-      return pushStartGenericElement(target, props, type, responseState);
+      return pushStartGenericElement(target, props, type);
     }
     // Preamble start tags
     case 'head':
-      return pushStartHead(target, preamble, props, type, responseState);
+      return pushStartHead(
+        target,
+        props,
+        responseState,
+        formatContext.insertionMode,
+      );
     case 'html': {
       return pushStartHtml(
         target,
-        preamble,
         props,
-        type,
         responseState,
-        formatContext,
+        formatContext.insertionMode,
       );
     }
     default: {
       if (type.indexOf('-') === -1 && typeof props.is !== 'string') {
         // Generic element
-        return pushStartGenericElement(target, props, type, responseState);
+        return pushStartGenericElement(target, props, type);
       } else {
         // Custom element
-        return pushStartCustomElement(target, props, type, responseState);
+        return pushStartCustomElement(target, props, type);
       }
     }
   }
@@ -2057,15 +2511,17 @@ const endTag2 = stringToPrecomputedChunk('>');
 
 export function pushEndInstance(
   target: Array<Chunk | PrecomputedChunk>,
-  postamble: Array<Chunk | PrecomputedChunk>,
   type: string,
   props: Object,
+  responseState: ResponseState,
+  formatContext: FormatContext,
 ): void {
   switch (type) {
     // When float is on we expect title and script tags to always be pushed in
     // a unit and never return children. when we end up pushing the end tag we
     // want to ensure there is no extra closing tag pushed
     case 'title':
+    case 'style':
     case 'script': {
       if (!enableFloat) {
         break;
@@ -2094,16 +2550,19 @@ export function pushEndInstance(
       return;
     }
     // Postamble end tags
+    // When float is enabled we omit the end tags for body and html when
+    // they represent the Document.body and Document.documentElement Nodes.
+    // This is so we can withhold them until the postamble when we know
+    // we won't emit any more tags
     case 'body': {
-      if (enableFloat) {
-        postamble.unshift(endTag1, stringToChunk(type), endTag2);
+      if (enableFloat && formatContext.insertionMode <= HTML_HTML_MODE) {
+        responseState.hasBody = true;
         return;
       }
       break;
     }
     case 'html':
-      if (enableFloat) {
-        postamble.push(endTag1, stringToChunk(type), endTag2);
+      if (enableFloat && formatContext.insertionMode === ROOT_HTML_MODE) {
         return;
       }
       break;
@@ -2316,6 +2775,7 @@ export function writeStartSegment(
 ): boolean {
   switch (formatContext.insertionMode) {
     case ROOT_HTML_MODE:
+    case HTML_HTML_MODE:
     case HTML_MODE: {
       writeChunk(destination, startSegmentHTML);
       writeChunk(destination, responseState.segmentPrefix);
@@ -2373,6 +2833,7 @@ export function writeEndSegment(
 ): boolean {
   switch (formatContext.insertionMode) {
     case ROOT_HTML_MODE:
+    case HTML_HTML_MODE:
     case HTML_MODE: {
       return writeChunkAndReturn(destination, endSegmentHTML);
     }
@@ -2423,9 +2884,12 @@ export function writeCompletedSegmentInstruction(
     responseState.streamingFormat === ScriptStreamingFormat;
   if (scriptFormat) {
     writeChunk(destination, responseState.startInlineScript);
-    if (!responseState.sentCompleteSegmentFunction) {
+    if (
+      (responseState.instructions & SentCompleteSegmentFunction) ===
+      NothingSent
+    ) {
       // The first time we write this, we'll need to include the full implementation.
-      responseState.sentCompleteSegmentFunction = true;
+      responseState.instructions |= SentCompleteSegmentFunction;
       writeChunk(destination, completeSegmentScript1Full);
     } else {
       // Future calls can just reuse the same function.
@@ -2455,15 +2919,15 @@ export function writeCompletedSegmentInstruction(
 }
 
 const completeBoundaryScript1Full = stringToPrecomputedChunk(
-  completeBoundaryFunction + ';$RC("',
+  completeBoundaryFunction + '$RC("',
 );
 const completeBoundaryScript1Partial = stringToPrecomputedChunk('$RC("');
 
 const completeBoundaryWithStylesScript1FullBoth = stringToPrecomputedChunk(
-  completeBoundaryFunction + ';' + styleInsertionFunction + ';$RR("',
+  completeBoundaryFunction + styleInsertionFunction + '$RR("',
 );
 const completeBoundaryWithStylesScript1FullPartial = stringToPrecomputedChunk(
-  styleInsertionFunction + ';$RR("',
+  styleInsertionFunction + '$RR("',
 );
 const completeBoundaryWithStylesScript1Partial =
   stringToPrecomputedChunk('$RR("');
@@ -2499,22 +2963,31 @@ export function writeCompletedBoundaryInstruction(
   if (scriptFormat) {
     writeChunk(destination, responseState.startInlineScript);
     if (enableFloat && hasStyleDependencies) {
-      if (!responseState.sentCompleteBoundaryFunction) {
-        responseState.sentCompleteBoundaryFunction = true;
-        responseState.sentStyleInsertionFunction = true;
+      if (
+        (responseState.instructions & SentCompleteBoundaryFunction) ===
+        NothingSent
+      ) {
+        responseState.instructions |=
+          SentStyleInsertionFunction | SentCompleteBoundaryFunction;
         writeChunk(
           destination,
           clonePrecomputedChunk(completeBoundaryWithStylesScript1FullBoth),
         );
-      } else if (!responseState.sentStyleInsertionFunction) {
-        responseState.sentStyleInsertionFunction = true;
+      } else if (
+        (responseState.instructions & SentStyleInsertionFunction) ===
+        NothingSent
+      ) {
+        responseState.instructions |= SentStyleInsertionFunction;
         writeChunk(destination, completeBoundaryWithStylesScript1FullPartial);
       } else {
         writeChunk(destination, completeBoundaryWithStylesScript1Partial);
       }
     } else {
-      if (!responseState.sentCompleteBoundaryFunction) {
-        responseState.sentCompleteBoundaryFunction = true;
+      if (
+        (responseState.instructions & SentCompleteBoundaryFunction) ===
+        NothingSent
+      ) {
+        responseState.instructions |= SentCompleteBoundaryFunction;
         writeChunk(destination, completeBoundaryScript1Full);
       } else {
         writeChunk(destination, completeBoundaryScript1Partial);
@@ -2599,9 +3072,12 @@ export function writeClientRenderBoundaryInstruction(
     responseState.streamingFormat === ScriptStreamingFormat;
   if (scriptFormat) {
     writeChunk(destination, responseState.startInlineScript);
-    if (!responseState.sentClientRenderFunction) {
+    if (
+      (responseState.instructions & SentClientRenderFunction) ===
+      NothingSent
+    ) {
       // The first time we write this, we'll need to include the full implementation.
-      responseState.sentClientRenderFunction = true;
+      responseState.instructions |= SentClientRenderFunction;
       writeChunk(destination, clientRenderScript1Full);
     } else {
       // Future calls can just reuse the same function.
@@ -2736,18 +3212,210 @@ function escapeJSObjectForInstructionScripts(input: Object): string {
   });
 }
 
+const styleTagTemplateOpen = stringToPrecomputedChunk(
+  '<template data-precedence="">',
+);
+const styleTagTemplateClose = stringToPrecomputedChunk('</template>');
+
+// Tracks whether we wrote any late style tags. We use this to determine
+// whether we need to emit a closing template tag after flushing late style tags
+let didWrite = false;
+
+function flushStyleTagsLateForBoundary(
+  this: Destination,
+  resource: StyleResource,
+) {
+  if (resource.type === 'style' && (resource.state & Flushed) === NoState) {
+    if (didWrite === false) {
+      // we are going to write so we need to emit the open tag
+      didWrite = true;
+      writeChunk(this, styleTagTemplateOpen);
+    }
+    // This <style> tag can be flushed now
+    const chunks = resource.chunks;
+    for (let i = 0; i < chunks.length; i++) {
+      writeChunk(this, chunks[i]);
+    }
+    resource.state |= FlushedLate;
+  }
+}
+
+export function writeResourcesForBoundary(
+  destination: Destination,
+  boundaryResources: BoundaryResources,
+): boolean {
+  didWrite = false;
+  boundaryResources.forEach(flushStyleTagsLateForBoundary, destination);
+  if (didWrite) {
+    return writeChunkAndReturn(destination, styleTagTemplateClose);
+  } else {
+    return true;
+  }
+}
+
 const precedencePlaceholderStart = stringToPrecomputedChunk(
   '<style data-precedence="',
 );
 const precedencePlaceholderEnd = stringToPrecomputedChunk('"></style>');
 
-export function writeInitialResources(
+function flushResourceInPreamble<T: Resource>(this: Destination, resource: T) {
+  if ((resource.state & (Flushed | Blocked)) === NoState) {
+    const chunks = resource.chunks;
+    for (let i = 0; i < chunks.length; i++) {
+      writeChunk(this, chunks[i]);
+    }
+    resource.state |= FlushedInPreamble;
+  }
+}
+
+function flushResourceLate<T: Resource>(this: Destination, resource: T) {
+  if ((resource.state & Flushed) === NoState) {
+    const chunks = resource.chunks;
+    for (let i = 0; i < chunks.length; i++) {
+      writeChunk(this, chunks[i]);
+    }
+    resource.state |= FlushedLate;
+  }
+}
+
+let didFlush = false;
+
+function flushUnblockedStyle(
+  this: Destination,
+  resource: StyleResource,
+  key: mixed,
+  set: Set<StyleResource>,
+) {
+  const chunks = resource.chunks;
+  if (resource.state & Flushed) {
+    // In theory this should never happen because we clear from the
+    // Set on flush but to ensure correct semantics we don't emit
+    // anything if we are in this state.
+    set.delete(resource);
+  } else if (resource.state & Blocked) {
+    // We can't flush but we can preload. We will do this in a second pass
+  } else {
+    didFlush = true;
+    // We can emit this style or stylesheet as is.
+
+    if (resource.type === 'stylesheet') {
+      // We still need to encode stylesheet chunks
+      // because unlike most Hoistables and Resources we do not eagerly encode
+      // them during render. This is because if we flush late we have to send a
+      // different encoding and we don't want to encode multiple times
+      pushLinkImpl(chunks, resource.props);
+    }
+    for (let i = 0; i < chunks.length; i++) {
+      writeChunk(this, chunks[i]);
+    }
+    resource.state |= FlushedInPreamble;
+    set.delete(resource);
+  }
+}
+
+function flushUnblockedStyles(
+  this: Destination,
+  set: Set<StyleResource>,
+  precedence: string,
+) {
+  didFlush = false;
+  set.forEach(flushUnblockedStyle, this);
+  if (!didFlush) {
+    // if we did not flush anything for this precedence slot we emit
+    // an empty <style data-precedence="..." /> tag to ensure the
+    // precedence remains in the correct order
+    writeChunk(this, precedencePlaceholderStart);
+    writeChunk(this, stringToChunk(escapeTextForBrowser(precedence)));
+    writeChunk(this, precedencePlaceholderEnd);
+  }
+}
+
+function preloadBlockedStyle(this: Destination, resource: StyleResource) {
+  // The only Resources that should remain are Blocked resources
+  if (__DEV__) {
+    if ((resource.state & Blocked) === NoState) {
+      console.error(
+        'React encountered a Stylesheet Resource that was not Blocked when it was expected to be. This is a bug in React.',
+      );
+    } else if (resource.state & PreloadFlushed) {
+      console.error(
+        'React encountered a Stylesheet Resource that already flushed a Preload when it was not expected to. This is a bug in React.',
+      );
+    }
+  }
+  if (resource.type === 'style') {
+    // <style> tags do not need to be preloaded
+    return;
+  }
+  const chunks = resource.chunks;
+  const preloadProps = preloadAsStylePropsFromProps(
+    resource.props.href,
+    resource.props,
+  );
+  pushLinkImpl(chunks, preloadProps);
+  for (let i = 0; i < chunks.length; i++) {
+    writeChunk(this, chunks[i]);
+  }
+  resource.state |= PreloadFlushed;
+  chunks.length = 0;
+}
+
+function preloadBlockedStyles(
+  this: Destination,
+  set: Set<StyleResource>,
+  precedence: string,
+) {
+  set.forEach(preloadBlockedStyle, this);
+  set.clear();
+}
+
+function preloadLateStyle(this: Destination, resource: StyleResource) {
+  if (__DEV__) {
+    if (resource.state & PreloadFlushed) {
+      console.error(
+        'React encountered a Stylesheet Resource that already flushed a Preload when it was not expected to. This is a bug in React.',
+      );
+    }
+  }
+
+  if (resource.type === 'style') {
+    // <style> tags do not need to be preloaded
+    return;
+  }
+
+  const chunks = resource.chunks;
+  const preloadProps = preloadAsStylePropsFromProps(
+    resource.props.href,
+    resource.props,
+  );
+  pushLinkImpl(chunks, preloadProps);
+  for (let i = 0; i < chunks.length; i++) {
+    writeChunk(this, chunks[i]);
+  }
+  resource.state |= PreloadFlushed;
+  chunks.length = 0;
+}
+
+function preloadLateStyles(
+  this: Destination,
+  set: Set<StyleResource>,
+  precedence: string,
+) {
+  set.forEach(preloadLateStyle, this);
+  set.clear();
+}
+
+// We don't bother reporting backpressure at the moment because we expect to
+// flush the entire preamble in a single pass. This probably should be modified
+// in the future to be backpressure sensitive but that requires a larger refactor
+// of the flushing code in Fizz.
+export function writePreamble(
   destination: Destination,
   resources: Resources,
   responseState: ResponseState,
   willFlushAllSegments: boolean,
-): boolean {
-  // Write initially discovered resources after the shell completes
+): void {
+  // This function must be called exactly once on every request
   if (
     enableFizzExternalRuntime &&
     !willFlushAllSegments &&
@@ -2761,222 +3429,209 @@ export function writeInitialResources(
     const {src, integrity} = responseState.externalRuntimeConfig;
     preinitImpl(resources, src, {as: 'script', integrity});
   }
-  // $FlowFixMe[missing-local-annot]
-  function flushLinkResource(resource) {
-    if (!resource.flushed) {
-      pushLinkImpl(target, resource.props, responseState);
-      resource.flushed = true;
+
+  const htmlChunks = responseState.htmlChunks;
+  const headChunks = responseState.headChunks;
+
+  let i = 0;
+
+  // Emit open tags before Hoistables and Resources
+  if (htmlChunks) {
+    // We have an <html> to emit as part of the preamble
+    for (i = 0; i < htmlChunks.length; i++) {
+      writeChunk(destination, htmlChunks[i]);
+    }
+    if (headChunks) {
+      for (i = 0; i < headChunks.length; i++) {
+        writeChunk(destination, headChunks[i]);
+      }
+    } else {
+      // We did not render a head but we emitted an <html> so we emit one now
+      writeChunk(destination, startChunkForTag('head'));
+      writeChunk(destination, endOfStartTag);
+    }
+  } else if (headChunks) {
+    // We do not have an <html> but we do have a <head>
+    for (i = 0; i < headChunks.length; i++) {
+      writeChunk(destination, headChunks[i]);
     }
   }
 
-  const target: Array<Chunk | PrecomputedChunk> = [];
-
-  const {
-    charset,
-    bases,
-    preconnects,
-    fontPreloads,
-    precedences,
-    usedStylePreloads,
-    scripts,
-    usedScriptPreloads,
-    explicitStylePreloads,
-    explicitScriptPreloads,
-    headResources,
-  } = resources;
+  // Emit high priority Hoistables
+  const charsetChunks = responseState.charsetChunks;
+  for (i = 0; i < charsetChunks.length; i++) {
+    writeChunk(destination, charsetChunks[i]);
+  }
+  charsetChunks.length = 0;
 
-  if (charset) {
-    pushSelfClosing(target, charset.props, 'meta', responseState);
-    charset.flushed = true;
-    resources.charset = null;
+  const preconnectChunks = responseState.preconnectChunks;
+  for (i = 0; i < preconnectChunks.length; i++) {
+    writeChunk(destination, preconnectChunks[i]);
   }
+  preconnectChunks.length = 0;
 
-  bases.forEach(r => {
-    pushSelfClosing(target, r.props, 'base', responseState);
-    r.flushed = true;
-  });
-  bases.clear();
+  resources.fontPreloads.forEach(flushResourceInPreamble, destination);
+  resources.fontPreloads.clear();
 
-  preconnects.forEach(r => {
-    // font preload Resources should not already be flushed so we elide this check
-    pushLinkImpl(target, r.props, responseState);
-    r.flushed = true;
-  });
-  preconnects.clear();
+  // Flush unblocked stylesheets by precedence
+  resources.precedences.forEach(flushUnblockedStyles, destination);
 
-  fontPreloads.forEach(r => {
-    // font preload Resources should not already be flushed so we elide this check
-    pushLinkImpl(target, r.props, responseState);
-    r.flushed = true;
-  });
-  fontPreloads.clear();
-
-  // Flush stylesheets first by earliest precedence
-  precedences.forEach((p, precedence) => {
-    if (p.size) {
-      p.forEach(r => {
-        // resources should not already be flushed so we elide this check
-        pushLinkImpl(target, r.props, responseState);
-        r.flushed = true;
-        r.inShell = true;
-        r.hint.flushed = true;
-      });
-      p.clear();
+  // Flush preloads for Blocked stylesheets
+  resources.precedences.forEach(preloadBlockedStyles, destination);
+
+  resources.usedStylesheets.forEach(resource => {
+    const key = getResourceKey(resource.props.as, resource.props.href);
+    if (resources.stylesMap.has(key)) {
+      // The underlying stylesheet is represented both as a used stylesheet
+      // (a regular component we will attempt to preload) and as a StylesheetResource.
+      // We don't want to emit two preloads for the same href so we defer
+      // the preload rules of the StylesheetResource when there is a conflict
     } else {
-      target.push(
-        precedencePlaceholderStart,
-        stringToChunk(escapeTextForBrowser(precedence)),
-        precedencePlaceholderEnd,
-      );
+      const chunks = resource.chunks;
+      for (i = 0; i < chunks.length; i++) {
+        writeChunk(destination, chunks[i]);
+      }
     }
   });
+  resources.usedStylesheets.clear();
 
-  usedStylePreloads.forEach(flushLinkResource);
-  usedStylePreloads.clear();
+  resources.scripts.forEach(flushResourceInPreamble, destination);
+  resources.scripts.clear();
 
-  scripts.forEach(r => {
-    // should never be flushed already
-    pushScriptImpl(target, r.props, responseState);
-    r.flushed = true;
-    r.hint.flushed = true;
-  });
-  scripts.clear();
+  resources.usedScripts.forEach(flushResourceInPreamble, destination);
+  resources.usedScripts.clear();
 
-  usedScriptPreloads.forEach(flushLinkResource);
-  usedScriptPreloads.clear();
+  resources.explicitStylesheetPreloads.forEach(
+    flushResourceInPreamble,
+    destination,
+  );
+  resources.explicitStylesheetPreloads.clear();
 
-  explicitStylePreloads.forEach(flushLinkResource);
-  explicitStylePreloads.clear();
+  resources.explicitScriptPreloads.forEach(
+    flushResourceInPreamble,
+    destination,
+  );
+  resources.explicitScriptPreloads.clear();
 
-  explicitScriptPreloads.forEach(flushLinkResource);
-  explicitScriptPreloads.clear();
+  resources.explicitOtherPreloads.forEach(flushResourceInPreamble, destination);
+  resources.explicitOtherPreloads.clear();
 
-  headResources.forEach(r => {
-    switch (r.type) {
-      case 'title': {
-        pushTitleImpl(target, r.props, responseState);
-        break;
-      }
-      case 'meta': {
-        pushSelfClosing(target, r.props, 'meta', responseState);
-        break;
-      }
-      case 'link': {
-        pushLinkImpl(target, r.props, responseState);
-        break;
-      }
-    }
-    r.flushed = true;
-  });
-  headResources.clear();
+  // Write embedding preloadChunks
+  const preloadChunks = responseState.preloadChunks;
+  for (i = 0; i < preloadChunks.length; i++) {
+    writeChunk(destination, preloadChunks[i]);
+  }
+  preloadChunks.length = 0;
 
-  let i;
-  let r = true;
-  for (i = 0; i < target.length - 1; i++) {
-    writeChunk(destination, target[i]);
+  // Write embedding hoistableChunks
+  const hoistableChunks = responseState.hoistableChunks;
+  for (i = 0; i < hoistableChunks.length; i++) {
+    writeChunk(destination, hoistableChunks[i]);
   }
-  if (i < target.length) {
-    r = writeChunkAndReturn(destination, target[i]);
+  hoistableChunks.length = 0;
+
+  // Flush closing head if necessary
+  if (htmlChunks && headChunks === null) {
+    // We have an <html> rendered but no <head> rendered. We however inserted
+    // a <head> up above so we need to emit the </head> now. This is safe because
+    // if the main content contained the </head> it would also have provided a
+    // <head>. This means that all the content inside <html> is either <body> or
+    // invalid HTML
+    writeChunk(destination, endTag1);
+    writeChunk(destination, stringToChunk('head'));
+    writeChunk(destination, endTag2);
   }
-  return r;
 }
 
-export function writeImmediateResources(
+// We don't bother reporting backpressure at the moment because we expect to
+// flush the entire preamble in a single pass. This probably should be modified
+// in the future to be backpressure sensitive but that requires a larger refactor
+// of the flushing code in Fizz.
+export function writeHoistables(
   destination: Destination,
   resources: Resources,
   responseState: ResponseState,
-): boolean {
-  // $FlowFixMe[missing-local-annot]
-  function flushLinkResource(resource) {
-    if (!resource.flushed) {
-      pushLinkImpl(target, resource.props, responseState);
-      resource.flushed = true;
-    }
-  }
-
-  const target: Array<Chunk | PrecomputedChunk> = [];
-
-  const {
-    charset,
-    preconnects,
-    fontPreloads,
-    usedStylePreloads,
-    scripts,
-    usedScriptPreloads,
-    explicitStylePreloads,
-    explicitScriptPreloads,
-    headResources,
-  } = resources;
-
-  if (charset) {
-    pushSelfClosing(target, charset.props, 'meta', responseState);
-    charset.flushed = true;
-    resources.charset = null;
-  }
-
-  preconnects.forEach(r => {
-    // font preload Resources should not already be flushed so we elide this check
-    pushLinkImpl(target, r.props, responseState);
-    r.flushed = true;
-  });
-  preconnects.clear();
+): void {
+  let i = 0;
 
-  fontPreloads.forEach(r => {
-    // font preload Resources should not already be flushed so we elide this check
-    pushLinkImpl(target, r.props, responseState);
-    r.flushed = true;
-  });
-  fontPreloads.clear();
+  // Emit high priority Hoistables
 
-  usedStylePreloads.forEach(flushLinkResource);
-  usedStylePreloads.clear();
+  // We omit charsetChunks because we have already sent the shell and if it wasn't
+  // already sent it is too late now.
 
-  scripts.forEach(r => {
-    // should never be flushed already
-    pushStartGenericElement(target, r.props, 'script', responseState);
-    pushEndInstance(target, target, 'script', r.props);
-    r.flushed = true;
-    r.hint.flushed = true;
+  const preconnectChunks = responseState.preconnectChunks;
+  for (i = 0; i < preconnectChunks.length; i++) {
+    writeChunk(destination, preconnectChunks[i]);
+  }
+  preconnectChunks.length = 0;
+
+  resources.fontPreloads.forEach(flushResourceLate, destination);
+  resources.fontPreloads.clear();
+
+  // Preload any stylesheets. these will emit in a render instruction that follows this
+  // but we want to kick off preloading as soon as possible
+  resources.precedences.forEach(preloadLateStyles, destination);
+
+  resources.usedStylesheets.forEach(resource => {
+    const key = getResourceKey(resource.props.as, resource.props.href);
+    if (resources.stylesMap.has(key)) {
+      // The underlying stylesheet is represented both as a used stylesheet
+      // (a regular component we will attempt to preload) and as a StylesheetResource.
+      // We don't want to emit two preloads for the same href so we defer
+      // the preload rules of the StylesheetResource when there is a conflict
+    } else {
+      const chunks = resource.chunks;
+      for (i = 0; i < chunks.length; i++) {
+        writeChunk(destination, chunks[i]);
+      }
+    }
   });
-  scripts.clear();
+  resources.usedStylesheets.clear();
 
-  usedScriptPreloads.forEach(flushLinkResource);
-  usedScriptPreloads.clear();
+  resources.scripts.forEach(flushResourceLate, destination);
+  resources.scripts.clear();
 
-  explicitStylePreloads.forEach(flushLinkResource);
-  explicitStylePreloads.clear();
+  resources.usedScripts.forEach(flushResourceLate, destination);
+  resources.usedScripts.clear();
 
-  explicitScriptPreloads.forEach(flushLinkResource);
-  explicitScriptPreloads.clear();
+  resources.explicitStylesheetPreloads.forEach(flushResourceLate, destination);
+  resources.explicitStylesheetPreloads.clear();
 
-  headResources.forEach(r => {
-    switch (r.type) {
-      case 'title': {
-        pushTitleImpl(target, r.props, responseState);
-        break;
-      }
-      case 'meta': {
-        pushSelfClosing(target, r.props, 'meta', responseState);
-        break;
-      }
-      case 'link': {
-        pushLinkImpl(target, r.props, responseState);
-        break;
-      }
-    }
-    r.flushed = true;
-  });
-  headResources.clear();
+  resources.explicitScriptPreloads.forEach(flushResourceLate, destination);
+  resources.explicitScriptPreloads.clear();
+
+  resources.explicitOtherPreloads.forEach(flushResourceLate, destination);
+  resources.explicitOtherPreloads.clear();
 
-  let i;
-  let r = true;
-  for (i = 0; i < target.length - 1; i++) {
-    writeChunk(destination, target[i]);
+  // Write embedding preloadChunks
+  const preloadChunks = responseState.preloadChunks;
+  for (i = 0; i < preloadChunks.length; i++) {
+    writeChunk(destination, preloadChunks[i]);
   }
-  if (i < target.length) {
-    r = writeChunkAndReturn(destination, target[i]);
+  preloadChunks.length = 0;
+
+  // Write embedding hoistableChunks
+  const hoistableChunks = responseState.hoistableChunks;
+  for (i = 0; i < hoistableChunks.length; i++) {
+    writeChunk(destination, hoistableChunks[i]);
+  }
+  hoistableChunks.length = 0;
+}
+
+export function writePostamble(
+  destination: Destination,
+  responseState: ResponseState,
+): void {
+  if (responseState.hasBody) {
+    writeChunk(destination, endTag1);
+    writeChunk(destination, stringToChunk('body'));
+    writeChunk(destination, endTag2);
+  }
+  if (responseState.htmlChunks) {
+    writeChunk(destination, endTag1);
+    writeChunk(destination, stringToChunk('html'));
+    writeChunk(destination, endTag2);
   }
-  return r;
 }
 
 function hasStyleResourceDependencies(
@@ -2991,7 +3646,7 @@ function hasStyleResourceDependencies(
 
     // If every style Resource flushed in the shell we do not need to send
     // any dependencies
-    if (!resource.inShell) {
+    if ((resource.state & FlushedInPreamble) === NoState) {
       return true;
     }
   }
@@ -3014,27 +3669,35 @@ function writeStyleResourceDependenciesInJS(
 
   let nextArrayOpenBrackChunk = arrayFirstOpenBracket;
   boundaryResources.forEach(resource => {
-    if (resource.inShell) {
+    if (resource.state & FlushedInPreamble) {
       // We can elide this dependency because it was flushed in the shell and
       // should be ready before content is shown on the client
-    } else if (resource.flushed) {
+    } else if (resource.state & Flushed) {
+      // We only need to emit the href because this resource flushed in an earlier
+      // boundary already which encoded the attributes necessary to construct
+      // the resource instance on the client.
       writeChunk(destination, nextArrayOpenBrackChunk);
-      writeStyleResourceDependencyHrefOnlyInJS(destination, resource.href);
+      writeStyleResourceDependencyHrefOnlyInJS(
+        destination,
+        resource.type === 'style'
+          ? resource.props['data-href']
+          : resource.props.href,
+      );
       writeChunk(destination, arrayCloseBracket);
       nextArrayOpenBrackChunk = arraySubsequentOpenBracket;
-    } else {
+    } else if (resource.type === 'stylesheet') {
+      // We need to emit the whole resource for insertion on the client
       writeChunk(destination, nextArrayOpenBrackChunk);
       writeStyleResourceDependencyInJS(
         destination,
-        resource.href,
-        resource.precedence,
+        resource.props.href,
+        resource.props['data-precedence'],
         resource.props,
       );
       writeChunk(destination, arrayCloseBracket);
       nextArrayOpenBrackChunk = arraySubsequentOpenBracket;
 
-      resource.flushed = true;
-      resource.hint.flushed = true;
+      resource.state |= FlushedLate;
     }
   });
   writeChunk(destination, arrayCloseBracket);
@@ -3203,27 +3866,35 @@ function writeStyleResourceDependenciesInAttr(
 
   let nextArrayOpenBrackChunk = arrayFirstOpenBracket;
   boundaryResources.forEach(resource => {
-    if (resource.inShell) {
+    if (resource.state & FlushedInPreamble) {
       // We can elide this dependency because it was flushed in the shell and
       // should be ready before content is shown on the client
-    } else if (resource.flushed) {
+    } else if (resource.state & Flushed) {
+      // We only need to emit the href because this resource flushed in an earlier
+      // boundary already which encoded the attributes necessary to construct
+      // the resource instance on the client.
       writeChunk(destination, nextArrayOpenBrackChunk);
-      writeStyleResourceDependencyHrefOnlyInAttr(destination, resource.href);
+      writeStyleResourceDependencyHrefOnlyInAttr(
+        destination,
+        resource.type === 'style'
+          ? resource.props['data-href']
+          : resource.props.href,
+      );
       writeChunk(destination, arrayCloseBracket);
       nextArrayOpenBrackChunk = arraySubsequentOpenBracket;
-    } else {
+    } else if (resource.type === 'stylesheet') {
+      // We need to emit the whole resource for insertion on the client
       writeChunk(destination, nextArrayOpenBrackChunk);
       writeStyleResourceDependencyInAttr(
         destination,
-        resource.href,
-        resource.precedence,
+        resource.props.href,
+        resource.props['data-precedence'],
         resource.props,
       );
       writeChunk(destination, arrayCloseBracket);
       nextArrayOpenBrackChunk = arraySubsequentOpenBracket;
 
-      resource.flushed = true;
-      resource.hint.flushed = true;
+      resource.state |= FlushedLate;
     }
   });
   writeChunk(destination, arrayCloseBracket);
@@ -3379,3 +4050,732 @@ function writeStyleResourceAttributeInAttr(
     stringToChunk(escapeTextForBrowser(JSON.stringify(attributeValue))),
   );
 }
+
+/**
+ * Resources
+ */
+
+type ResourceStateTag = number;
+const NoState /*            */ = 0b0000;
+// These tags indicate whether the Resource was flushed and in which phase
+const FlushedInPreamble /*  */ = 0b0001;
+const FlushedLate /*        */ = 0b0010;
+const Flushed /*            */ = 0b0011;
+// This tag indicates whether this Resource is blocked from flushing.
+// This currently is only used with stylesheets that are blocked by a Boundary
+const Blocked /*            */ = 0b0100;
+// This tag indicates whether this Resource has been preloaded.
+// This generally only makes sense for Resources other than PreloadResource
+const PreloadFlushed /*     */ = 0b1000;
+
+type TResource<T: 'stylesheet' | 'style' | 'script' | 'preload', P> = {
+  type: T,
+  chunks: Array<Chunk | PrecomputedChunk>,
+  state: ResourceStateTag,
+  props: P,
+};
+// Dev extensions.
+// Stylesheets and Scripts rendered with jsx
+type RenderedResourceDEV = {
+  __provenance: 'rendered',
+  __originalProps: any,
+};
+// Preloads, Stylesheets, and Scripts from ReactDOM.preload or ReactDOM.preinit
+type ImperativeResourceDEV = {
+  __provenance: 'preload' | 'preinit',
+  __originalHref: string,
+  __originalOptions: any,
+  __propsEquivalent: any,
+};
+// Preloads created for normal components we rendered but know we can preload early such as
+// sync Scripts and stylesheets without precedence or with onLoad/onError handlers
+type ImplicitResourceDEV = {
+  __provenance: 'implicit',
+  __underlyingProps: any,
+  __impliedProps: any,
+};
+type ResourceDEV =
+  | RenderedResourceDEV
+  | ImperativeResourceDEV
+  | ImplicitResourceDEV;
+
+type PreloadProps = {
+  rel: 'preload',
+  as: string,
+  href: string,
+  [string]: mixed,
+};
+type PreloadResource = TResource<'preload', PreloadProps>;
+
+type StylesheetProps = {
+  rel: 'stylesheet',
+  href: string,
+  'data-precedence': string,
+  [string]: mixed,
+};
+type StylesheetResource = TResource<'stylesheet', StylesheetProps>;
+
+type StyleTagProps = {
+  'data-href': string,
+  'data-precedence': string,
+  [string]: mixed,
+};
+type StyleTagResource = TResource<'style', StyleTagProps>;
+
+type StyleResource = StylesheetResource | StyleTagResource;
+
+type ScriptProps = {
+  async: true,
+  src: string,
+  [string]: mixed,
+};
+type ScriptResource = TResource<'script', null>;
+
+type Resource = StyleResource | ScriptResource | PreloadResource;
+
+export type Resources = {
+  // Request local cache
+  preloadsMap: Map<string, PreloadResource>,
+  stylesMap: Map<string, StyleResource>,
+  scriptsMap: Map<string, ScriptResource>,
+
+  // Flushing queues for Resource dependencies
+  fontPreloads: Set<PreloadResource>,
+  // usedImagePreloads: Set<PreloadResource>,
+  precedences: Map<string, Set<StyleResource>>,
+  usedStylesheets: Set<PreloadResource>,
+  scripts: Set<ScriptResource>,
+  usedScripts: Set<PreloadResource>,
+  explicitStylesheetPreloads: Set<PreloadResource>,
+  // explicitImagePreloads: Set<PreloadResource>,
+  explicitScriptPreloads: Set<PreloadResource>,
+  explicitOtherPreloads: Set<PreloadResource>,
+
+  // Module-global-like reference for current boundary resources
+  boundaryResources: ?BoundaryResources,
+  ...
+};
+
+// @TODO add bootstrap script to implicit preloads
+export function createResources(): Resources {
+  return {
+    // persistent
+    preloadsMap: new Map(),
+    stylesMap: new Map(),
+    scriptsMap: new Map(),
+
+    // cleared on flush
+    fontPreloads: new Set(),
+    // usedImagePreloads: new Set(),
+    precedences: new Map(),
+    usedStylesheets: new Set(),
+    scripts: new Set(),
+    usedScripts: new Set(),
+    explicitStylesheetPreloads: new Set(),
+    // explicitImagePreloads: new Set(),
+    explicitScriptPreloads: new Set(),
+    explicitOtherPreloads: new Set(),
+
+    // like a module global for currently rendering boundary
+    boundaryResources: null,
+  };
+}
+
+export type BoundaryResources = Set<StyleResource>;
+
+export function createBoundaryResources(): BoundaryResources {
+  return new Set();
+}
+
+export function setCurrentlyRenderingBoundaryResourcesTarget(
+  resources: Resources,
+  boundaryResources: null | BoundaryResources,
+) {
+  resources.boundaryResources = boundaryResources;
+}
+
+function getResourceKey(as: string, href: string): string {
+  return `[${as}]${href}`;
+}
+
+type PreloadAs = 'style' | 'font' | 'script';
+type PreloadOptions = {
+  as: PreloadAs,
+  crossOrigin?: string,
+  integrity?: string,
+  media?: string,
+};
+export function preload(href: string, options: PreloadOptions) {
+  if (!currentResources) {
+    // While we expect that preload calls are primarily going to be observed
+    // during render because effects and events don't run on the server it is
+    // still possible that these get called in module scope. This is valid on
+    // the client since there is still a document to interact with but on the
+    // server we need a request to associate the call to. Because of this we
+    // simply return and do not warn.
+    return;
+  }
+  const resources = currentResources;
+  if (__DEV__) {
+    if (typeof href !== 'string' || !href) {
+      console.error(
+        'ReactDOM.preload(): Expected the `href` argument (first) to be a non-empty string but encountered %s instead.',
+        getValueDescriptorExpectingObjectForWarning(href),
+      );
+    } else if (options == null || typeof options !== 'object') {
+      console.error(
+        'ReactDOM.preload(): Expected the `options` argument (second) to be an object with an `as` property describing the type of resource to be preloaded but encountered %s instead.',
+        getValueDescriptorExpectingEnumForWarning(options),
+      );
+    } else if (typeof options.as !== 'string') {
+      console.error(
+        'ReactDOM.preload(): Expected the `as` property in the `options` argument (second) to contain a string value describing the type of resource to be preloaded but encountered %s instead. Values that are valid in for the `as` attribute of a `<link rel="preload" as="..." />` tag are valid here.',
+        getValueDescriptorExpectingEnumForWarning(options.as),
+      );
+    }
+  }
+  if (
+    typeof href === 'string' &&
+    href &&
+    typeof options === 'object' &&
+    options !== null &&
+    typeof options.as === 'string'
+  ) {
+    const as = options.as;
+    const key = getResourceKey(as, href);
+    let resource = resources.preloadsMap.get(key);
+    if (__DEV__) {
+      const devResource = getAsResourceDEV(resource);
+      if (devResource) {
+        switch (devResource.__provenance) {
+          case 'preload': {
+            const differenceDescription = describeDifferencesForPreloads(
+              options,
+              devResource.__originalOptions,
+            );
+            if (differenceDescription) {
+              console.error(
+                'ReactDOM.preload(): The options provided conflict with another call to `ReactDOM.preload("%s", { as: "%s", ...})`.' +
+                  ' React will always use the options it first encounters when preloading a resource for a given `href` and `as` type, and any later options will be ignored if different.' +
+                  ' Try updating all calls to `ReactDOM.preload()` with the same `href` and `as` type to use the same options, or eliminate one of the calls.%s',
+                href,
+                as,
+                differenceDescription,
+              );
+            }
+            break;
+          }
+          case 'implicit': {
+            const differenceDescription =
+              describeDifferencesForPreloadOverImplicitPreload(
+                options,
+                devResource.__impliedProps,
+              );
+            if (differenceDescription) {
+              const elementDescription =
+                as === 'style'
+                  ? '<link rel="stylesheet" ... />'
+                  : as === 'script'
+                  ? '<script ... />'
+                  : null;
+              if (elementDescription) {
+                console.error(
+                  'ReactDOM.preload(): For `href` "%s", The options provided conflict with props on a matching %s element. When the preload' +
+                    ' options disagree with the underlying resource it usually means the browser will not be able to use the preload when the resource' +
+                    ' is fetched, negating any benefit the preload would provide. React will preload the resource using props derived from the resource instead' +
+                    ' and ignore the options provided to the `ReactDOM.preload()` call. In general, preloading is useful when you expect to' +
+                    ' render a resource soon but have not yet done so. In this case since the underlying resource was already rendered the preload call' +
+                    ' may be extraneous. Try removing the call, otherwise try adjusting both the props on the %s and the options' +
+                    ' passed to `ReactDOM.preload()` to agree.%s',
+                  href,
+                  elementDescription,
+                  elementDescription,
+                  differenceDescription,
+                );
+              }
+            }
+            break;
+          }
+        }
+      }
+    }
+    if (!resource) {
+      resource = {
+        type: 'preload',
+        chunks: [],
+        state: NoState,
+        props: preloadPropsFromPreloadOptions(href, as, options),
+      };
+      resources.preloadsMap.set(key, resource);
+      if (__DEV__) {
+        markAsImperativeResourceDEV(
+          resource,
+          'preload',
+          href,
+          options,
+          resource.props,
+        );
+      }
+
+      pushLinkImpl(resource.chunks, resource.props);
+    }
+    switch (as) {
+      case 'font': {
+        resources.fontPreloads.add(resource);
+        break;
+      }
+      case 'style': {
+        resources.explicitStylesheetPreloads.add(resource);
+        break;
+      }
+      case 'script': {
+        resources.explicitScriptPreloads.add(resource);
+        break;
+      }
+      default: {
+        resources.explicitOtherPreloads.add(resource);
+      }
+    }
+  }
+}
+
+type PreinitAs = 'style' | 'script';
+type PreinitOptions = {
+  as: PreinitAs,
+  precedence?: string,
+  crossOrigin?: string,
+  integrity?: string,
+};
+export function preinit(href: string, options: PreinitOptions): void {
+  if (!currentResources) {
+    // While we expect that preinit calls are primarily going to be observed
+    // during render because effects and events don't run on the server it is
+    // still possible that these get called in module scope. This is valid on
+    // the client since there is still a document to interact with but on the
+    // server we need a request to associate the call to. Because of this we
+    // simply return and do not warn.
+    return;
+  }
+  preinitImpl(currentResources, href, options);
+}
+
+// On the server, preinit may be called outside of render when sending an
+// external SSR runtime as part of the initial resources payload. Since this
+// is an internal React call, we do not need to use the resources stack.
+function preinitImpl(
+  resources: Resources,
+  href: string,
+  options: PreinitOptions,
+): void {
+  if (__DEV__) {
+    if (typeof href !== 'string' || !href) {
+      console.error(
+        'ReactDOM.preinit(): Expected the `href` argument (first) to be a non-empty string but encountered %s instead.',
+        getValueDescriptorExpectingObjectForWarning(href),
+      );
+    } else if (options == null || typeof options !== 'object') {
+      console.error(
+        'ReactDOM.preinit(): Expected the `options` argument (second) to be an object with an `as` property describing the type of resource to be preinitialized but encountered %s instead.',
+        getValueDescriptorExpectingEnumForWarning(options),
+      );
+    } else if (options.as !== 'style' && options.as !== 'script') {
+      console.error(
+        'ReactDOM.preinit(): Expected the `as` property in the `options` argument (second) to contain a valid value describing the type of resource to be preinitialized but encountered %s instead. Valid values for `as` are "style" and "script".',
+        getValueDescriptorExpectingEnumForWarning(options.as),
+      );
+    }
+  }
+  if (
+    typeof href === 'string' &&
+    href &&
+    typeof options === 'object' &&
+    options !== null
+  ) {
+    const as = options.as;
+    switch (as) {
+      case 'style': {
+        const key = getResourceKey(as, href);
+        let resource = resources.stylesMap.get(key);
+        const precedence = options.precedence || 'default';
+        if (__DEV__) {
+          const devResource = getAsResourceDEV(resource);
+          if (devResource) {
+            const resourceProps = stylesheetPropsFromPreinitOptions(
+              href,
+              precedence,
+              options,
+            );
+            const propsEquivalent = {
+              ...resourceProps,
+              precedence: options.precedence,
+              ['data-precedence']: null,
+            };
+            switch (devResource.__provenance) {
+              case 'rendered': {
+                const differenceDescription =
+                  describeDifferencesForPreinitOverStylesheet(
+                    // Diff the props from the JSX element, not the derived resource props
+                    propsEquivalent,
+                    devResource.__originalProps,
+                  );
+                if (differenceDescription) {
+                  console.error(
+                    'ReactDOM.preinit(): For `href` "%s", the options provided conflict with props found on a <link rel="stylesheet" precedence="%s" href="%s" .../> that was already rendered.' +
+                      ' React will always use the props or options it first encounters for a hoistable stylesheet for a given `href` and any later props or options will be ignored if different.' +
+                      ' Generally, ReactDOM.preinit() is useful when you are not yet rendering a stylesheet but you anticipate it will be used soon.' +
+                      ' In this case the stylesheet was already rendered so preinitializing it does not provide any additional benefit.' +
+                      ' To resolve, try making the props and options agree between the <link rel="stylesheet" .../> and the `ReactDOM.preinit()` call or' +
+                      ' remove the `ReactDOM.preinit()` call.%s',
+                    href,
+                    devResource.__originalProps.precedence,
+                    href,
+                    differenceDescription,
+                  );
+                }
+                break;
+              }
+              case 'preinit': {
+                const differenceDescription = describeDifferencesForPreinits(
+                  // Diff the props from the JSX element, not the derived resource props
+                  propsEquivalent,
+                  devResource.__propsEquivalent,
+                );
+                if (differenceDescription) {
+                  console.error(
+                    'ReactDOM.preinit(): For `href` "%s", the options provided conflict with another call to `ReactDOM.preinit("%s", { as: "style", ... })`.' +
+                      ' React will always use the options it first encounters when preinitializing a hoistable stylesheet for a given `href` and any later options will be ignored if different.' +
+                      ' Try updating all calls to `ReactDOM.preinit()` for a given `href` to use the same options, or only call `ReactDOM.preinit()` once per `href`.%s',
+                    href,
+                    href,
+                    differenceDescription,
+                  );
+                }
+                break;
+              }
+            }
+          }
+        }
+        if (!resource) {
+          resource = {
+            type: 'stylesheet',
+            chunks: ([]: Array<Chunk | PrecomputedChunk>),
+            state: NoState,
+            props: stylesheetPropsFromPreinitOptions(href, precedence, options),
+          };
+          resources.stylesMap.set(key, resource);
+          if (__DEV__) {
+            markAsImperativeResourceDEV(resource, 'preinit', href, options, {
+              ...resource.props,
+              precedence,
+              ['data-precedence']: undefined,
+            });
+          }
+          let precedenceSet = resources.precedences.get(precedence);
+          if (!precedenceSet) {
+            precedenceSet = new Set();
+            resources.precedences.set(precedence, precedenceSet);
+          }
+          precedenceSet.add(resource);
+        }
+        return;
+      }
+      case 'script': {
+        const src = href;
+        const key = getResourceKey(as, src);
+        let resource = resources.scriptsMap.get(key);
+        if (__DEV__) {
+          const devResource = getAsResourceDEV(resource);
+          if (devResource) {
+            const propsEquivalent = scriptPropsFromPreinitOptions(src, options);
+            switch (devResource.__provenance) {
+              case 'rendered': {
+                const differenceDescription =
+                  describeDifferencesForPreinitOverScript(
+                    // Diff the props from the JSX element, not the derived resource props
+                    propsEquivalent,
+                    devResource.__originalProps,
+                  );
+                if (differenceDescription) {
+                  console.error(
+                    'ReactDOM.preinit(): For `href` "%s", the options provided conflict with props found on a <script async={true} src="%s" .../> that was already rendered.' +
+                      ' React will always use the props or options it first encounters for a hoistable script for a given `href` and any later props or options will be ignored if different.' +
+                      ' Generally, ReactDOM.preinit() is useful when you are not yet rendering a script but you anticipate it will be used soon and want to go beyond preloading it and have it' +
+                      ' execute early. In this case the script was already rendered so preinitializing it does not provide any additional benefit.' +
+                      ' To resolve, try making the props and options agree between the <script .../> and the `ReactDOM.preinit()` call or remove the `ReactDOM.preinit()` call.%s',
+                    href,
+                    href,
+                    differenceDescription,
+                  );
+                }
+                break;
+              }
+              case 'preinit': {
+                const differenceDescription = describeDifferencesForPreinits(
+                  // Diff the props from the JSX element, not the derived resource props
+                  propsEquivalent,
+                  devResource.__propsEquivalent,
+                );
+                if (differenceDescription) {
+                  console.error(
+                    'ReactDOM.preinit(): For `href` "%s", the options provided conflict with another call to `ReactDOM.preinit("%s", { as: "script", ... })`.' +
+                      ' React will always use the options it first encounters when preinitializing a hoistable script for a given `href` and any later options will be ignored if different.' +
+                      ' Try updating all calls to `ReactDOM.preinit()` for a given `href` to use the same options, or only call `ReactDOM.preinit()` once per `href`.%s',
+                    href,
+                    href,
+                    differenceDescription,
+                  );
+                }
+                break;
+              }
+            }
+          }
+        }
+        if (!resource) {
+          resource = {
+            type: 'script',
+            chunks: [],
+            state: NoState,
+            props: null,
+          };
+          resources.scriptsMap.set(key, resource);
+          const resourceProps = scriptPropsFromPreinitOptions(src, options);
+          if (__DEV__) {
+            markAsImperativeResourceDEV(
+              resource,
+              'preinit',
+              href,
+              options,
+              resourceProps,
+            );
+          }
+          resources.scripts.add(resource);
+          pushScriptImpl(resource.chunks, resourceProps);
+        }
+        return;
+      }
+    }
+  }
+}
+
+function preloadPropsFromPreloadOptions(
+  href: string,
+  as: PreloadAs,
+  options: PreloadOptions,
+): PreloadProps {
+  return {
+    rel: 'preload',
+    as,
+    href,
+    crossOrigin: as === 'font' ? '' : options.crossOrigin,
+    integrity: options.integrity,
+  };
+}
+
+function preloadAsStylePropsFromProps(href: string, props: any): PreloadProps {
+  return {
+    rel: 'preload',
+    as: 'style',
+    href: href,
+    crossOrigin: props.crossOrigin,
+    integrity: props.integrity,
+    media: props.media,
+    hrefLang: props.hrefLang,
+    referrerPolicy: props.referrerPolicy,
+  };
+}
+
+function preloadAsScriptPropsFromProps(href: string, props: any): PreloadProps {
+  return {
+    rel: 'preload',
+    as: 'script',
+    href,
+    crossOrigin: props.crossOrigin,
+    integrity: props.integrity,
+    referrerPolicy: props.referrerPolicy,
+  };
+}
+
+function stylesheetPropsFromPreinitOptions(
+  href: string,
+  precedence: string,
+  options: PreinitOptions,
+): StylesheetProps {
+  return {
+    rel: 'stylesheet',
+    href,
+    'data-precedence': precedence,
+    crossOrigin: options.crossOrigin,
+    integrity: options.integrity,
+  };
+}
+
+function stylesheetPropsFromRawProps(rawProps: any): StylesheetProps {
+  return {
+    ...rawProps,
+    'data-precedence': rawProps.precedence,
+    precedence: null,
+  };
+}
+
+function adoptPreloadPropsForStylesheetProps(
+  resourceProps: StylesheetProps,
+  preloadProps: PreloadProps,
+): void {
+  if (resourceProps.crossOrigin == null)
+    resourceProps.crossOrigin = preloadProps.crossOrigin;
+  if (resourceProps.integrity == null)
+    resourceProps.integrity = preloadProps.integrity;
+}
+
+function styleTagPropsFromRawProps(rawProps: any): StyleTagProps {
+  return {
+    ...rawProps,
+    'data-precedence': rawProps.precedence,
+    precedence: null,
+    'data-href': rawProps.href,
+    href: null,
+  };
+}
+
+function scriptPropsFromPreinitOptions(
+  src: string,
+  options: PreinitOptions,
+): ScriptProps {
+  return {
+    src,
+    async: true,
+    crossOrigin: options.crossOrigin,
+    integrity: options.integrity,
+  };
+}
+
+function adoptPreloadPropsForScriptProps(
+  resourceProps: ScriptProps,
+  preloadProps: PreloadProps,
+): void {
+  if (resourceProps.crossOrigin == null)
+    resourceProps.crossOrigin = preloadProps.crossOrigin;
+  if (resourceProps.integrity == null)
+    resourceProps.integrity = preloadProps.integrity;
+}
+
+function hoistStylesheetResource(
+  this: BoundaryResources,
+  resource: StyleResource,
+) {
+  this.add(resource);
+}
+
+export function hoistResources(
+  resources: Resources,
+  source: BoundaryResources,
+): void {
+  const currentBoundaryResources = resources.boundaryResources;
+  if (currentBoundaryResources) {
+    source.forEach(hoistStylesheetResource, currentBoundaryResources);
+    source.clear();
+  }
+}
+
+function unblockStylesheet(resource: StyleResource) {
+  resource.state &= ~Blocked;
+}
+
+export function hoistResourcesToRoot(
+  resources: Resources,
+  boundaryResources: BoundaryResources,
+): void {
+  boundaryResources.forEach(unblockStylesheet);
+  boundaryResources.clear();
+}
+
+function markAsRenderedResourceDEV(
+  resource: Resource,
+  originalProps: any,
+): void {
+  if (__DEV__) {
+    const devResource: RenderedResourceDEV = (resource: any);
+    if (typeof devResource.__provenance === 'string') {
+      console.error(
+        'Resource already marked for DEV type. This is a bug in React.',
+      );
+    }
+    devResource.__provenance = 'rendered';
+    devResource.__originalProps = originalProps;
+  } else {
+    // eslint-disable-next-line react-internal/prod-error-codes
+    throw new Error(
+      'markAsRenderedResourceDEV was included in a production build. This is a bug in React.',
+    );
+  }
+}
+
+function markAsImperativeResourceDEV(
+  resource: Resource,
+  provenance: 'preload' | 'preinit',
+  originalHref: string,
+  originalOptions: any,
+  propsEquivalent: any,
+): void {
+  if (__DEV__) {
+    const devResource: ImperativeResourceDEV = (resource: any);
+    if (typeof devResource.__provenance === 'string') {
+      console.error(
+        'Resource already marked for DEV type. This is a bug in React.',
+      );
+    }
+    devResource.__provenance = provenance;
+    devResource.__originalHref = originalHref;
+    devResource.__originalOptions = originalOptions;
+    devResource.__propsEquivalent = propsEquivalent;
+  } else {
+    // eslint-disable-next-line react-internal/prod-error-codes
+    throw new Error(
+      'markAsImperativeResourceDEV was included in a production build. This is a bug in React.',
+    );
+  }
+}
+
+function markAsImplicitResourceDEV(
+  resource: Resource,
+  underlyingProps: any,
+  impliedProps: any,
+): void {
+  if (__DEV__) {
+    const devResource: ImplicitResourceDEV = (resource: any);
+    if (typeof devResource.__provenance === 'string') {
+      console.error(
+        'Resource already marked for DEV type. This is a bug in React.',
+      );
+    }
+    devResource.__provenance = 'implicit';
+    devResource.__underlyingProps = underlyingProps;
+    devResource.__impliedProps = impliedProps;
+  } else {
+    // eslint-disable-next-line react-internal/prod-error-codes
+    throw new Error(
+      'markAsImplicitResourceDEV was included in a production build. This is a bug in React.',
+    );
+  }
+}
+
+function getAsResourceDEV(
+  resource: null | void | Resource,
+): null | ResourceDEV {
+  if (__DEV__) {
+    if (resource) {
+      if (typeof (resource: any).__provenance === 'string') {
+        return (resource: any);
+      }
+      console.error(
+        'Resource was not marked for DEV type. This is a bug in React.',
+      );
+    }
+    return null;
+  } else {
+    // eslint-disable-next-line react-internal/prod-error-codes
+    throw new Error(
+      'getAsResourceDEV was included in a production build. This is a bug in React.',
+    );
+  }
+}
diff --git a/packages/react-dom-bindings/src/server/ReactDOMServerLegacyFormatConfig.js b/packages/react-dom-bindings/src/server/ReactDOMServerLegacyFormatConfig.js
index aa11451b1eeea..c965175e7e8f0 100644
--- a/packages/react-dom-bindings/src/server/ReactDOMServerLegacyFormatConfig.js
+++ b/packages/react-dom-bindings/src/server/ReactDOMServerLegacyFormatConfig.js
@@ -11,6 +11,7 @@ import type {
   BootstrapScriptDescriptor,
   FormatContext,
   StreamingFormat,
+  InstructionState,
 } from './ReactDOMServerFormatConfig';
 
 import {
@@ -42,11 +43,15 @@ export type ResponseState = {
   nextSuspenseID: number,
   streamingFormat: StreamingFormat,
   startInlineScript: PrecomputedChunk,
-  sentCompleteSegmentFunction: boolean,
-  sentCompleteBoundaryFunction: boolean,
-  sentClientRenderFunction: boolean,
-  sentStyleInsertionFunction: boolean,
+  instructions: InstructionState,
   externalRuntimeConfig: BootstrapScriptDescriptor | null,
+  htmlChunks: null | Array<Chunk | PrecomputedChunk>,
+  headChunks: null | Array<Chunk | PrecomputedChunk>,
+  hasBody: boolean,
+  charsetChunks: Array<Chunk | PrecomputedChunk>,
+  preconnectChunks: Array<Chunk | PrecomputedChunk>,
+  preloadChunks: Array<Chunk | PrecomputedChunk>,
+  hoistableChunks: Array<Chunk | PrecomputedChunk>,
   // This is an extra field for the legacy renderer
   generateStaticMarkup: boolean,
 };
@@ -74,11 +79,16 @@ export function createResponseState(
     nextSuspenseID: responseState.nextSuspenseID,
     streamingFormat: responseState.streamingFormat,
     startInlineScript: responseState.startInlineScript,
-    sentCompleteSegmentFunction: responseState.sentCompleteSegmentFunction,
-    sentCompleteBoundaryFunction: responseState.sentCompleteBoundaryFunction,
-    sentClientRenderFunction: responseState.sentClientRenderFunction,
-    sentStyleInsertionFunction: responseState.sentStyleInsertionFunction,
+    instructions: responseState.instructions,
     externalRuntimeConfig: responseState.externalRuntimeConfig,
+    htmlChunks: responseState.htmlChunks,
+    headChunks: responseState.headChunks,
+    hasBody: responseState.hasBody,
+    charsetChunks: responseState.charsetChunks,
+    preconnectChunks: responseState.preconnectChunks,
+    preloadChunks: responseState.preloadChunks,
+    hoistableChunks: responseState.hoistableChunks,
+
     // This is an extra field for the legacy renderer
     generateStaticMarkup,
   };
@@ -115,12 +125,14 @@ export {
   writeClientRenderBoundaryInstruction,
   writeStartPendingSuspenseBoundary,
   writeEndPendingSuspenseBoundary,
+  writeResourcesForBoundary,
   writePlaceholder,
   writeCompletedRoot,
   createResources,
   createBoundaryResources,
-  writeInitialResources,
-  writeImmediateResources,
+  writePreamble,
+  writeHoistables,
+  writePostamble,
   hoistResources,
   hoistResourcesToRoot,
   setCurrentlyRenderingBoundaryResourcesTarget,
diff --git a/packages/react-dom-bindings/src/server/fizz-instruction-set/ReactDOMFizzInstructionSetExternalRuntime.js b/packages/react-dom-bindings/src/server/fizz-instruction-set/ReactDOMFizzInstructionSetExternalRuntime.js
index 4598accc5d541..d6698c427fc27 100644
--- a/packages/react-dom-bindings/src/server/fizz-instruction-set/ReactDOMFizzInstructionSetExternalRuntime.js
+++ b/packages/react-dom-bindings/src/server/fizz-instruction-set/ReactDOMFizzInstructionSetExternalRuntime.js
@@ -22,21 +22,37 @@ export function completeBoundaryWithStyles(
   contentID,
   styles,
 ) {
+  const stylesToHoist = new Map();
   const precedences = new Map();
   const thisDocument = document;
   let lastResource, node;
 
+  let nodes = thisDocument.querySelectorAll('template[data-precedence]');
+  for (let i = 0; (node = nodes[i++]); ) {
+    let child = node.content.firstChild;
+    for (; child; child = child.nextSibling) {
+      stylesToHoist.set(child.getAttribute('data-href'), child);
+    }
+    node.parentNode.removeChild(node);
+  }
+
   // Seed the precedence list with existing resources
-  const nodes = thisDocument.querySelectorAll(
+  nodes = thisDocument.querySelectorAll(
     'link[data-precedence],style[data-precedence]',
   );
   for (let i = 0; (node = nodes[i++]); ) {
+    // We populate the resourceMap from found nodes so we can incorporate any
+    // resources the client runtime adds when the two runtimes are running concurrently
+    resourceMap.set(
+      node.getAttribute(node.nodeName === 'STYLE' ? 'data-href' : 'href'),
+      node,
+    );
     precedences.set(node.dataset['precedence'], (lastResource = node));
   }
 
   let i = 0;
   const dependencies = [];
-  let style, href, precedence, attr, loadingState, resourceEl;
+  let style, href, precedence, attr, loadingState, resourceEl, media;
 
   function setStatus(s) {
     this['s'] = s;
@@ -45,59 +61,78 @@ export function completeBoundaryWithStyles(
   while ((style = styles[i++])) {
     let j = 0;
     href = style[j++];
-    // We check if this resource is already in our resourceMap and reuse it if so.
-    // If it is already loaded we don't return it as a depenendency since there is nothing
-    // to wait for
-    loadingState = resourceMap.get(href);
-    if (loadingState) {
-      if (loadingState['s'] !== 'l') {
-        dependencies.push(loadingState);
-      }
-      continue;
-    }
 
-    // We construct our new resource element, looping over remaining attributes if any
-    // setting them to the Element.
-    resourceEl = thisDocument.createElement('link');
-    resourceEl.href = href;
-    resourceEl.rel = 'stylesheet';
-    resourceEl.dataset['precedence'] = precedence = style[j++];
-    while ((attr = style[j++])) {
-      resourceEl.setAttribute(attr, style[j++]);
-    }
+    if ((resourceEl = resourceMap.get(href))) {
+      // We have an already known resource. It could be a <style>, a <link> created
+      // by this runtime (which will have a loadingState) or a <link> created by
+      // the client runtime (which will also have a loadingState). We look for a
+      // loadingState and test whether it is not loaded yet and whether the media matches
+      // before using it as a dependency. If it is a <style> there will be no loadingState
+      // and we can avoid tracking it as a dependency because these tags don't load
+    } else {
+      // We haven't already processed this href so we need to hoist an element. It will
+      // either be a <style> that was sent in a <template> and prepped in `stylesToHoist`
+      // or we will need to create a <link>
+      if ((resourceEl = stylesToHoist.get(href))) {
+        // We have a <style> which needs to be hoisted to the correct precedence
+        // We set it in the resourceMap so we can bail out on future passes
+        // if this is depended on more than once
+        precedence = resourceEl.getAttribute('data-precedence');
+      } else {
+        // If we got this far we are depending on a <link> which is not yet in the document.
+        // We construct it here and attach a loadingState. We also check whether it matches
+        // media before we include it in the dependency array.
+        resourceEl = thisDocument.createElement('link');
+        resourceEl.href = href;
+        resourceEl.rel = 'stylesheet';
+        resourceEl.dataset['precedence'] = precedence = style[j++];
+        while ((attr = style[j++])) {
+          resourceEl.setAttribute(attr, style[j++]);
+        }
+        loadingState = resourceEl['_p'] = new Promise((re, rj) => {
+          resourceEl.onload = re;
+          resourceEl.onerror = rj;
+        });
+        loadingState.then(
+          setStatus.bind(loadingState, LOADED),
+          setStatus.bind(loadingState, ERRORED),
+        );
+      }
+      // Save this resource element so we can bailout if it is used again
+      resourceMap.set(href, resourceEl);
 
-    // We stash a pending promise in our map by href which will resolve or reject
-    // when the underlying resource loads or errors. We add it to the dependencies
-    // array to be returned.
-    loadingState = resourceEl['_p'] = new Promise((re, rj) => {
-      resourceEl.onload = re;
-      resourceEl.onerror = rj;
-    });
-    loadingState.then(
-      setStatus.bind(loadingState, LOADED),
-      setStatus.bind(loadingState, ERRORED),
-    );
-    resourceMap.set(href, loadingState);
-    dependencies.push(loadingState);
+      // The prior style resource is the last one placed at a given
+      // precedence or the last resource itself which may be null.
+      // We grab this value and then update the last resource for this
+      // precedence to be the inserted element, updating the lastResource
+      // pointer if needed.
+      const prior = precedences.get(precedence) || lastResource;
+      if (prior === lastResource) {
+        lastResource = resourceEl;
+      }
+      precedences.set(precedence, resourceEl);
 
-    // The prior style resource is the last one placed at a given
-    // precedence or the last resource itself which may be null.
-    // We grab this value and then update the last resource for this
-    // precedence to be the inserted element, updating the lastResource
-    // pointer if needed.
-    const prior = precedences.get(precedence) || lastResource;
-    if (prior === lastResource) {
-      lastResource = resourceEl;
+      // Finally, we insert the newly constructed instance at an appropriate location
+      // in the Document.
+      if (prior) {
+        prior.parentNode.insertBefore(resourceEl, prior.nextSibling);
+      } else {
+        const head = thisDocument.head;
+        head.insertBefore(resourceEl, head.firstChild);
+      }
     }
-    precedences.set(precedence, resourceEl);
 
-    // Finally, we insert the newly constructed instance at an appropriate location
-    // in the Document.
-    if (prior) {
-      prior.parentNode.insertBefore(resourceEl, prior.nextSibling);
-    } else {
-      const head = thisDocument.head;
-      head.insertBefore(resourceEl, head.firstChild);
+    // If we are a <link> we will have a loadingState and we can use this
+    // combined with matchMedia to decide if we need to await this dependency
+    // loading. <style> tags won't have a loadingState so they are never awaited
+    loadingState = resourceEl['_p'];
+    media = resourceEl.getAttribute('media');
+    if (
+      loadingState &&
+      loadingState['s'] !== 'l' &&
+      (!media || window['matchMedia'](media).matches)
+    ) {
+      dependencies.push(loadingState);
     }
   }
 
diff --git a/packages/react-dom-bindings/src/server/fizz-instruction-set/ReactDOMFizzInstructionSetInlineCodeStrings.js b/packages/react-dom-bindings/src/server/fizz-instruction-set/ReactDOMFizzInstructionSetInlineCodeStrings.js
index 17ec195e07c71..89717947d12a9 100644
--- a/packages/react-dom-bindings/src/server/fizz-instruction-set/ReactDOMFizzInstructionSetInlineCodeStrings.js
+++ b/packages/react-dom-bindings/src/server/fizz-instruction-set/ReactDOMFizzInstructionSetInlineCodeStrings.js
@@ -6,6 +6,6 @@ export const clientRenderBoundary =
 export const completeBoundary =
   '$RC=function(b,c,e){c=document.getElementById(c);c.parentNode.removeChild(c);var a=document.getElementById(b);if(a){b=a.previousSibling;if(e)b.data="$!",a.setAttribute("data-dgst",e);else{e=b.parentNode;a=b.nextSibling;var f=0;do{if(a&&8===a.nodeType){var d=a.data;if("/$"===d)if(0===f)break;else f--;else"$"!==d&&"$?"!==d&&"$!"!==d||f++}d=a.nextSibling;e.removeChild(a);a=d}while(a);for(;c.firstChild;)e.insertBefore(c.firstChild,a);b.data="$"}b._reactRetry&&b._reactRetry()}};';
 export const completeBoundaryWithStyles =
-  '$RM=new Map;\n$RR=function(p,q,v){function r(l){this.s=l}for(var t=$RC,u=$RM,m=new Map,n=document,g,e,f=n.querySelectorAll("link[data-precedence],style[data-precedence]"),d=0;e=f[d++];)m.set(e.dataset.precedence,g=e);e=0;f=[];for(var c,h,b,a;c=v[e++];){var k=0;h=c[k++];if(b=u.get(h))"l"!==b.s&&f.push(b);else{a=n.createElement("link");a.href=h;a.rel="stylesheet";for(a.dataset.precedence=d=c[k++];b=c[k++];)a.setAttribute(b,c[k++]);b=a._p=new Promise(function(l,w){a.onload=l;a.onerror=w});b.then(r.bind(b,\n"l"),r.bind(b,"e"));u.set(h,b);f.push(b);c=m.get(d)||g;c===g&&(g=a);m.set(d,a);c?c.parentNode.insertBefore(a,c.nextSibling):(d=n.head,d.insertBefore(a,d.firstChild))}}Promise.all(f).then(t.bind(null,p,q,""),t.bind(null,p,q,"Resource failed to load"))};';
+  '$RM=new Map;\n$RR=function(p,q,w){function r(l){this.s=l}for(var t=$RC,m=$RM,u=new Map,n=new Map,g=document,h,e,f=g.querySelectorAll("template[data-precedence]"),c=0;e=f[c++];){for(var b=e.content.firstChild;b;b=b.nextSibling)u.set(b.getAttribute("data-href"),b);e.parentNode.removeChild(e)}f=g.querySelectorAll("link[data-precedence],style[data-precedence]");for(c=0;e=f[c++];)m.set(e.getAttribute("STYLE"===e.nodeName?"data-href":"href"),e),n.set(e.dataset.precedence,h=e);e=0;f=[];for(var d,\nv,a;d=w[e++];){var k=0;b=d[k++];if(!(a=m.get(b))){if(a=u.get(b))c=a.getAttribute("data-precedence");else{a=g.createElement("link");a.href=b;a.rel="stylesheet";for(a.dataset.precedence=c=d[k++];v=d[k++];)a.setAttribute(v,d[k++]);d=a._p=new Promise(function(l,x){a.onload=l;a.onerror=x});d.then(r.bind(d,"l"),r.bind(d,"e"))}m.set(b,a);b=n.get(c)||h;b===h&&(h=a);n.set(c,a);b?b.parentNode.insertBefore(a,b.nextSibling):(c=g.head,c.insertBefore(a,c.firstChild))}d=a._p;c=a.getAttribute("media");!d||"l"===\nd.s||c&&!matchMedia(c).matches||f.push(d)}Promise.all(f).then(t.bind(null,p,q,""),t.bind(null,p,q,"Resource failed to load"))};';
 export const completeSegment =
   '$RS=function(a,b){a=document.getElementById(a);b=document.getElementById(b);for(a.parentNode.removeChild(a);a.firstChild;)b.parentNode.insertBefore(a.firstChild,b);b.parentNode.removeChild(b)};';
diff --git a/packages/react-dom-bindings/src/server/fizz-instruction-set/ReactDOMFizzInstructionSetInlineSource.js b/packages/react-dom-bindings/src/server/fizz-instruction-set/ReactDOMFizzInstructionSetInlineSource.js
index 3c96d1a15af84..84652fdd8c464 100644
--- a/packages/react-dom-bindings/src/server/fizz-instruction-set/ReactDOMFizzInstructionSetInlineSource.js
+++ b/packages/react-dom-bindings/src/server/fizz-instruction-set/ReactDOMFizzInstructionSetInlineSource.js
@@ -25,21 +25,37 @@ export function completeBoundaryWithStyles(
   const completeBoundaryImpl = window['$RC'];
   const resourceMap = window['$RM'];
 
+  const stylesToHoist = new Map();
   const precedences = new Map();
   const thisDocument = document;
   let lastResource, node;
 
+  let nodes = thisDocument.querySelectorAll('template[data-precedence]');
+  for (let i = 0; (node = nodes[i++]); ) {
+    let child = node.content.firstChild;
+    for (; child; child = child.nextSibling) {
+      stylesToHoist.set(child.getAttribute('data-href'), child);
+    }
+    node.parentNode.removeChild(node);
+  }
+
   // Seed the precedence list with existing resources
-  const nodes = thisDocument.querySelectorAll(
+  nodes = thisDocument.querySelectorAll(
     'link[data-precedence],style[data-precedence]',
   );
   for (let i = 0; (node = nodes[i++]); ) {
+    // We populate the resourceMap from found nodes so we can incorporate any
+    // resources the client runtime adds when the two runtimes are running concurrently
+    resourceMap.set(
+      node.getAttribute(node.nodeName === 'STYLE' ? 'data-href' : 'href'),
+      node,
+    );
     precedences.set(node.dataset['precedence'], (lastResource = node));
   }
 
   let i = 0;
   const dependencies = [];
-  let style, href, precedence, attr, loadingState, resourceEl;
+  let style, href, precedence, attr, loadingState, resourceEl, media;
 
   function setStatus(s) {
     this['s'] = s;
@@ -48,59 +64,78 @@ export function completeBoundaryWithStyles(
   while ((style = styles[i++])) {
     let j = 0;
     href = style[j++];
-    // We check if this resource is already in our resourceMap and reuse it if so.
-    // If it is already loaded we don't return it as a depenendency since there is nothing
-    // to wait for
-    loadingState = resourceMap.get(href);
-    if (loadingState) {
-      if (loadingState['s'] !== 'l') {
-        dependencies.push(loadingState);
-      }
-      continue;
-    }
 
-    // We construct our new resource element, looping over remaining attributes if any
-    // setting them to the Element.
-    resourceEl = thisDocument.createElement('link');
-    resourceEl.href = href;
-    resourceEl.rel = 'stylesheet';
-    resourceEl.dataset['precedence'] = precedence = style[j++];
-    while ((attr = style[j++])) {
-      resourceEl.setAttribute(attr, style[j++]);
-    }
+    if ((resourceEl = resourceMap.get(href))) {
+      // We have an already known resource. It could be a <style>, a <link> created
+      // by this runtime (which will have a loadingState) or a <link> created by
+      // the client runtime (which will also have a loadingState). We look for a
+      // loadingState and test whether it is not loaded yet and whether the media matches
+      // before using it as a dependency. If it is a <style> there will be no loadingState
+      // and we can avoid tracking it as a dependency because these tags don't load
+    } else {
+      // We haven't already processed this href so we need to hoist an element. It will
+      // either be a <style> that was sent in a <template> and prepped in `stylesToHoist`
+      // or we will need to create a <link>
+      if ((resourceEl = stylesToHoist.get(href))) {
+        // We have a <style> which needs to be hoisted to the correct precedence
+        // We set it in the resourceMap so we can bail out on future passes
+        // if this is depended on more than once
+        precedence = resourceEl.getAttribute('data-precedence');
+      } else {
+        // If we got this far we are depending on a <link> which is not yet in the document.
+        // We construct it here and attach a loadingState. We also check whether it matches
+        // media before we include it in the dependency array.
+        resourceEl = thisDocument.createElement('link');
+        resourceEl.href = href;
+        resourceEl.rel = 'stylesheet';
+        resourceEl.dataset['precedence'] = precedence = style[j++];
+        while ((attr = style[j++])) {
+          resourceEl.setAttribute(attr, style[j++]);
+        }
+        loadingState = resourceEl['_p'] = new Promise((re, rj) => {
+          resourceEl.onload = re;
+          resourceEl.onerror = rj;
+        });
+        loadingState.then(
+          setStatus.bind(loadingState, LOADED),
+          setStatus.bind(loadingState, ERRORED),
+        );
+      }
+      // Save this resource element so we can bailout if it is used again
+      resourceMap.set(href, resourceEl);
 
-    // We stash a pending promise in our map by href which will resolve or reject
-    // when the underlying resource loads or errors. We add it to the dependencies
-    // array to be returned.
-    loadingState = resourceEl['_p'] = new Promise((re, rj) => {
-      resourceEl.onload = re;
-      resourceEl.onerror = rj;
-    });
-    loadingState.then(
-      setStatus.bind(loadingState, LOADED),
-      setStatus.bind(loadingState, ERRORED),
-    );
-    resourceMap.set(href, loadingState);
-    dependencies.push(loadingState);
+      // The prior style resource is the last one placed at a given
+      // precedence or the last resource itself which may be null.
+      // We grab this value and then update the last resource for this
+      // precedence to be the inserted element, updating the lastResource
+      // pointer if needed.
+      const prior = precedences.get(precedence) || lastResource;
+      if (prior === lastResource) {
+        lastResource = resourceEl;
+      }
+      precedences.set(precedence, resourceEl);
 
-    // The prior style resource is the last one placed at a given
-    // precedence or the last resource itself which may be null.
-    // We grab this value and then update the last resource for this
-    // precedence to be the inserted element, updating the lastResource
-    // pointer if needed.
-    const prior = precedences.get(precedence) || lastResource;
-    if (prior === lastResource) {
-      lastResource = resourceEl;
+      // Finally, we insert the newly constructed instance at an appropriate location
+      // in the Document.
+      if (prior) {
+        prior.parentNode.insertBefore(resourceEl, prior.nextSibling);
+      } else {
+        const head = thisDocument.head;
+        head.insertBefore(resourceEl, head.firstChild);
+      }
     }
-    precedences.set(precedence, resourceEl);
 
-    // Finally, we insert the newly constructed instance at an appropriate location
-    // in the Document.
-    if (prior) {
-      prior.parentNode.insertBefore(resourceEl, prior.nextSibling);
-    } else {
-      const head = thisDocument.head;
-      head.insertBefore(resourceEl, head.firstChild);
+    // If we are a <link> we will have a loadingState and we can use this
+    // combined with matchMedia to decide if we need to await this dependency
+    // loading. <style> tags won't have a loadingState so they are never awaited
+    loadingState = resourceEl['_p'];
+    media = resourceEl.getAttribute('media');
+    if (
+      loadingState &&
+      loadingState['s'] !== 'l' &&
+      (!media || window['matchMedia'](media).matches)
+    ) {
+      dependencies.push(loadingState);
     }
   }
 
diff --git a/packages/react-dom-bindings/src/shared/ReactDOMResourceValidation.js b/packages/react-dom-bindings/src/shared/ReactDOMResourceValidation.js
index 52d9f5f52eaa4..71f48665bb4cc 100644
--- a/packages/react-dom-bindings/src/shared/ReactDOMResourceValidation.js
+++ b/packages/react-dom-bindings/src/shared/ReactDOMResourceValidation.js
@@ -7,614 +7,31 @@
  * @flow
  */
 
-import hasOwnProperty from 'shared/hasOwnProperty';
-
-type Props = {[string]: mixed};
-
-export function warnOnMissingHrefAndRel(
-  pendingProps: Props,
-  currentProps: ?Props,
-) {
-  if (__DEV__) {
-    if (currentProps != null) {
-      const originalResourceName =
-        typeof currentProps.href === 'string'
-          ? `Resource with href "${currentProps.href}"`
-          : 'Resource';
-      const originalRelStatement = getValueDescriptorExpectingEnumForWarning(
-        currentProps.rel,
-      );
-      const pendingRel = getValueDescriptorExpectingEnumForWarning(
-        pendingProps.rel,
-      );
-      const pendingHref = getValueDescriptorExpectingEnumForWarning(
-        pendingProps.href,
-      );
-      if (typeof pendingProps.rel !== 'string') {
-        console.error(
-          'A <link> previously rendered as a %s with rel "%s" but was updated with an invalid rel: %s. When a link' +
-            ' does not have a valid rel prop it is not represented in the DOM. If this is intentional, instead' +
-            ' do not render the <link> anymore.',
-          originalResourceName,
-          originalRelStatement,
-          pendingRel,
-        );
-      } else if (typeof pendingProps.href !== 'string') {
-        console.error(
-          'A <link> previously rendered as a %s but was updated with an invalid href prop: %s. When a link' +
-            ' does not have a valid href prop it is not represented in the DOM. If this is intentional, instead' +
-            ' do not render the <link> anymore.',
-          originalResourceName,
-          pendingHref,
-        );
-      }
-    } else {
-      const pendingRel = getValueDescriptorExpectingEnumForWarning(
-        pendingProps.rel,
-      );
-      const pendingHref = getValueDescriptorExpectingEnumForWarning(
-        pendingProps.href,
-      );
-      if (typeof pendingProps.rel !== 'string') {
-        console.error(
-          'A <link> is rendering with an invalid rel: %s. When a link' +
-            ' does not have a valid rel prop it is not represented in the DOM. If this is intentional, instead' +
-            ' do not render the <link> anymore.',
-          pendingRel,
-        );
-      } else if (typeof pendingProps.href !== 'string') {
-        console.error(
-          'A <link> is rendering with an invalid href: %s. When a link' +
-            ' does not have a valid href prop it is not represented in the DOM. If this is intentional, instead' +
-            ' do not render the <link> anymore.',
-          pendingHref,
-        );
-      }
-    }
-  }
-}
-
-export function validatePreloadResourceDifference(
-  originalProps: any,
-  originalImplicit: boolean,
-  latestProps: any,
-  latestImplicit: boolean,
-) {
-  if (__DEV__) {
-    const {href} = originalProps;
-    const originalWarningName = getResourceNameForWarning(
-      'preload',
-      originalProps,
-      originalImplicit,
-    );
-    const latestWarningName = getResourceNameForWarning(
-      'preload',
-      latestProps,
-      latestImplicit,
-    );
-
-    if (latestProps.as !== originalProps.as) {
-      console.error(
-        'A %s is using the same href "%s" as a %s. This is always an error and React will only keep the first preload' +
-          ' for any given href, discarding subsequent instances. To fix, find where you are using this href in link' +
-          ' tags or in calls to ReactDOM.preload() or ReactDOM.preinit() and either make the Resource types agree or' +
-          ' update the hrefs to be distinct for different Resource types.',
-        latestWarningName,
-        href,
-        originalWarningName,
-      );
-    } else {
-      let missingProps: {[string]: $FlowFixMe} | null = null;
-      let extraProps: {[string]: $FlowFixMe} | null = null;
-      let differentProps: {
-        [string]: {latest: $FlowFixMe, original: $FlowFixMe},
-      } | null = null;
-      if (originalProps.media != null && latestProps.media == null) {
-        missingProps = missingProps || ({}: {[string]: $FlowFixMe});
-        missingProps.media = originalProps.media;
-      }
-
-      for (const propName in latestProps) {
-        const propValue = latestProps[propName];
-        const originalValue = originalProps[propName];
-
-        if (propValue != null && propValue !== originalValue) {
-          if (originalValue == null) {
-            extraProps = extraProps || ({}: {[string]: $FlowFixMe});
-            extraProps[propName] = propValue;
-          } else {
-            differentProps =
-              differentProps ||
-              ({}: {[string]: {latest: $FlowFixMe, original: $FlowFixMe}});
-            differentProps[propName] = {
-              original: originalValue,
-              latest: propValue,
-            };
-          }
-        }
-      }
-
-      if (missingProps || extraProps || differentProps) {
-        warnDifferentProps(
-          href,
-          'href',
-          originalWarningName,
-          latestWarningName,
-          extraProps,
-          missingProps,
-          differentProps,
-        );
-      }
-    }
-  }
-}
-
-export function validateStyleResourceDifference(
-  originalProps: any,
-  latestProps: any,
-) {
-  if (__DEV__) {
-    const {href} = originalProps;
-    // eslint-disable-next-line no-labels
-    const originalWarningName = getResourceNameForWarning(
-      'style',
-      originalProps,
-      false,
-    );
-    const latestWarningName = getResourceNameForWarning(
-      'style',
-      latestProps,
-      false,
-    );
-    let missingProps: {[string]: $FlowFixMe} | null = null;
-    let extraProps: {[string]: $FlowFixMe} | null = null;
-    let differentProps: {
-      [string]: {latest: $FlowFixMe, original: $FlowFixMe},
-    } | null = null;
-    if (originalProps.media != null && latestProps.media == null) {
-      missingProps = missingProps || ({}: {[string]: $FlowFixMe});
-      missingProps.media = originalProps.media;
-    }
-
-    for (let propName in latestProps) {
-      const propValue = latestProps[propName];
-      const originalValue = originalProps[propName];
-
-      if (propValue != null && propValue !== originalValue) {
-        propName = propName === 'data-precedence' ? 'precedence' : propName;
-        if (originalValue == null) {
-          extraProps = extraProps || ({}: {[string]: $FlowFixMe});
-          extraProps[propName] = propValue;
-        } else {
-          differentProps =
-            differentProps ||
-            ({}: {[string]: {latest: $FlowFixMe, original: $FlowFixMe}});
-          differentProps[propName] = {
-            original: originalValue,
-            latest: propValue,
-          };
-        }
-      }
-    }
-
-    if (missingProps || extraProps || differentProps) {
-      warnDifferentProps(
-        href,
-        'href',
-        originalWarningName,
-        latestWarningName,
-        extraProps,
-        missingProps,
-        differentProps,
-      );
-    }
-  }
-}
-
-export function validateScriptResourceDifference(
-  originalProps: any,
-  latestProps: any,
-) {
-  if (__DEV__) {
-    const {src} = originalProps;
-    // eslint-disable-next-line no-labels
-    const originalWarningName = getResourceNameForWarning(
-      'script',
-      originalProps,
-      false,
-    );
-    const latestWarningName = getResourceNameForWarning(
-      'script',
-      latestProps,
-      false,
-    );
-    let extraProps: {[string]: $FlowFixMe} | null = null;
-    let differentProps: {
-      [string]: {latest: $FlowFixMe, original: $FlowFixMe},
-    } | null = null;
-
-    for (const propName in latestProps) {
-      const propValue = latestProps[propName];
-      const originalValue = originalProps[propName];
-
-      if (propValue != null && propValue !== originalValue) {
-        if (originalValue == null) {
-          extraProps = extraProps || ({}: {[string]: $FlowFixMe});
-          extraProps[propName] = propValue;
-        } else {
-          differentProps =
-            differentProps ||
-            ({}: {[string]: {latest: $FlowFixMe, original: $FlowFixMe}});
-          differentProps[propName] = {
-            original: originalValue,
-            latest: propValue,
-          };
-        }
-      }
-    }
-
-    if (extraProps || differentProps) {
-      warnDifferentProps(
-        src,
-        'src',
-        originalWarningName,
-        latestWarningName,
-        extraProps,
-        null,
-        differentProps,
-      );
-    }
-  }
-}
-
-export function validateStyleAndHintProps(
-  preloadProps: any,
-  styleProps: any,
-  implicitPreload: boolean,
-) {
-  if (__DEV__) {
-    const {href} = preloadProps;
-
-    const originalWarningName = getResourceNameForWarning(
-      'preload',
-      preloadProps,
-      implicitPreload,
-    );
-    const latestWarningName = getResourceNameForWarning(
-      'style',
-      styleProps,
-      false,
-    );
-
-    if (preloadProps.as !== 'style') {
-      console.error(
-        'While creating a %s for href "%s" a %s for this same href was found. When preloading a stylesheet the' +
-          ' "as" prop must be of type "style". This most likely ocurred by rendering a preload link with an incorrect' +
-          ' "as" prop or by calling ReactDOM.preload with an incorrect "as" option.',
-        latestWarningName,
-        href,
-        originalWarningName,
-      );
-    }
-
-    let missingProps: {[string]: $FlowFixMe} | null = null;
-    let extraProps: {[string]: $FlowFixMe} | null = null;
-    let differentProps: {
-      [string]: {latest: $FlowFixMe, original: $FlowFixMe},
-    } | null = null;
-
-    for (const propName in styleProps) {
-      const styleValue = styleProps[propName];
-      const preloadValue = preloadProps[propName];
-      switch (propName) {
-        // Check for difference on specific props that cross over or influence
-        // the relationship between the preload and stylesheet
-        case 'crossOrigin':
-        case 'referrerPolicy':
-        case 'media':
-        case 'title': {
-          if (
-            preloadValue !== styleValue &&
-            !(preloadValue == null && styleValue == null)
-          ) {
-            if (styleValue == null) {
-              missingProps = missingProps || ({}: {[string]: $FlowFixMe});
-              missingProps[propName] = preloadValue;
-            } else if (preloadValue == null) {
-              extraProps = extraProps || ({}: {[string]: $FlowFixMe});
-              extraProps[propName] = styleValue;
-            } else {
-              differentProps =
-                differentProps ||
-                ({}: {[string]: {latest: $FlowFixMe, original: $FlowFixMe}});
-              differentProps[propName] = {
-                original: preloadValue,
-                latest: styleValue,
-              };
-            }
-          }
-        }
-      }
-    }
-
-    if (missingProps || extraProps || differentProps) {
-      warnDifferentProps(
-        href,
-        'href',
-        originalWarningName,
-        latestWarningName,
-        extraProps,
-        missingProps,
-        differentProps,
-      );
-    }
-  }
-}
-
-export function validateScriptAndHintProps(
-  preloadProps: any,
-  scriptProps: any,
-  implicitPreload: boolean,
-) {
-  if (__DEV__) {
-    const {href} = preloadProps;
-
-    const originalWarningName = getResourceNameForWarning(
-      'preload',
-      preloadProps,
-      implicitPreload,
-    );
-    const latestWarningName = getResourceNameForWarning(
-      'script',
-      scriptProps,
-      false,
-    );
-
-    if (preloadProps.as !== 'script') {
-      console.error(
-        'While creating a %s for href "%s" a %s for this same url was found. When preloading a script the' +
-          ' "as" prop must be of type "script". This most likely ocurred by rendering a preload link with an incorrect' +
-          ' "as" prop or by calling ReactDOM.preload with an incorrect "as" option.',
-        latestWarningName,
-        href,
-        originalWarningName,
-      );
-    }
-
-    let missingProps: {[string]: $FlowFixMe} | null = null;
-    let extraProps: {[string]: $FlowFixMe} | null = null;
-    let differentProps: {
-      [string]: {latest: $FlowFixMe, original: $FlowFixMe},
-    } | null = null;
-
-    for (const propName in scriptProps) {
-      const scriptValue = scriptProps[propName];
-      const preloadValue = preloadProps[propName];
-      switch (propName) {
-        // Check for difference on specific props that cross over or influence
-        // the relationship between the preload and stylesheet
-        case 'crossOrigin':
-        case 'referrerPolicy':
-        case 'integrity': {
-          if (
-            preloadValue !== scriptValue &&
-            !(preloadValue == null && scriptValue == null)
-          ) {
-            if (scriptValue == null) {
-              missingProps = missingProps || ({}: {[string]: $FlowFixMe});
-              missingProps[propName] = preloadValue;
-            } else if (preloadValue == null) {
-              extraProps = extraProps || ({}: {[string]: $FlowFixMe});
-              extraProps[propName] = scriptValue;
-            } else {
-              differentProps =
-                differentProps ||
-                ({}: {[string]: {latest: $FlowFixMe, original: $FlowFixMe}});
-              differentProps[propName] = {
-                original: preloadValue,
-                latest: scriptValue,
-              };
-            }
-          }
-        }
-      }
-    }
-
-    if (missingProps || extraProps || differentProps) {
-      warnDifferentProps(
-        href,
-        'href',
-        originalWarningName,
-        latestWarningName,
-        extraProps,
-        missingProps,
-        differentProps,
-      );
-    }
-  }
-}
-
-function warnDifferentProps(
-  url: string,
-  urlPropKey: string,
-  originalName: string,
-  latestName: string,
-  extraProps: ?{[string]: $FlowFixMe},
-  missingProps: ?{[string]: $FlowFixMe},
-  differentProps: ?{[string]: {original: any, latest: any}},
-): void {
-  if (__DEV__) {
-    const juxtaposedNameStatement =
-      latestName === originalName
-        ? 'an earlier instance of this Resource'
-        : `a ${originalName} with the same ${urlPropKey}`;
-
-    let comparisonStatement = '';
-    if (missingProps !== null && typeof missingProps === 'object') {
-      for (const propName in missingProps) {
-        comparisonStatement += `\n  ${propName}: missing or null in latest props, "${missingProps[propName]}" in original props`;
-      }
-    }
-    if (extraProps !== null && typeof extraProps === 'object') {
-      for (const propName in extraProps) {
-        comparisonStatement += `\n  ${propName}: "${extraProps[propName]}" in latest props, missing or null in original props`;
-      }
-    }
-    if (differentProps !== null && typeof differentProps === 'object') {
-      for (const propName in differentProps) {
-        comparisonStatement += `\n  ${propName}: "${differentProps[propName].latest}" in latest props, "${differentProps[propName].original}" in original props`;
-      }
-    }
-
-    console.error(
-      'A %s with %s "%s" has props that disagree with those found on %s. Resources always use the props' +
-        ' that were provided the first time they are encountered so any differences will be ignored. Please' +
-        ' update Resources that share an %s to have props that agree. The differences are described below.%s',
-      latestName,
-      urlPropKey,
-      url,
-      juxtaposedNameStatement,
-      urlPropKey,
-      comparisonStatement,
-    );
-  }
-}
-
-function getResourceNameForWarning(
-  type: string,
-  props: Object,
-  implicit: boolean,
-) {
-  if (__DEV__) {
-    switch (type) {
-      case 'style': {
-        return 'style Resource';
-      }
-      case 'script': {
-        return 'script Resource';
-      }
-      case 'preload': {
-        if (implicit) {
-          return `preload for a ${props.as} Resource`;
-        }
-        return `preload Resource (as "${props.as}")`;
-      }
-    }
-  }
-  return 'Resource';
-}
-
-export function validateURLKeyedUpdatedProps(
-  pendingProps: Props,
-  currentProps: Props,
-  resourceType: 'style' | 'script' | 'href',
-  urlPropKey: 'href' | 'src',
-): boolean {
-  if (__DEV__) {
-    // This function should never be called if we don't have /srcs so we don't bother considering
-    // Whether they are null or undefined
-    if (pendingProps[urlPropKey] === currentProps[urlPropKey]) {
-      // If we have the same href/src we need all other props to be the same
-      let missingProps: ?{[string]: mixed};
-      let extraProps: ?{[string]: mixed};
-      let differentProps: ?{[string]: {latest: mixed, original: mixed}};
-      const allProps = Array.from(
-        new Set(Object.keys(currentProps).concat(Object.keys(pendingProps))),
-      );
-      for (let i = 0; i < allProps.length; i++) {
-        const propName = allProps[i];
-        const pendingValue = pendingProps[propName];
-        const currentValue = currentProps[propName];
-        if (
-          pendingValue !== currentValue &&
-          !(pendingValue == null && currentValue == null)
-        ) {
-          if (pendingValue == null) {
-            missingProps = missingProps || ({}: {[string]: mixed});
-            missingProps[propName] = currentValue;
-          } else if (currentValue == null) {
-            extraProps = extraProps || ({}: {[string]: mixed});
-            extraProps[propName] = pendingValue;
-          } else {
-            differentProps =
-              differentProps ||
-              ({}: {[string]: {latest: mixed, original: mixed}});
-            differentProps[propName] = {
-              original: currentValue,
-              latest: pendingValue,
-            };
-          }
-        }
-      }
-      if (missingProps || extraProps || differentProps) {
-        const latestWarningName = getResourceNameForWarning(
-          resourceType,
-          currentProps,
-          false,
-        );
-
-        let comparisonStatement = '';
-        if (missingProps !== null && typeof missingProps === 'object') {
-          for (const propName in missingProps) {
-            // $FlowFixMe[incompatible-type]
-            comparisonStatement += `\n  ${propName}: missing or null in latest props, "${missingProps[propName]}" in original props`;
-          }
-        }
-        if (extraProps !== null && typeof extraProps === 'object') {
-          for (const propName in extraProps) {
-            // $FlowFixMe[incompatible-type]
-            comparisonStatement += `\n  ${propName}: "${extraProps[propName]}" in latest props, missing or null in original props`;
-          }
-        }
-        if (differentProps !== null && typeof differentProps === 'object') {
-          for (const propName in differentProps) {
-            // $FlowFixMe[incompatible-type]
-            comparisonStatement += `\n  ${propName}: "${differentProps[propName].latest}" in latest props, "${differentProps[propName].original}" in original props`;
-          }
-        }
-        console.error(
-          'A %s with %s "%s" received new props with different values from the props used' +
-            ' when this Resource was first rendered. React will only use the props provided when' +
-            ' this resource was first rendered until a new %s is provided. Unlike conventional' +
-            ' DOM elements, Resources instances do not have a one to one correspondence with Elements' +
-            ' in the DOM and as such, every instance of a Resource for a single Resource identifier' +
-            ' (%s) must have props that agree with each other. The differences are described below.%s',
-          latestWarningName,
-          urlPropKey,
-          currentProps[urlPropKey],
-          urlPropKey,
-          urlPropKey,
-          comparisonStatement,
-        );
-        return true;
-      }
-    }
-  }
-  return false;
-}
-
-export function validateLinkPropsForStyleResource(props: Props): boolean {
+export function validateLinkPropsForStyleResource(props: any): boolean {
   if (__DEV__) {
     // This should only be called when we know we are opting into Resource semantics (i.e. precedence is not null)
     const {href, onLoad, onError, disabled} = props;
-    const allProps = ['onLoad', 'onError', 'disabled'];
     const includedProps = [];
-    if (onLoad) includedProps.push('onLoad');
-    if (onError) includedProps.push('onError');
-    if (disabled != null) includedProps.push('disabled');
+    if (onLoad) includedProps.push('`onLoad`');
+    if (onError) includedProps.push('`onError`');
+    if (disabled != null) includedProps.push('`disabled`');
 
-    const allPropsUnionPhrase = propNamesListJoin(allProps, 'or');
     let includedPropsPhrase = propNamesListJoin(includedProps, 'and');
     includedPropsPhrase += includedProps.length === 1 ? ' prop' : ' props';
+    const withArticlePhrase =
+      includedProps.length === 1
+        ? 'an ' + includedPropsPhrase
+        : 'the ' + includedPropsPhrase;
 
     if (includedProps.length) {
       console.error(
-        'A link (rel="stylesheet") element with href "%s" has the precedence prop but also included the %s.' +
-          ' When using %s React will opt out of Resource behavior. If you meant for this' +
-          ' element to be treated as a Resource remove the %s. Otherwise remove the precedence prop.',
+        'React encountered a <link rel="stylesheet" href="%s" ... /> with a `precedence` prop that' +
+          ' also included %s. The presence of loading and error handlers indicates an intent to manage' +
+          ' the stylesheet loading state from your from your Component code and React will not hoist or' +
+          ' deduplicate this stylesheet. If your intent was to have React hoist and deduplciate this stylesheet' +
+          ' using the `precedence` prop remove the %s, otherwise remove the `precedence` prop.',
         href,
-        includedPropsPhrase,
-        allPropsUnionPhrase,
+        withArticlePhrase,
         includedPropsPhrase,
       );
       return true;
@@ -645,32 +62,6 @@ function propNamesListJoin(
   }
 }
 
-export function validateLinkPropsForPreloadResource(linkProps: any) {
-  if (__DEV__) {
-    const {href, as} = linkProps;
-    if (as === 'font') {
-      const name = getResourceNameForWarning('preload', linkProps, false);
-      if (!hasOwnProperty.call(linkProps, 'crossOrigin')) {
-        console.error(
-          'A %s with href "%s" did not specify the crossOrigin prop. Font preloads must always use' +
-            ' anonymouse CORS mode. To fix add an empty string, "anonymous", or any other string' +
-            ' value except "use-credentials" for the crossOrigin prop of all font preloads.',
-          name,
-          href,
-        );
-      } else if (linkProps.crossOrigin === 'use-credentials') {
-        console.error(
-          'A %s with href "%s" specified a crossOrigin value of "use-credentials". Font preloads must always use' +
-            ' anonymouse CORS mode. To fix use an empty string, "anonymous", or any other string' +
-            ' value except "use-credentials" for the crossOrigin prop of all font preloads.',
-          name,
-          href,
-        );
-      }
-    }
-  }
-}
-
 export function validatePreloadArguments(href: mixed, options: mixed) {
   if (__DEV__) {
     if (!href || typeof href !== 'string') {
@@ -765,24 +156,429 @@ export function validatePreinitArguments(href: mixed, options: mixed) {
   }
 }
 
-function getValueDescriptorExpectingObjectForWarning(thing: any): string {
+export function getValueDescriptorExpectingObjectForWarning(
+  thing: any,
+): string {
   return thing === null
-    ? 'null'
+    ? '`null`'
     : thing === undefined
-    ? 'undefined'
+    ? '`undefined`'
     : thing === ''
     ? 'an empty string'
     : `something with type "${typeof thing}"`;
 }
 
-function getValueDescriptorExpectingEnumForWarning(thing: any): string {
+export function getValueDescriptorExpectingEnumForWarning(thing: any): string {
   return thing === null
-    ? 'null'
+    ? '`null`'
     : thing === undefined
-    ? 'undefined'
+    ? '`undefined`'
     : thing === ''
     ? 'an empty string'
     : typeof thing === 'string'
     ? JSON.stringify(thing)
     : `something with type "${typeof thing}"`;
 }
+
+type PropDifferences = {
+  missing: {
+    [string]: any,
+  },
+  extra: {
+    [string]: any,
+  },
+  different: {
+    [string]: {
+      original: any,
+      latest: any,
+    },
+  },
+};
+function compareResourcePropsForWarning(
+  newProps: any,
+  currentProps: any,
+): null | PropDifferences {
+  if (__DEV__) {
+    let propDiffs: null | PropDifferences = null;
+
+    const allProps = Array.from(
+      new Set(Object.keys(currentProps).concat(Object.keys(newProps))),
+    );
+
+    for (let i = 0; i < allProps.length; i++) {
+      const propName = allProps[i];
+      const newValue = newProps[propName];
+      const currentValue = currentProps[propName];
+      if (
+        newValue !== currentValue &&
+        !(newValue == null && currentValue == null)
+      ) {
+        if (newValue == null) {
+          if (propDiffs === null) {
+            propDiffs = ({
+              missing: {},
+              extra: {},
+              different: {},
+            }: PropDifferences);
+          }
+          propDiffs.missing[propName] = currentValue;
+        } else if (currentValue == null) {
+          if (propDiffs === null) {
+            propDiffs = ({
+              missing: {},
+              extra: {},
+              different: {},
+            }: PropDifferences);
+          }
+          propDiffs.extra[propName] = newValue;
+        } else {
+          if (propDiffs === null) {
+            propDiffs = ({
+              missing: {},
+              extra: {},
+              different: {},
+            }: PropDifferences);
+          }
+          propDiffs.different[propName] = {
+            original: currentValue,
+            latest: newValue,
+          };
+        }
+      }
+    }
+
+    return propDiffs;
+  }
+  return null;
+}
+
+export function describeDifferencesForStylesheets(
+  newProps: any,
+  currentProps: any,
+): string {
+  const diff = compareResourcePropsForWarning(newProps, currentProps);
+  if (!diff) return '';
+
+  let description = '';
+
+  for (const propName in diff.missing) {
+    const propValue = diff.missing[propName];
+    if (propName === 'media') {
+      description += `\n  "${propName}" missing for props, original value: ${getValueDescriptorExpectingEnumForWarning(
+        propValue,
+      )}`;
+    }
+  }
+  for (const propName in diff.extra) {
+    const propValue = diff.extra[propName];
+    description += `\n  "${propName}" prop value: ${getValueDescriptorExpectingEnumForWarning(
+      propValue,
+    )}, missing from original props`;
+  }
+  for (const propName in diff.different) {
+    const latestValue = diff.different[propName].latest;
+    const originalValue = diff.different[propName].original;
+    description += `\n  "${propName}" prop value: ${getValueDescriptorExpectingEnumForWarning(
+      latestValue,
+    )}, original value: ${getValueDescriptorExpectingEnumForWarning(
+      originalValue,
+    )}`;
+  }
+  return description;
+}
+
+export function describeDifferencesForStylesheetOverPreinit(
+  newProps: any,
+  currentProps: any,
+): string {
+  const diff = compareResourcePropsForWarning(newProps, currentProps);
+  if (!diff) return '';
+
+  let description = '';
+
+  for (const propName in diff.extra) {
+    const propValue = diff.extra[propName];
+    if (
+      propName === 'precedence' ||
+      propName === 'crossOrigin' ||
+      propName === 'integrity'
+    ) {
+      description += `\n  "${propName}" prop value: ${getValueDescriptorExpectingEnumForWarning(
+        propValue,
+      )}, option missing`;
+    } else {
+      description += `\n  "${propName}" prop value: ${getValueDescriptorExpectingEnumForWarning(
+        propValue,
+      )}, option not available with ReactDOM.preinit()`;
+    }
+  }
+  for (const propName in diff.different) {
+    const latestValue = diff.different[propName].latest;
+    const originalValue = diff.different[propName].original;
+    if (propName === 'precedence' && originalValue === 'default') {
+      description += `\n  "${propName}" prop value: ${getValueDescriptorExpectingEnumForWarning(
+        latestValue,
+      )}, missing from options`;
+    } else {
+      description += `\n  "${propName}" prop value: ${getValueDescriptorExpectingEnumForWarning(
+        latestValue,
+      )}, option value: ${getValueDescriptorExpectingEnumForWarning(
+        originalValue,
+      )}`;
+    }
+  }
+  return description;
+}
+
+export function describeDifferencesForPreinitOverStylesheet(
+  newProps: any,
+  currentProps: any,
+): string {
+  const diff = compareResourcePropsForWarning(newProps, currentProps);
+  if (!diff) return '';
+
+  let description = '';
+  for (const propName in diff.missing) {
+    const propValue = diff.missing[propName];
+    if (propName === 'precedence' && propValue !== 'default') {
+      description += `\n  "${propName}" missing from options, prop value: ${getValueDescriptorExpectingEnumForWarning(
+        propValue,
+      )}`;
+    }
+  }
+  for (const propName in diff.extra) {
+    const propValue = diff.extra[propName];
+    if (
+      propName === 'precedence' ||
+      propName === 'crossOrigin' ||
+      propName === 'integrity'
+    ) {
+      description += `\n  "${propName}" option value: ${getValueDescriptorExpectingEnumForWarning(
+        propValue,
+      )}, missing from props`;
+    }
+  }
+  for (const propName in diff.different) {
+    const latestValue = diff.different[propName].latest;
+    const originalValue = diff.different[propName].original;
+    description += `\n  "${propName}" option value: ${getValueDescriptorExpectingEnumForWarning(
+      latestValue,
+    )}, prop value: ${getValueDescriptorExpectingEnumForWarning(
+      originalValue,
+    )}`;
+  }
+  return description;
+}
+
+export function describeDifferencesForPreinits(
+  newProps: any,
+  currentProps: any,
+): string {
+  const diff = compareResourcePropsForWarning(newProps, currentProps);
+  if (!diff) return '';
+
+  let description = '';
+  for (const propName in diff.missing) {
+    const propValue = diff.missing[propName];
+    if (propName === 'precedence' && propValue !== 'default') {
+      description += `\n  "${propName}" missing from options, original option value: ${getValueDescriptorExpectingEnumForWarning(
+        propValue,
+      )}`;
+    }
+  }
+  for (const propName in diff.extra) {
+    const propValue = diff.extra[propName];
+    if (
+      (propName === 'precedence' && propValue !== 'default') ||
+      propName === 'crossOrigin' ||
+      propName === 'integrity'
+    ) {
+      description += `\n  "${propName}" option value: ${getValueDescriptorExpectingEnumForWarning(
+        propValue,
+      )}, missing from original options`;
+    }
+  }
+  for (const propName in diff.different) {
+    const latestValue = diff.different[propName].latest;
+    const originalValue = diff.different[propName].original;
+    description += `\n  "${propName}" option value: ${getValueDescriptorExpectingEnumForWarning(
+      latestValue,
+    )}, original option value: ${getValueDescriptorExpectingEnumForWarning(
+      originalValue,
+    )}`;
+  }
+  return description;
+}
+
+const preloadOptionsForComparison = ['as', 'crossOrigin', 'integrity', 'media'];
+
+export function describeDifferencesForPreloads(
+  newProps: any,
+  currentProps: any,
+): string {
+  const diff = compareResourcePropsForWarning(newProps, currentProps);
+  if (!diff) return '';
+
+  let description = '';
+  for (const propName in diff.missing) {
+    const propValue = diff.missing[propName];
+    if (preloadOptionsForComparison.includes(propName)) {
+      description += `\n  "${propName}" missing from options, original option value: ${getValueDescriptorExpectingEnumForWarning(
+        propValue,
+      )}`;
+    }
+  }
+  for (const propName in diff.extra) {
+    const propValue = diff.extra[propName];
+    if (preloadOptionsForComparison.includes(propName)) {
+      description += `\n  "${propName}" option value: ${getValueDescriptorExpectingEnumForWarning(
+        propValue,
+      )}, missing from original options`;
+    }
+  }
+  for (const propName in diff.different) {
+    const latestValue = diff.different[propName].latest;
+    const originalValue = diff.different[propName].original;
+    if (preloadOptionsForComparison.includes(propName)) {
+      description += `\n  "${propName}" option value: ${getValueDescriptorExpectingEnumForWarning(
+        latestValue,
+      )}, original option value: ${getValueDescriptorExpectingEnumForWarning(
+        originalValue,
+      )}`;
+    }
+  }
+  return description;
+}
+
+export function describeDifferencesForPreloadOverImplicitPreload(
+  newProps: any,
+  currentProps: any,
+): string {
+  const diff = compareResourcePropsForWarning(newProps, currentProps);
+  if (!diff) return '';
+
+  let description = '';
+  for (const propName in diff.missing) {
+    const propValue = diff.missing[propName];
+    if (preloadOptionsForComparison.includes(propName)) {
+      description += `\n  "${propName}" missing from options, underlying prop value: ${getValueDescriptorExpectingEnumForWarning(
+        propValue,
+      )}`;
+    }
+  }
+  for (const propName in diff.extra) {
+    const propValue = diff.extra[propName];
+    if (preloadOptionsForComparison.includes(propName)) {
+      description += `\n  "${propName}" option value: ${getValueDescriptorExpectingEnumForWarning(
+        propValue,
+      )}, missing from underlying props`;
+    }
+  }
+  for (const propName in diff.different) {
+    const latestValue = diff.different[propName].latest;
+    const originalValue = diff.different[propName].original;
+    if (preloadOptionsForComparison.includes(propName)) {
+      description += `\n  "${propName}" option value: ${getValueDescriptorExpectingEnumForWarning(
+        latestValue,
+      )}, underlying prop value: ${getValueDescriptorExpectingEnumForWarning(
+        originalValue,
+      )}`;
+    }
+  }
+  return description;
+}
+
+export function describeDifferencesForScripts(
+  newProps: any,
+  currentProps: any,
+): string {
+  const diff = compareResourcePropsForWarning(newProps, currentProps);
+  if (!diff) return '';
+
+  let description = '';
+
+  for (const propName in diff.missing) {
+    const propValue = diff.missing[propName];
+    description += `\n  "${propName}" missing for props, original value: ${getValueDescriptorExpectingEnumForWarning(
+      propValue,
+    )}`;
+  }
+  for (const propName in diff.extra) {
+    const propValue = diff.extra[propName];
+    description += `\n  "${propName}" prop value: ${getValueDescriptorExpectingEnumForWarning(
+      propValue,
+    )}, missing from original props`;
+  }
+  for (const propName in diff.different) {
+    const latestValue = diff.different[propName].latest;
+    const originalValue = diff.different[propName].original;
+    description += `\n  "${propName}" prop value: ${getValueDescriptorExpectingEnumForWarning(
+      latestValue,
+    )}, original value: ${getValueDescriptorExpectingEnumForWarning(
+      originalValue,
+    )}`;
+  }
+  return description;
+}
+
+export function describeDifferencesForScriptOverPreinit(
+  newProps: any,
+  currentProps: any,
+): string {
+  const diff = compareResourcePropsForWarning(newProps, currentProps);
+  if (!diff) return '';
+
+  let description = '';
+
+  for (const propName in diff.extra) {
+    const propValue = diff.extra[propName];
+    if (propName === 'crossOrigin' || propName === 'integrity') {
+      description += `\n  "${propName}" prop value: ${getValueDescriptorExpectingEnumForWarning(
+        propValue,
+      )}, option missing`;
+    } else {
+      description += `\n  "${propName}" prop value: ${getValueDescriptorExpectingEnumForWarning(
+        propValue,
+      )}, option not available with ReactDOM.preinit()`;
+    }
+  }
+  for (const propName in diff.different) {
+    const latestValue = diff.different[propName].latest;
+    const originalValue = diff.different[propName].original;
+    description += `\n  "${propName}" prop value: ${getValueDescriptorExpectingEnumForWarning(
+      latestValue,
+    )}, option value: ${getValueDescriptorExpectingEnumForWarning(
+      originalValue,
+    )}`;
+  }
+  return description;
+}
+
+export function describeDifferencesForPreinitOverScript(
+  newProps: any,
+  currentProps: any,
+): string {
+  const diff = compareResourcePropsForWarning(newProps, currentProps);
+  if (!diff) return '';
+
+  let description = '';
+
+  for (const propName in diff.extra) {
+    const propValue = diff.extra[propName];
+    if (propName === 'crossOrigin' || propName === 'integrity') {
+      description += `\n  "${propName}" option value: ${getValueDescriptorExpectingEnumForWarning(
+        propValue,
+      )}, missing from props`;
+    }
+  }
+  for (const propName in diff.different) {
+    const latestValue = diff.different[propName].latest;
+    const originalValue = diff.different[propName].original;
+    description += `\n  "${propName}" option value: ${getValueDescriptorExpectingEnumForWarning(
+      latestValue,
+    )}, prop value: ${getValueDescriptorExpectingEnumForWarning(
+      originalValue,
+    )}`;
+  }
+  return description;
+}
diff --git a/packages/react-dom/src/__tests__/ReactDOMFizzServer-test.js b/packages/react-dom/src/__tests__/ReactDOMFizzServer-test.js
index bee668529ca04..b80c35fd46534 100644
--- a/packages/react-dom/src/__tests__/ReactDOMFizzServer-test.js
+++ b/packages/react-dom/src/__tests__/ReactDOMFizzServer-test.js
@@ -4608,6 +4608,7 @@ describe('ReactDOMFizzServer', () => {
       expect(div.outerHTML).toEqual(
         '<div id="app-div">hello<b>world, Foo</b>!</div>',
       );
+
       // there may be either:
       //  - an external runtime script and deleted nodes with data attributes
       //  - extra script nodes containing fizz instructions at the end of container
@@ -5014,154 +5015,117 @@ describe('ReactDOMFizzServer', () => {
     });
 
     it('should warn in dev when given an array of length 2 or more', async () => {
-      const originalConsoleError = console.error;
-      const mockError = jest.fn();
-      console.error = (...args) => {
-        if (args.length > 1) {
-          if (typeof args[1] === 'object') {
-            mockError(args[0].split('\n')[0]);
-            return;
-          }
-        }
-        mockError(...args.map(normalizeCodeLocInfo));
-      };
-
-      // a Single string child
       function App() {
         return <title>{['hello1', 'hello2']}</title>;
       }
 
-      try {
-        prepareJSDOMForTitle();
+      prepareJSDOMForTitle();
 
+      await expect(async () => {
         await act(async () => {
           const {pipe} = renderToPipeableStream(<App />);
           pipe(writable);
         });
-        if (__DEV__) {
-          expect(mockError).toHaveBeenCalledWith(
-            'Warning: A title element received an array with more than 1 element as children. ' +
-              'In browsers title Elements can only have Text Nodes as children. If ' +
-              'the children being rendered output more than a single text node in aggregate the browser ' +
-              'will display markup and comments as text in the title and hydration will likely fail and ' +
-              'fall back to client rendering%s',
-            '\n' + '    in title (at **)\n' + '    in App (at **)',
-          );
-        } else {
-          expect(mockError).not.toHaveBeenCalled();
-        }
+      }).toErrorDev([
+        'React expects the `children` prop of <title> tags to be a string, number, or object with a novel `toString` method but found an Array with length 2 instead. Browsers treat all child Nodes of <title> tags as Text content and React expects to be able to convert `children` of <title> tags to a single string value which is why Arrays of length greater than 1 are not supported. When using JSX it can be commong to combine text nodes and value nodes. For example: <title>hello {nameOfUser}</title>. While not immediately apparent, `children` in this case is an Array with length 2. If your `children` prop is using this form try rewriting it using a template string: <title>{`hello ${nameOfUser}`}</title>.',
+      ]);
 
-        if (gate(flags => flags.enableFloat)) {
-          // This title was invalid so it is not emitted
-          expect(getVisibleChildren(container)).toEqual(undefined);
-        } else {
-          expect(getVisibleChildren(container)).toEqual(
-            <title>{'hello1<!-- -->hello2'}</title>,
-          );
-        }
+      if (gate(flags => flags.enableFloat)) {
+        expect(getVisibleChildren(container)).toEqual(<title />);
+      } else {
+        expect(getVisibleChildren(container)).toEqual(
+          <title>{'hello1<!-- -->hello2'}</title>,
+        );
+      }
 
-        const errors = [];
-        ReactDOMClient.hydrateRoot(container, <App />, {
-          onRecoverableError(error) {
-            errors.push(error.message);
-          },
-        });
-        expect(Scheduler).toFlushAndYield([]);
-        if (gate(flags => flags.enableFloat)) {
-          expect(errors).toEqual([]);
-          // with float, the title doesn't render on the client or on the server
-          expect(getVisibleChildren(container)).toEqual(undefined);
-        } else {
-          expect(errors).toEqual(
-            [
-              gate(flags => flags.enableClientRenderFallbackOnTextMismatch)
-                ? 'Text content does not match server-rendered HTML.'
-                : null,
-              'Hydration failed because the initial UI does not match what was rendered on the server.',
-              'There was an error while hydrating. Because the error happened outside of a Suspense boundary, the entire root will switch to client rendering.',
-            ].filter(Boolean),
-          );
-          expect(getVisibleChildren(container)).toEqual(
-            <title>{['hello1', 'hello2']}</title>,
-          );
-        }
-      } finally {
-        console.error = originalConsoleError;
+      const errors = [];
+      ReactDOMClient.hydrateRoot(container, <App />, {
+        onRecoverableError(error) {
+          errors.push(error.message);
+        },
+      });
+      expect(Scheduler).toFlushAndYield([]);
+      if (gate(flags => flags.enableFloat)) {
+        expect(errors).toEqual([]);
+        // with float, the title doesn't render on the client or on the server
+        expect(getVisibleChildren(container)).toEqual(<title />);
+      } else {
+        expect(errors).toEqual(
+          [
+            gate(flags => flags.enableClientRenderFallbackOnTextMismatch)
+              ? 'Text content does not match server-rendered HTML.'
+              : null,
+            'Hydration failed because the initial UI does not match what was rendered on the server.',
+            'There was an error while hydrating. Because the error happened outside of a Suspense boundary, the entire root will switch to client rendering.',
+          ].filter(Boolean),
+        );
+        expect(getVisibleChildren(container)).toEqual(
+          <title>{['hello1', 'hello2']}</title>,
+        );
       }
     });
 
     it('should warn in dev if you pass a React Component as a child to <title>', async () => {
-      const originalConsoleError = console.error;
-      const mockError = jest.fn();
-      console.error = (...args) => {
-        if (args.length > 1) {
-          if (typeof args[1] === 'object') {
-            mockError(args[0].split('\n')[0]);
-            return;
-          }
-        }
-        mockError(...args.map(normalizeCodeLocInfo));
-      };
-
       function IndirectTitle() {
         return 'hello';
       }
 
       function App() {
         return (
-          <title>
-            <IndirectTitle />
-          </title>
+          <>
+            <title>
+              <IndirectTitle />
+            </title>
+          </>
         );
       }
 
-      try {
-        prepareJSDOMForTitle();
+      prepareJSDOMForTitle();
 
-        await act(async () => {
-          const {pipe} = renderToPipeableStream(<App />);
-          pipe(writable);
-        });
-        if (__DEV__) {
-          expect(mockError).toHaveBeenCalledWith(
-            'Warning: A title element received a React element for children. ' +
-              'In the browser title Elements can only have Text Nodes as children. If ' +
-              'the children being rendered output more than a single text node in aggregate the browser ' +
-              'will display markup and comments as text in the title and hydration will likely fail and ' +
-              'fall back to client rendering%s',
-            '\n' + '    in title (at **)\n' + '    in App (at **)',
-          );
-        } else {
-          expect(mockError).not.toHaveBeenCalled();
-        }
+      if (gate(flags => flags.enableFloat)) {
+        await expect(async () => {
+          await act(async () => {
+            const {pipe} = renderToPipeableStream(<App />);
+            pipe(writable);
+          });
+        }).toErrorDev([
+          'React expects the `children` prop of <title> tags to be a string, number, or object with a novel `toString` method but found an object that appears to be a React element which never implements a suitable `toString` method. Browsers treat all child Nodes of <title> tags as Text content and React expects to be able to convert children of <title> tags to a single string value which is why rendering React elements is not supported. If the `children` of <title> is a React Component try moving the <title> tag into that component. If the `children` of <title> is some HTML markup change it to be Text only to be valid HTML.',
+        ]);
+      } else {
+        await expect(async () => {
+          await act(async () => {
+            const {pipe} = renderToPipeableStream(<App />);
+            pipe(writable);
+          });
+        }).toErrorDev([
+          'A title element received a React element for children. In the browser title Elements can only have Text Nodes as children. If the children being rendered output more than a single text node in aggregate the browser will display markup and comments as text in the title and hydration will likely fail and fall back to client rendering',
+        ]);
+      }
 
-        if (gate(flags => flags.enableFloat)) {
-          // object titles are toStringed when float is on
-          expect(getVisibleChildren(container)).toEqual(
-            <title>{'[object Object]'}</title>,
-          );
-        } else {
-          expect(getVisibleChildren(container)).toEqual(<title>hello</title>);
-        }
+      if (gate(flags => flags.enableFloat)) {
+        // object titles are toStringed when float is on
+        expect(getVisibleChildren(container)).toEqual(
+          <title>{'[object Object]'}</title>,
+        );
+      } else {
+        expect(getVisibleChildren(container)).toEqual(<title>hello</title>);
+      }
 
-        const errors = [];
-        ReactDOMClient.hydrateRoot(container, <App />, {
-          onRecoverableError(error) {
-            errors.push(error.message);
-          },
-        });
-        expect(Scheduler).toFlushAndYield([]);
-        expect(errors).toEqual([]);
-        if (gate(flags => flags.enableFloat)) {
-          // object titles are toStringed when float is on
-          expect(getVisibleChildren(container)).toEqual(
-            <title>{'[object Object]'}</title>,
-          );
-        } else {
-          expect(getVisibleChildren(container)).toEqual(<title>hello</title>);
-        }
-      } finally {
-        console.error = originalConsoleError;
+      const errors = [];
+      ReactDOMClient.hydrateRoot(container, <App />, {
+        onRecoverableError(error) {
+          errors.push(error.message);
+        },
+      });
+      expect(Scheduler).toFlushAndYield([]);
+      expect(errors).toEqual([]);
+      if (gate(flags => flags.enableFloat)) {
+        // object titles are toStringed when float is on
+        expect(getVisibleChildren(container)).toEqual(
+          <title>{'[object Object]'}</title>,
+        );
+      } else {
+        expect(getVisibleChildren(container)).toEqual(<title>hello</title>);
       }
     });
 
diff --git a/packages/react-dom/src/__tests__/ReactDOMFizzServerBrowser-test.js b/packages/react-dom/src/__tests__/ReactDOMFizzServerBrowser-test.js
index 20f902de42d1a..f73efe02b987d 100644
--- a/packages/react-dom/src/__tests__/ReactDOMFizzServerBrowser-test.js
+++ b/packages/react-dom/src/__tests__/ReactDOMFizzServerBrowser-test.js
@@ -62,9 +62,15 @@ describe('ReactDOMFizzServerBrowser', () => {
       </html>,
     );
     const result = await readResult(stream);
-    expect(result).toMatchInlineSnapshot(
-      `"<!DOCTYPE html><html><body>hello world</body></html>"`,
-    );
+    if (gate(flags => flags.enableFloat)) {
+      expect(result).toMatchInlineSnapshot(
+        `"<!DOCTYPE html><html><head></head><body>hello world</body></html>"`,
+      );
+    } else {
+      expect(result).toMatchInlineSnapshot(
+        `"<!DOCTYPE html><html><body>hello world</body></html>"`,
+      );
+    }
   });
 
   it('should emit bootstrap script src at the end', async () => {
diff --git a/packages/react-dom/src/__tests__/ReactDOMFizzServerNode-test.js b/packages/react-dom/src/__tests__/ReactDOMFizzServerNode-test.js
index 594da3e2ec3f3..2f0d5bb98ce00 100644
--- a/packages/react-dom/src/__tests__/ReactDOMFizzServerNode-test.js
+++ b/packages/react-dom/src/__tests__/ReactDOMFizzServerNode-test.js
@@ -73,9 +73,16 @@ describe('ReactDOMFizzServerNode', () => {
     );
     pipe(writable);
     jest.runAllTimers();
-    expect(output.result).toMatchInlineSnapshot(
-      `"<!DOCTYPE html><html><body>hello world</body></html>"`,
-    );
+    if (gate(flags => flags.enableFloat)) {
+      // with Float, we emit empty heads if they are elided when rendering <html>
+      expect(output.result).toMatchInlineSnapshot(
+        `"<!DOCTYPE html><html><head></head><body>hello world</body></html>"`,
+      );
+    } else {
+      expect(output.result).toMatchInlineSnapshot(
+        `"<!DOCTYPE html><html><body>hello world</body></html>"`,
+      );
+    }
   });
 
   it('should emit bootstrap script src at the end', () => {
diff --git a/packages/react-dom/src/__tests__/ReactDOMFizzStaticBrowser-test.js b/packages/react-dom/src/__tests__/ReactDOMFizzStaticBrowser-test.js
index 13b96d893d381..dc15ddc58aabf 100644
--- a/packages/react-dom/src/__tests__/ReactDOMFizzStaticBrowser-test.js
+++ b/packages/react-dom/src/__tests__/ReactDOMFizzStaticBrowser-test.js
@@ -64,9 +64,15 @@ describe('ReactDOMFizzStaticBrowser', () => {
       </html>,
     );
     const prelude = await readContent(result.prelude);
-    expect(prelude).toMatchInlineSnapshot(
-      `"<!DOCTYPE html><html><body>hello world</body></html>"`,
-    );
+    if (gate(flags => flags.enableFloat)) {
+      expect(prelude).toMatchInlineSnapshot(
+        `"<!DOCTYPE html><html><head></head><body>hello world</body></html>"`,
+      );
+    } else {
+      expect(prelude).toMatchInlineSnapshot(
+        `"<!DOCTYPE html><html><body>hello world</body></html>"`,
+      );
+    }
   });
 
   // @gate experimental
diff --git a/packages/react-dom/src/__tests__/ReactDOMFizzStaticNode-test.js b/packages/react-dom/src/__tests__/ReactDOMFizzStaticNode-test.js
index cbf822eb6286b..c17d08fb033a6 100644
--- a/packages/react-dom/src/__tests__/ReactDOMFizzStaticNode-test.js
+++ b/packages/react-dom/src/__tests__/ReactDOMFizzStaticNode-test.js
@@ -63,9 +63,15 @@ describe('ReactDOMFizzStaticNode', () => {
       </html>,
     );
     const prelude = await readContent(result.prelude);
-    expect(prelude).toMatchInlineSnapshot(
-      `"<!DOCTYPE html><html><body>hello world</body></html>"`,
-    );
+    if (gate(flags => flags.enableFloat)) {
+      expect(prelude).toMatchInlineSnapshot(
+        `"<!DOCTYPE html><html><head></head><body>hello world</body></html>"`,
+      );
+    } else {
+      expect(prelude).toMatchInlineSnapshot(
+        `"<!DOCTYPE html><html><body>hello world</body></html>"`,
+      );
+    }
   });
 
   // @gate experimental
diff --git a/packages/react-dom/src/__tests__/ReactDOMFloat-test.js b/packages/react-dom/src/__tests__/ReactDOMFloat-test.js
index 6547059341863..5f59f81731eb4 100644
--- a/packages/react-dom/src/__tests__/ReactDOMFloat-test.js
+++ b/packages/react-dom/src/__tests__/ReactDOMFloat-test.js
@@ -39,6 +39,14 @@ function resetJSDOM(markup) {
   const jsdom = new JSDOM(markup, {
     runScripts: 'dangerously',
   });
+  // We mock matchMedia. for simplicity it only matches 'all' or '' and misses everything else
+  Object.defineProperty(jsdom.window, 'matchMedia', {
+    writable: true,
+    value: jest.fn().mockImplementation(query => ({
+      matches: query === 'all' || query === '',
+      media: query,
+    })),
+  });
   window = jsdom.window;
   document = jsdom.window.document;
 }
@@ -80,21 +88,6 @@ describe('ReactDOMFloat', () => {
     }
   });
 
-  function normalizeCodeLocInfo(str) {
-    return (
-      typeof str === 'string' &&
-      str.replace(/\n +(?:at|in) ([\S]+)[^\n]*/g, function (m, name) {
-        return '\n    in ' + name + ' (at **)';
-      })
-    );
-  }
-
-  function componentStack(components) {
-    return components
-      .map(component => `\n    in ${component} (at **)`)
-      .join('');
-  }
-
   async function act(callback) {
     await callback();
     // Await one turn around the event loop.
@@ -196,6 +189,11 @@ describe('ReactDOMFloat', () => {
       : children;
   }
 
+  function BlockedOn({value, children}) {
+    readText(value);
+    return children;
+  }
+
   function resolveText(text) {
     const record = textCache.get(text);
     if (record === undefined) {
@@ -257,6 +255,19 @@ describe('ReactDOMFloat', () => {
     );
   }
 
+  function renderSafelyAndExpect(root, children) {
+    root.render(children);
+    return expect(() => {
+      try {
+        expect(Scheduler).toFlushWithoutYielding();
+      } catch (e) {
+        try {
+          expect(Scheduler).toFlushWithoutYielding();
+        } catch (f) {}
+      }
+    });
+  }
+
   // @gate enableFloat
   it('can render resources before singletons', async () => {
     const root = ReactDOMClient.createRoot(document);
@@ -290,19 +301,6 @@ describe('ReactDOMFloat', () => {
     );
   });
 
-  function renderSafelyAndExpect(root, children) {
-    root.render(children);
-    return expect(() => {
-      try {
-        expect(Scheduler).toFlushWithoutYielding();
-      } catch (e) {
-        try {
-          expect(Scheduler).toFlushWithoutYielding();
-        } catch (f) {}
-      }
-    });
-  }
-
   // @gate enableFloat
   it('can hydrate non Resources in head when Resources are also inserted there', async () => {
     await actIntoEmptyDocument(() => {
@@ -326,11 +324,12 @@ describe('ReactDOMFloat', () => {
     expect(getMeaningfulChildren(document)).toEqual(
       <html>
         <head>
-          <base target="foo" href="bar" />
           <link rel="preload" href="foo" as="script" />
           <meta property="foo" content="bar" />
           <title>foo</title>
+          <link rel="foo" href="bar" />
           <noscript>&lt;link rel="icon" href="icon"/&gt;</noscript>
+          <base target="foo" href="bar" />
         </head>
         <body>foo</body>
       </html>,
@@ -356,12 +355,13 @@ describe('ReactDOMFloat', () => {
     expect(getMeaningfulChildren(document)).toEqual(
       <html>
         <head>
-          <base target="foo" href="bar" />
           <link rel="preload" href="foo" as="script" />
           <meta property="foo" content="bar" />
           <title>foo</title>
           <link rel="foo" href="bar" />
+          <link rel="foo" href="bar" />
           <noscript>&lt;link rel="icon" href="icon"/&gt;</noscript>
+          <base target="foo" href="bar" />
           <script async="" src="foo" />
         </head>
         <body>foo</body>
@@ -407,7 +407,7 @@ describe('ReactDOMFloat', () => {
         <style>foo</style>
       </html>,
     ).toErrorDev([
-      'Cannot render <style> outside the main document. Try moving it into the root <head> tag.',
+      'Cannot render a <style> outside the main document without knowing its precedence and a unique href key. React can hoist and deduplicate <style> tags if you provide a `precedence` prop along with an `href` prop that does not conflic with the `href` values used in any other hoisted <style> or <link rel="stylesheet" ...> tags.  Note that hoisting <style> tags is considered an advanced feature that most will not use directly. Consider moving the <style> tag to the <head> or consider adding a `precedence="default"` and `href="some unique resource identifier"`, or move the <style> to the <style> tag.',
       'Warning: validateDOMNesting(...): <style> cannot appear as a child of <html>.',
     ]);
 
@@ -473,14 +473,14 @@ describe('ReactDOMFloat', () => {
     const root = ReactDOMClient.createRoot(container);
     root.render(
       <>
-        <title>foo</title>
+        <script async={true} src="foo" />
       </>,
     );
     expect(Scheduler).toFlushWithoutYielding();
     expect(getMeaningfulChildren(document)).toEqual(
       <html>
         <head>
-          <title>foo</title>
+          <script async="" src="foo" />
         </head>
         <body>
           <div id="container" />
@@ -488,11 +488,10 @@ describe('ReactDOMFloat', () => {
       </html>,
     );
 
-    // title is keyed off children so this second resource should match the first one
     root.render(
       <>
         {null}
-        <title data-new="new">foo</title>
+        <script data-new="new" async={true} src="foo" />
       </>,
     );
     expect(Scheduler).toFlushWithoutYielding();
@@ -500,7 +499,7 @@ describe('ReactDOMFloat', () => {
     expect(getMeaningfulChildren(document)).toEqual(
       <html>
         <head>
-          <title>foo</title>
+          <script async="" src="foo" />
         </head>
         <body>
           <div id="container" />
@@ -509,25 +508,6 @@ describe('ReactDOMFloat', () => {
     );
   });
 
-  // @gate enableFloat
-  it('errors if the document does not contain a head when inserting a resource', async () => {
-    document.head.parentNode.removeChild(document.head);
-    const root = ReactDOMClient.createRoot(document);
-    root.render(
-      <html>
-        <body>
-          <link rel="stylesheet" href="foo" precedence="default" />
-          foo
-        </body>
-      </html>,
-    );
-    expect(() => {
-      expect(Scheduler).toFlushWithoutYielding();
-    }).toThrow(
-      'While attempting to insert a Resource, React expected the Document to contain a head element but it was not found.',
-    );
-  });
-
   // @gate enableFloat
   it('emits resources before everything else when rendering with no head', async () => {
     function App() {
@@ -583,7 +563,7 @@ describe('ReactDOMFloat', () => {
   });
 
   // @gate enableFloat
-  it('does not emit closing tags in out of order position when rendering a non-void resource type', async () => {
+  it('emits an implicit <head> element to hold resources when none is rendered but an <html> is rendered', async () => {
     const chunks = [];
 
     writable.on('data', chunk => {
@@ -603,7 +583,7 @@ describe('ReactDOMFloat', () => {
       pipe(writable);
     });
     expect(chunks).toEqual([
-      '<!DOCTYPE html><html><script async="" src="foo"></script><title>foo</title><body>bar',
+      '<!DOCTYPE html><html><head><script async="" src="foo"></script><title>foo</title></head><body>bar',
       '</body></html>',
     ]);
   });
@@ -642,5295 +622,4159 @@ describe('ReactDOMFloat', () => {
     ).toEqual(['<script src="src-of-external-runtime" async=""></script>']);
   });
 
-  describe('HostResource', () => {
-    // @gate enableFloat
-    it('warns when you update props to an invalid type', async () => {
-      const root = ReactDOMClient.createRoot(container);
-      root.render(
-        <div>
-          <link rel="stylesheet" href="foo" precedence="foo" />
-          <link rel="stylesheet" href="bar" precedence="foo" />
-        </div>,
-      );
-      expect(Scheduler).toFlushWithoutYielding();
-      root.render(
-        <div>
-          <link rel={() => {}} href="bar" />
-          <link rel="foo" href={() => {}} />
-        </div>,
-      );
-      expect(() => {
-        expect(Scheduler).toFlushWithoutYielding();
-      }).toErrorDev([
-        'Warning: A <link> previously rendered as a Resource with href "foo" with rel ""stylesheet"" but was updated with an invalid rel: something with type "function". When a link does not have a valid rel prop it is not represented in the DOM. If this is intentional, instead do not render the <link> anymore.',
-        'Warning: A <link> previously rendered as a Resource with href "bar" but was updated with an invalid href prop: something with type "function". When a link does not have a valid href prop it is not represented in the DOM. If this is intentional, instead do not render the <link> anymore.',
-      ]);
-      expect(getMeaningfulChildren(document)).toEqual(
+  // @gate enableFloat
+  it('can avoid inserting a late stylesheet if it already rendered on the client', async () => {
+    await actIntoEmptyDocument(() => {
+      renderToPipeableStream(
         <html>
-          <head>
-            <link rel="stylesheet" href="foo" data-precedence="foo" />
-            <link rel="stylesheet" href="bar" data-precedence="foo" />
-            <link rel="preload" as="style" href="foo" />
-            <link rel="preload" as="style" href="bar" />
-          </head>
           <body>
-            <div id="container">
-              <div />
-            </div>
+            <Suspense fallback="loading foo...">
+              <BlockedOn value="foo">
+                <link rel="stylesheet" href="foo" precedence="foo" />
+                foo
+              </BlockedOn>
+            </Suspense>
+            <Suspense fallback="loading bar...">
+              <BlockedOn value="bar">
+                <link rel="stylesheet" href="bar" precedence="bar" />
+                bar
+              </BlockedOn>
+            </Suspense>
           </body>
         </html>,
-      );
+      ).pipe(writable);
     });
-  });
 
-  describe('ReactDOM.preload', () => {
-    // @gate enableFloat
-    it('inserts a preload resource into the stream when called during server rendering', async () => {
-      function Component() {
-        ReactDOM.preload('foo', {as: 'style'});
-        return 'foo';
-      }
-      await actIntoEmptyDocument(() => {
-        const {pipe} = renderToPipeableStream(
-          <html>
-            <head />
-            <body>
-              <Component />
-            </body>
-          </html>,
-        );
-        pipe(writable);
-      });
-      expect(getMeaningfulChildren(document)).toEqual(
-        <html>
-          <head>
-            <link rel="preload" as="style" href="foo" />
-          </head>
-          <body>foo</body>
-        </html>,
+    expect(getMeaningfulChildren(document)).toEqual(
+      <html>
+        <head />
+        <body>
+          {'loading foo...'}
+          {'loading bar...'}
+        </body>
+      </html>,
+    );
+
+    ReactDOMClient.hydrateRoot(
+      document,
+      <html>
+        <body>
+          <link rel="stylesheet" href="foo" precedence="foo" />
+          <Suspense fallback="loading foo...">
+            <link rel="stylesheet" href="foo" precedence="foo" />
+            foo
+          </Suspense>
+          <Suspense fallback="loading bar...">
+            <link rel="stylesheet" href="bar" precedence="bar" />
+            bar
+          </Suspense>
+        </body>
+      </html>,
+    );
+    expect(Scheduler).toFlushWithoutYielding();
+    expect(getMeaningfulChildren(document)).toEqual(
+      <html>
+        <head>
+          <link rel="stylesheet" href="foo" data-precedence="foo" />
+          <link as="style" href="foo" rel="preload" />
+        </head>
+        <body>
+          {'loading foo...'}
+          {'loading bar...'}
+        </body>
+      </html>,
+    );
+
+    await act(() => {
+      resolveText('bar');
+    });
+    await act(() => {
+      const sheets = document.querySelectorAll(
+        'link[rel="stylesheet"][data-precedence]',
       );
+      const event = document.createEvent('Event');
+      event.initEvent('load', true, true);
+      for (let i = 0; i < sheets.length; i++) {
+        sheets[i].dispatchEvent(event);
+      }
     });
+    expect(getMeaningfulChildren(document)).toEqual(
+      <html>
+        <head>
+          <link rel="stylesheet" href="foo" data-precedence="foo" />
+          <link rel="stylesheet" href="bar" data-precedence="bar" />
+          <link as="style" href="foo" rel="preload" />
+        </head>
+        <body>
+          {'loading foo...'}
+          {'bar'}
+          <link as="style" href="bar" rel="preload" />
+        </body>
+      </html>,
+    );
 
-    // @gate enableFloat
-    it('inserts a preload resource into the document during render when called during client rendering', async () => {
-      function Component() {
-        ReactDOM.preload('foo', {as: 'style'});
-        return 'foo';
-      }
-      const root = ReactDOMClient.createRoot(container);
-      root.render(<Component />);
-      expect(Scheduler).toFlushWithoutYielding();
-      expect(getMeaningfulChildren(document)).toEqual(
-        <html>
-          <head>
-            <link rel="preload" as="style" href="foo" />
-          </head>
-          <body>
-            <div id="container">foo</div>
-          </body>
-        </html>,
+    await act(() => {
+      resolveText('foo');
+    });
+    await act(() => {
+      const sheets = document.querySelectorAll(
+        'link[rel="stylesheet"][data-precedence]',
       );
+      const event = document.createEvent('Event');
+      event.initEvent('load', true, true);
+      for (let i = 0; i < sheets.length; i++) {
+        sheets[i].dispatchEvent(event);
+      }
     });
+    expect(getMeaningfulChildren(document)).toEqual(
+      <html>
+        <head>
+          <link rel="stylesheet" href="foo" data-precedence="foo" />
+          <link rel="stylesheet" href="bar" data-precedence="bar" />
+          <link as="style" href="foo" rel="preload" />
+        </head>
+        <body>
+          {'foo'}
+          {'bar'}
+          <link as="style" href="bar" rel="preload" />
+          <link as="style" href="foo" rel="preload" />
+        </body>
+      </html>,
+    );
+  });
 
-    // @gate enableFloat
-    it('inserts a preload resource when called in a layout effect', async () => {
-      function App() {
-        React.useLayoutEffect(() => {
-          ReactDOM.preload('foo', {as: 'style'});
-        }, []);
-        return 'foobar';
-      }
-      const root = ReactDOMClient.createRoot(container);
-      root.render(<App />);
-      expect(Scheduler).toFlushWithoutYielding();
+  // @gate enableFloat
+  it('can hoist <link rel="stylesheet" .../> and <style /> tags together, respecting order of discovery', async () => {
+    const css = `
+body {
+  background-color: red;
+}`;
 
-      expect(getMeaningfulChildren(document)).toEqual(
+    await actIntoEmptyDocument(() => {
+      renderToPipeableStream(
         <html>
-          <head>
-            <link rel="preload" as="style" href="foo" />
-          </head>
           <body>
-            <div id="container">foobar</div>
+            <link rel="stylesheet" href="one1" precedence="one" />
+            <style href="two1" precedence="two">
+              {css}
+            </style>
+            <link rel="stylesheet" href="three1" precedence="three" />
+            <style href="four1" precedence="four">
+              {css}
+            </style>
+            <Suspense>
+              <BlockedOn value="block">
+                <link rel="stylesheet" href="one2" precedence="one" />
+                <link rel="stylesheet" href="two2" precedence="two" />
+                <style href="three2" precedence="three">
+                  {css}
+                </style>
+                <style href="four2" precedence="four">
+                  {css}
+                </style>
+                <link rel="stylesheet" href="five1" precedence="five" />
+              </BlockedOn>
+            </Suspense>
+            <Suspense>
+              <BlockedOn value="block2">
+                <style href="one3" precedence="one">
+                  {css}
+                </style>
+                <style href="two3" precedence="two">
+                  {css}
+                </style>
+                <link rel="stylesheet" href="three3" precedence="three" />
+                <link rel="stylesheet" href="four3" precedence="four" />
+                <style href="six1" precedence="six">
+                  {css}
+                </style>
+              </BlockedOn>
+            </Suspense>
+            <Suspense>
+              <BlockedOn value="block again">
+                <link rel="stylesheet" href="one2" precedence="one" />
+                <link rel="stylesheet" href="two2" precedence="two" />
+                <style href="three2" precedence="three">
+                  {css}
+                </style>
+                <style href="four2" precedence="four">
+                  {css}
+                </style>
+                <link rel="stylesheet" href="five1" precedence="five" />
+              </BlockedOn>
+            </Suspense>
           </body>
         </html>,
-      );
+      ).pipe(writable);
     });
 
-    // @gate enableFloat
-    it('inserts a preload resource when called in a passive effect', async () => {
-      function App() {
-        React.useEffect(() => {
-          ReactDOM.preload('foo', {as: 'style'});
-        }, []);
-        return 'foobar';
-      }
-      const root = ReactDOMClient.createRoot(container);
-      root.render(<App />);
-      expect(Scheduler).toFlushWithoutYielding();
+    expect(getMeaningfulChildren(document)).toEqual(
+      <html>
+        <head>
+          <link rel="stylesheet" href="one1" data-precedence="one" />
+          <style data-href="two1" data-precedence="two">
+            {css}
+          </style>
+          <link rel="stylesheet" href="three1" data-precedence="three" />
+          <style data-href="four1" data-precedence="four">
+            {css}
+          </style>
+        </head>
+        <body />
+      </html>,
+    );
 
-      expect(getMeaningfulChildren(document)).toEqual(
-        <html>
-          <head>
-            <link rel="preload" as="style" href="foo" />
-          </head>
-          <body>
-            <div id="container">foobar</div>
-          </body>
-        </html>,
-      );
+    await act(() => {
+      resolveText('block');
     });
 
-    // @gate enableFloat
-    it('inserts a preload resource when called in module scope if a root has already been created', async () => {
-      // The requirement that a root be created has to do with bootstrapping the dispatcher.
-      // We are intentionally avoiding setting it to the default via import due to cycles and
-      // we are trying to avoid doing a mutable initailation in module scope.
-      ReactDOM.preload('foo', {as: 'style'});
-      ReactDOMClient.createRoot(container);
-      ReactDOM.preload('bar', {as: 'style'});
-      // We need to use global.document because preload falls back
-      // to the window.document global when no other documents have been used
-      // The way the JSDOM runtim is created for these tests the local document
-      // global does not point to the global.document
-      expect(getMeaningfulChildren(global.document)).toEqual(
-        <html>
-          <head>
-            <link rel="preload" as="style" href="bar" />
-          </head>
-          <body />
-        </html>,
-      );
+    expect(getMeaningfulChildren(document)).toEqual(
+      <html>
+        <head>
+          <link rel="stylesheet" href="one1" data-precedence="one" />
+          <link rel="stylesheet" href="one2" data-precedence="one" />
+          <style data-href="two1" data-precedence="two">
+            {css}
+          </style>
+          <link rel="stylesheet" href="two2" data-precedence="two" />
+          <link rel="stylesheet" href="three1" data-precedence="three" />
+          <style data-href="three2" data-precedence="three">
+            {css}
+          </style>
+          <style data-href="four1" data-precedence="four">
+            {css}
+          </style>
+          <style data-href="four2" data-precedence="four">
+            {css}
+          </style>
+          <link rel="stylesheet" href="five1" data-precedence="five" />
+        </head>
+        <body>
+          <link rel="preload" href="one2" as="style" />
+          <link rel="preload" href="two2" as="style" />
+          <link rel="preload" href="five1" as="style" />
+        </body>
+      </html>,
+    );
+
+    await act(() => {
+      resolveText('block2');
     });
 
-    // @gate enableFloat
-    it('supports script preloads', async () => {
-      function ServerApp() {
-        ReactDOM.preload('foo', {as: 'script', integrity: 'foo hash'});
-        ReactDOM.preload('bar', {
-          as: 'script',
-          crossOrigin: 'use-credentials',
-          integrity: 'bar hash',
-        });
-        return (
-          <html>
-            <link rel="preload" href="baz" as="script" />
-            <head>
-              <title>hi</title>
-            </head>
-            <body>foo</body>
-          </html>
-        );
-      }
-      function ClientApp() {
-        ReactDOM.preload('foo', {as: 'script', integrity: 'foo hash'});
-        ReactDOM.preload('qux', {as: 'script'});
-        return (
-          <html>
-            <head>
-              <title>hi</title>
-            </head>
-            <body>foo</body>
-            <link
-              rel="preload"
-              href="quux"
-              as="script"
-              crossOrigin=""
-              integrity="quux hash"
-            />
-          </html>
-        );
-      }
+    expect(getMeaningfulChildren(document)).toEqual(
+      <html>
+        <head>
+          <link rel="stylesheet" href="one1" data-precedence="one" />
+          <link rel="stylesheet" href="one2" data-precedence="one" />
+          <style data-href="one3" data-precedence="one">
+            {css}
+          </style>
+          <style data-href="two1" data-precedence="two">
+            {css}
+          </style>
+          <link rel="stylesheet" href="two2" data-precedence="two" />
+          <style data-href="two3" data-precedence="two">
+            {css}
+          </style>
+          <link rel="stylesheet" href="three1" data-precedence="three" />
+          <style data-href="three2" data-precedence="three">
+            {css}
+          </style>
+          <link rel="stylesheet" href="three3" data-precedence="three" />
+          <style data-href="four1" data-precedence="four">
+            {css}
+          </style>
+          <style data-href="four2" data-precedence="four">
+            {css}
+          </style>
+          <link rel="stylesheet" href="four3" data-precedence="four" />
+          <link rel="stylesheet" href="five1" data-precedence="five" />
+          <style data-href="six1" data-precedence="six">
+            {css}
+          </style>
+        </head>
+        <body>
+          <link rel="preload" href="one2" as="style" />
+          <link rel="preload" href="two2" as="style" />
+          <link rel="preload" href="five1" as="style" />
+          <link rel="preload" href="three3" as="style" />
+          <link rel="preload" href="four3" as="style" />
+        </body>
+      </html>,
+    );
 
-      await actIntoEmptyDocument(() => {
-        const {pipe} = renderToPipeableStream(<ServerApp />);
-        pipe(writable);
-      });
-      expect(getMeaningfulChildren(document)).toEqual(
-        <html>
-          <head>
-            <link rel="preload" as="script" href="foo" integrity="foo hash" />
-            <link
-              rel="preload"
-              as="script"
-              href="bar"
-              crossorigin="use-credentials"
-              integrity="bar hash"
-            />
-            <link rel="preload" as="script" href="baz" />
-            <title>hi</title>
-          </head>
-          <body>foo</body>
-        </html>,
-      );
+    await act(() => {
+      resolveText('block again');
+    });
 
-      ReactDOMClient.hydrateRoot(document, <ClientApp />);
-      expect(Scheduler).toFlushWithoutYielding();
+    expect(getMeaningfulChildren(document)).toEqual(
+      <html>
+        <head>
+          <link rel="stylesheet" href="one1" data-precedence="one" />
+          <link rel="stylesheet" href="one2" data-precedence="one" />
+          <style data-href="one3" data-precedence="one">
+            {css}
+          </style>
+          <style data-href="two1" data-precedence="two">
+            {css}
+          </style>
+          <link rel="stylesheet" href="two2" data-precedence="two" />
+          <style data-href="two3" data-precedence="two">
+            {css}
+          </style>
+          <link rel="stylesheet" href="three1" data-precedence="three" />
+          <style data-href="three2" data-precedence="three">
+            {css}
+          </style>
+          <link rel="stylesheet" href="three3" data-precedence="three" />
+          <style data-href="four1" data-precedence="four">
+            {css}
+          </style>
+          <style data-href="four2" data-precedence="four">
+            {css}
+          </style>
+          <link rel="stylesheet" href="four3" data-precedence="four" />
+          <link rel="stylesheet" href="five1" data-precedence="five" />
+          <style data-href="six1" data-precedence="six">
+            {css}
+          </style>
+        </head>
+        <body>
+          <link rel="preload" href="one2" as="style" />
+          <link rel="preload" href="two2" as="style" />
+          <link rel="preload" href="five1" as="style" />
+          <link rel="preload" href="three3" as="style" />
+          <link rel="preload" href="four3" as="style" />
+        </body>
+      </html>,
+    );
 
-      expect(getMeaningfulChildren(document)).toEqual(
-        <html>
-          <head>
-            <link rel="preload" as="script" href="foo" integrity="foo hash" />
-            <link
-              rel="preload"
-              as="script"
-              href="bar"
-              crossorigin="use-credentials"
-              integrity="bar hash"
-            />
-            <link rel="preload" as="script" href="baz" />
-            <title>hi</title>
-            <link rel="preload" as="script" href="qux" />
-            <link
-              rel="preload"
-              as="script"
-              href="quux"
-              crossorigin=""
-              integrity="quux hash"
-            />
-          </head>
-          <body>foo</body>
-        </html>,
-      );
-    });
-  });
+    ReactDOMClient.hydrateRoot(
+      document,
+      <html>
+        <body>
+          <link rel="stylesheet" href="one4" precedence="one" />
+          <style href="two4" precedence="two">
+            {css}
+          </style>
+          <link rel="stylesheet" href="three4" precedence="three" />
+          <style href="four4" precedence="four">
+            {css}
+          </style>
+          <link rel="stylesheet" href="seven1" precedence="seven" />
+          <style href="eight1" precedence="eight">
+            {css}
+          </style>
+        </body>
+      </html>,
+    );
+    expect(Scheduler).toFlushWithoutYielding();
 
-  describe('ReactDOM.preinit as style', () => {
-    // @gate enableFloat
-    it('creates a style Resource when called during server rendering before first flush', async () => {
-      function Component() {
-        ReactDOM.preinit('foo', {as: 'style'});
-        return 'foo';
-      }
-      await actIntoEmptyDocument(() => {
-        const {pipe} = renderToPipeableStream(
-          <html>
-            <head />
-            <body>
-              <Component />
-            </body>
-          </html>,
-        );
-        pipe(writable);
-      });
-      expect(getMeaningfulChildren(document)).toEqual(
-        <html>
-          <head>
-            <link rel="stylesheet" href="foo" data-precedence="default" />
-          </head>
-          <body>foo</body>
-        </html>,
-      );
-    });
+    expect(getMeaningfulChildren(document)).toEqual(
+      <html>
+        <head>
+          <link rel="stylesheet" href="one1" data-precedence="one" />
+          <link rel="stylesheet" href="one2" data-precedence="one" />
+          <style data-href="one3" data-precedence="one">
+            {css}
+          </style>
+          <link rel="stylesheet" href="one4" data-precedence="one" />
+          <style data-href="two1" data-precedence="two">
+            {css}
+          </style>
+          <link rel="stylesheet" href="two2" data-precedence="two" />
+          <style data-href="two3" data-precedence="two">
+            {css}
+          </style>
+          <style data-href="two4" data-precedence="two">
+            {css}
+          </style>
+          <link rel="stylesheet" href="three1" data-precedence="three" />
+          <style data-href="three2" data-precedence="three">
+            {css}
+          </style>
+          <link rel="stylesheet" href="three3" data-precedence="three" />
+          <link rel="stylesheet" href="three4" data-precedence="three" />
+          <style data-href="four1" data-precedence="four">
+            {css}
+          </style>
+          <style data-href="four2" data-precedence="four">
+            {css}
+          </style>
+          <link rel="stylesheet" href="four3" data-precedence="four" />
+          <style data-href="four4" data-precedence="four">
+            {css}
+          </style>
+          <link rel="stylesheet" href="five1" data-precedence="five" />
+          <style data-href="six1" data-precedence="six">
+            {css}
+          </style>
+          <link rel="stylesheet" href="seven1" data-precedence="seven" />
+          <style data-href="eight1" data-precedence="eight">
+            {css}
+          </style>
+          <link rel="preload" href="one4" as="style" />
+          <link rel="preload" href="three4" as="style" />
+          <link rel="preload" href="seven1" as="style" />
+        </head>
+        <body>
+          <link rel="preload" href="one2" as="style" />
+          <link rel="preload" href="two2" as="style" />
+          <link rel="preload" href="five1" as="style" />
+          <link rel="preload" href="three3" as="style" />
+          <link rel="preload" href="four3" as="style" />
+        </body>
+      </html>,
+    );
+  });
 
-    // @gate enableFloat
-    it('creates a preload Resource when called during server rendering after first flush', async () => {
-      function BlockedOn({text, children}) {
-        readText(text);
-        return children;
-      }
-      function Component() {
-        ReactDOM.preinit('foo', {as: 'style', precedence: 'foo'});
-        return 'foo';
-      }
-      await actIntoEmptyDocument(() => {
-        const {pipe} = renderToPipeableStream(
-          <html>
-            <head />
-            <body>
-              <Suspense fallback="loading...">
-                <BlockedOn text="unblock">
-                  <Component />
-                </BlockedOn>
-              </Suspense>
-            </body>
-          </html>,
-        );
-        pipe(writable);
-      });
-      await act(() => {
-        resolveText('unblock');
-      });
-      expect(getMeaningfulChildren(document)).toEqual(
+  // @gate enableFloat
+  it('client renders a boundary if a style Resource dependency fails to load', async () => {
+    function App() {
+      return (
         <html>
           <head />
           <body>
-            foo
-            <link rel="preload" as="style" href="foo" />
+            <Suspense fallback="loading...">
+              <BlockedOn value="unblock">
+                <link rel="stylesheet" href="foo" precedence="arbitrary" />
+                <link rel="stylesheet" href="bar" precedence="arbitrary" />
+                Hello
+              </BlockedOn>
+            </Suspense>
           </body>
-        </html>,
+        </html>
       );
+    }
+    await actIntoEmptyDocument(() => {
+      const {pipe} = renderToPipeableStream(<App />);
+      pipe(writable);
     });
 
-    // @gate enableFloat
-    it('inserts a style Resource into the document during render when called during client rendering', async () => {
-      function Component() {
-        ReactDOM.preinit('foo', {as: 'style', precedence: 'foo'});
-        return 'foo';
-      }
-      const root = ReactDOMClient.createRoot(container);
-      root.render(<Component />);
-      expect(Scheduler).toFlushWithoutYielding();
-      expect(getMeaningfulChildren(document)).toEqual(
-        <html>
-          <head>
-            <link rel="stylesheet" href="foo" data-precedence="foo" />
-          </head>
-          <body>
-            <div id="container">foo</div>
-          </body>
-        </html>,
+    await act(() => {
+      resolveText('unblock');
+    });
+
+    expect(getMeaningfulChildren(document)).toEqual(
+      <html>
+        <head>
+          <link rel="stylesheet" href="foo" data-precedence="arbitrary" />
+          <link rel="stylesheet" href="bar" data-precedence="arbitrary" />
+        </head>
+        <body>
+          loading...
+          <link rel="preload" href="foo" as="style" />
+          <link rel="preload" href="bar" as="style" />
+        </body>
+      </html>,
+    );
+
+    await act(() => {
+      const barLink = document.querySelector(
+        'link[rel="stylesheet"][href="bar"]',
       );
+      const event = document.createEvent('Events');
+      event.initEvent('error', true, true);
+      barLink.dispatchEvent(event);
     });
 
-    // @gate enableFloat
-    it('inserts a preload resource into the document when called in an insertion effect, layout effect, or passive effect', async () => {
-      function App() {
-        React.useEffect(() => {
-          ReactDOM.preinit('passive', {as: 'style', precedence: 'default'});
-        }, []);
-        React.useLayoutEffect(() => {
-          ReactDOM.preinit('layout', {as: 'style', precedence: 'default'});
-        });
-        React.useInsertionEffect(() => {
-          ReactDOM.preinit('insertion', {as: 'style', precedence: 'default'});
-        });
-        return 'foobar';
-      }
-      const root = ReactDOMClient.createRoot(container);
-      root.render(<App />);
-      expect(Scheduler).toFlushWithoutYielding();
+    const boundaryTemplateInstance = document.getElementById('B:0');
+    const suspenseInstance = boundaryTemplateInstance.previousSibling;
 
-      expect(getMeaningfulChildren(document)).toEqual(
+    expect(suspenseInstance.data).toEqual('$!');
+    expect(boundaryTemplateInstance.dataset.dgst).toBe(
+      'Resource failed to load',
+    );
+
+    expect(getMeaningfulChildren(document)).toEqual(
+      <html>
+        <head>
+          <link rel="stylesheet" href="foo" data-precedence="arbitrary" />
+          <link rel="stylesheet" href="bar" data-precedence="arbitrary" />
+        </head>
+        <body>
+          loading...
+          <link rel="preload" href="foo" as="style" />
+          <link rel="preload" href="bar" as="style" />
+        </body>
+      </html>,
+    );
+
+    const errors = [];
+    ReactDOMClient.hydrateRoot(document, <App />, {
+      onRecoverableError(err, errInfo) {
+        errors.push(err.message);
+        errors.push(err.digest);
+      },
+    });
+    expect(Scheduler).toFlushWithoutYielding();
+    expect(getMeaningfulChildren(document)).toEqual(
+      <html>
+        <head>
+          <link rel="stylesheet" href="foo" data-precedence="arbitrary" />
+          <link rel="stylesheet" href="bar" data-precedence="arbitrary" />
+        </head>
+        <body>
+          <link rel="preload" href="foo" as="style" />
+          <link rel="preload" href="bar" as="style" />
+          Hello
+        </body>
+      </html>,
+    );
+    expect(errors).toEqual([
+      'The server could not finish this Suspense boundary, likely due to an error during server rendering. Switched to client rendering.',
+      'Resource failed to load',
+    ]);
+  });
+
+  // @gate enableFloat
+  it('treats stylesheet links with a precedence as a resource', async () => {
+    await actIntoEmptyDocument(() => {
+      const {pipe} = renderToPipeableStream(
         <html>
-          <head>
-            <link rel="preload" as="style" href="insertion" />
-            <link rel="preload" as="style" href="layout" />
-            <link rel="preload" as="style" href="passive" />
-          </head>
+          <head />
           <body>
-            <div id="container">foobar</div>
+            <link rel="stylesheet" href="foo" precedence="arbitrary" />
+            Hello
           </body>
         </html>,
       );
+      pipe(writable);
     });
+    expect(getMeaningfulChildren(document)).toEqual(
+      <html>
+        <head>
+          <link rel="stylesheet" href="foo" data-precedence="arbitrary" />
+        </head>
+        <body>Hello</body>
+      </html>,
+    );
 
-    // @gate enableFloat
-    it('inserts a preload resource when called in module scope', async () => {
-      // The requirement that a root be created has to do with bootstrapping the dispatcher.
-      // We are intentionally avoiding setting it to the default via import due to cycles and
-      // we are trying to avoid doing a mutable initailation in module scope.
-      ReactDOM.preinit('foo', {as: 'style'});
-      ReactDOMClient.hydrateRoot(container, null);
-      ReactDOM.preinit('bar', {as: 'style'});
-      // We need to use global.document because preload falls back
-      // to the window.document global when no other documents have been used
-      // The way the JSDOM runtim is created for these tests the local document
-      // global does not point to the global.document
-      expect(getMeaningfulChildren(global.document)).toEqual(
-        <html>
-          <head>
-            <link rel="preload" as="style" href="bar" />
-          </head>
-          <body />
-        </html>,
-      );
-    });
+    ReactDOMClient.hydrateRoot(
+      document,
+      <html>
+        <head />
+        <body>Hello</body>
+      </html>,
+    );
+    expect(Scheduler).toFlushWithoutYielding();
+    expect(getMeaningfulChildren(document)).toEqual(
+      <html>
+        <head>
+          <link rel="stylesheet" href="foo" data-precedence="arbitrary" />
+        </head>
+        <body>Hello</body>
+      </html>,
+    );
   });
 
-  describe('ReactDOM.preinit as script', () => {
-    // @gate enableFloat
-    it('can preinit a script', async () => {
-      function App({srcs}) {
-        srcs.forEach(src => ReactDOM.preinit(src, {as: 'script'}));
-        return (
-          <html>
-            <head>
-              <title>title</title>
-            </head>
-            <body>foo</body>
-          </html>
-        );
-      }
-      await actIntoEmptyDocument(() => {
-        const {pipe} = renderToPipeableStream(
-          <App srcs={['server', 'shared']} />,
-        );
-        pipe(writable);
-      });
-      expect(getMeaningfulChildren(document)).toEqual(
-        <html>
-          <head>
-            <script src="server" async="" />
-            <script src="shared" async="" />
-            <title>title</title>
-          </head>
-          <body>foo</body>
-        </html>,
+  // @gate enableFloat
+  it('inserts text separators following text when followed by an element that is converted to a resource and thus removed from the html inline', async () => {
+    // If you render many of these as siblings the values get emitted as a single text with no separator sometimes
+    // because the link gets elided as a resource
+    function AsyncTextWithResource({text, href, precedence}) {
+      const value = readText(text);
+      return (
+        <>
+          {value}
+          <link rel="stylesheet" href={href} precedence={precedence} />
+        </>
       );
+    }
 
-      ReactDOMClient.hydrateRoot(document, <App srcs={['client', 'shared']} />);
-      expect(Scheduler).toFlushWithoutYielding();
-      expect(getMeaningfulChildren(document)).toEqual(
+    await actIntoEmptyDocument(() => {
+      const {pipe} = renderToPipeableStream(
         <html>
-          <head>
-            <script src="server" async="" />
-            <script src="shared" async="" />
-            <title>title</title>
-            <script src="client" async="" />
-          </head>
-          <body>foo</body>
+          <head />
+          <body>
+            <AsyncTextWithResource text="foo" href="foo" precedence="one" />
+            <AsyncTextWithResource text="bar" href="bar" precedence="two" />
+            <AsyncTextWithResource text="baz" href="baz" precedence="three" />
+          </body>
         </html>,
       );
+      pipe(writable);
+      resolveText('foo');
+      resolveText('bar');
+      resolveText('baz');
     });
+
+    expect(getMeaningfulChildren(document)).toEqual(
+      <html>
+        <head>
+          <link rel="stylesheet" href="foo" data-precedence="one" />
+          <link rel="stylesheet" href="bar" data-precedence="two" />
+          <link rel="stylesheet" href="baz" data-precedence="three" />
+        </head>
+        <body>
+          {'foo'}
+          {'bar'}
+          {'baz'}
+        </body>
+      </html>,
+    );
   });
 
-  describe('document encapsulation', () => {
-    // @gate enableFloat
-    it('can support styles inside portals to a shadowRoot', async () => {
-      const shadow = document.body.attachShadow({mode: 'open'});
-      const root = ReactDOMClient.createRoot(container);
-      root.render(
-        <>
-          <link rel="stylesheet" href="foo" precedence="default" />
-          {ReactDOM.createPortal(
-            <div>
-              <link
-                rel="stylesheet"
-                href="foo"
-                data-extra-prop="foo"
-                precedence="different"
-              />
-              shadow
-            </div>,
-            shadow,
-          )}
-          container
-        </>,
-      );
-      expect(Scheduler).toFlushWithoutYielding();
-      expect(getMeaningfulChildren(document)).toEqual(
+  // @gate enableFloat
+  it('hoists late stylesheets the correct precedence', async () => {
+    function PresetPrecedence() {
+      ReactDOM.preinit('preset', {as: 'style', precedence: 'preset'});
+    }
+    await actIntoEmptyDocument(() => {
+      const {pipe} = renderToPipeableStream(
         <html>
-          <head>
-            <link rel="stylesheet" href="foo" data-precedence="default" />
-            <link rel="preload" href="foo" as="style" />
-          </head>
+          <head />
           <body>
-            <div id="container">container</div>
-          </body>
-        </html>,
-      );
-      expect(getMeaningfulChildren(shadow)).toEqual([
-        <link
-          rel="stylesheet"
-          href="foo"
-          data-precedence="different"
-          data-extra-prop="foo"
-        />,
-        <div>shadow</div>,
-      ]);
-    });
-    // @gate enableFloat
-    it('can support styles inside portals to an element in shadowRoots', async () => {
-      const template = document.createElement('template');
-      template.innerHTML =
-        "<div><div id='shadowcontainer1'></div><div id='shadowcontainer2'></div></div>";
-      const shadow = document.body.attachShadow({mode: 'open'});
-      shadow.appendChild(template.content);
-
-      const shadowContainer1 = shadow.getElementById('shadowcontainer1');
-      const shadowContainer2 = shadow.getElementById('shadowcontainer2');
-      const root = ReactDOMClient.createRoot(container);
-      root.render(
-        <>
-          <link rel="stylesheet" href="foo" precedence="default" />
-          {ReactDOM.createPortal(
+            <link rel="stylesheet" href="initial" precedence="one" />
+            <PresetPrecedence />
             <div>
-              <link rel="stylesheet" href="foo" precedence="one" />
-              <link rel="stylesheet" href="bar" precedence="two" />1
-            </div>,
-            shadow,
-          )}
-          {ReactDOM.createPortal(
+              <Suspense fallback="loading foo bar...">
+                <div>foo</div>
+                <link rel="stylesheet" href="foo" precedence="one" />
+                <BlockedOn value="bar">
+                  <div>bar</div>
+                  <link rel="stylesheet" href="bar" precedence="default" />
+                </BlockedOn>
+              </Suspense>
+            </div>
             <div>
-              <link rel="stylesheet" href="foo" precedence="one" />
-              <link rel="stylesheet" href="baz" precedence="one" />2
-            </div>,
-            shadowContainer1,
-          )}
-          {ReactDOM.createPortal(
+              <Suspense fallback="loading bar baz qux...">
+                <BlockedOn value="bar">
+                  <div>bar</div>
+                  <link rel="stylesheet" href="bar" precedence="default" />
+                </BlockedOn>
+                <BlockedOn value="baz">
+                  <div>baz</div>
+                  <link rel="stylesheet" href="baz" precedence="two" />
+                </BlockedOn>
+                <BlockedOn value="qux">
+                  <div>qux</div>
+                  <link rel="stylesheet" href="qux" precedence="one" />
+                </BlockedOn>
+              </Suspense>
+            </div>
             <div>
-              <link rel="stylesheet" href="bar" precedence="two" />
-              <link rel="stylesheet" href="qux" precedence="three" />3
-            </div>,
-            shadowContainer2,
-          )}
-          container
-        </>,
-      );
-      expect(Scheduler).toFlushWithoutYielding();
-      expect(getMeaningfulChildren(document)).toEqual(
-        <html>
-          <head>
-            <link rel="stylesheet" href="foo" data-precedence="default" />
-            <link rel="preload" href="foo" as="style" />
-            <link rel="preload" href="bar" as="style" />
-            <link rel="preload" href="baz" as="style" />
-            <link rel="preload" href="qux" as="style" />
-          </head>
-          <body>
-            <div id="container">container</div>
+              <Suspense fallback="loading bar baz qux...">
+                <BlockedOn value="unblock">
+                  <BlockedOn value="bar">
+                    <div>bar</div>
+                    <link rel="stylesheet" href="bar" precedence="default" />
+                  </BlockedOn>
+                  <BlockedOn value="baz">
+                    <div>baz</div>
+                    <link rel="stylesheet" href="baz" precedence="two" />
+                  </BlockedOn>
+                  <BlockedOn value="qux">
+                    <div>qux</div>
+                    <link rel="stylesheet" href="qux" precedence="one" />
+                  </BlockedOn>
+                </BlockedOn>
+              </Suspense>
+            </div>
           </body>
         </html>,
       );
-      expect(getMeaningfulChildren(shadow)).toEqual([
-        <link rel="stylesheet" href="foo" data-precedence="one" />,
-        <link rel="stylesheet" href="baz" data-precedence="one" />,
-        <link rel="stylesheet" href="bar" data-precedence="two" />,
-        <link rel="stylesheet" href="qux" data-precedence="three" />,
-        <div>
-          <div id="shadowcontainer1">
-            <div>2</div>
-          </div>
-          <div id="shadowcontainer2">
-            <div>3</div>
-          </div>
-        </div>,
-        <div>1</div>,
-      ]);
+      pipe(writable);
     });
-  });
-
-  describe('head resources', () => {
-    // @gate enableFloat
-    it('supports preconnects, prefetc-dns, and arbitrary other link types', async () => {
-      await actIntoEmptyDocument(() => {
-        const {pipe} = renderToPipeableStream(
-          <html>
-            <head />
-            <body>
-              <div>hello world</div>
-            </body>
-            <link rel="foo" href="bar" />
-            <link rel="preload" href="bar" />
-            <link rel="preload" href="bar" as="style" />
-            <link rel="stylesheet" href="bar" precedence="default" />
-            <link rel="preconnect" href="bar" />
-            <link rel="dns-prefetch" href="bar" />
-            <link rel="icon" href="bar" />
-            <link rel="icon" href="bar" sizes="1x1" />
-            <link rel="icon" href="bar" media="foo" />
-            <link rel="shortcut icon" href="bar" />
-            <link rel="apple-touch-icon" href="bar" />
-          </html>,
-        );
-        pipe(writable);
-      });
-      // "preconnect" and "dns-prefetch" get hoisted to the front.
-      // All other generic links (not styles, or typed preloads)
-      // get emitted after styles and other higher priority Resources
-      // Sizes and Media are part of generic link keys
-      expect(getMeaningfulChildren(document)).toEqual(
-        <html>
-          <head>
-            <link rel="preconnect" href="bar" />
-            <link rel="dns-prefetch" href="bar" />
-            <link rel="stylesheet" href="bar" data-precedence="default" />
-            <link rel="foo" href="bar" />
-            <link rel="preload" href="bar" />
-            <link rel="icon" href="bar" />
-            <link rel="icon" href="bar" sizes="1x1" />
-            <link rel="icon" href="bar" media="foo" />
-            <link rel="shortcut icon" href="bar" />
-            <link rel="apple-touch-icon" href="bar" />
-          </head>
-          <body>
-            <div>hello world</div>
-          </body>
-        </html>,
-      );
 
-      const root = ReactDOMClient.hydrateRoot(
-        document,
-        <html>
-          <head />
-          <body>
-            <div>hello world</div>
-          </body>
-          <link rel="foo" href="bar" />
-          <link rel="preload" href="bar" />
-          <link rel="preload" href="bar" as="style" />
-          <link rel="stylesheet" href="bar" precedence="default" />
-          <link rel="preconnect" href="bar" />
-          <link rel="dns-prefetch" href="bar" />
-          <link rel="icon" href="bar" />
-          <link rel="icon" href="bar" sizes="1x1" />
-          <link rel="icon" href="bar" media="foo" />
-          <link rel="shortcut icon" href="bar" />
-          <link rel="apple-touch-icon" href="bar" />
-        </html>,
-      );
-      expect(Scheduler).toFlushWithoutYielding();
-      expect(getMeaningfulChildren(document)).toEqual(
-        <html>
-          <head>
-            <link rel="preconnect" href="bar" />
-            <link rel="dns-prefetch" href="bar" />
-            <link rel="stylesheet" href="bar" data-precedence="default" />
-            <link rel="foo" href="bar" />
-            <link rel="preload" href="bar" />
-            <link rel="icon" href="bar" />
-            <link rel="icon" href="bar" sizes="1x1" />
-            <link rel="icon" href="bar" media="foo" />
-            <link rel="shortcut icon" href="bar" />
-            <link rel="apple-touch-icon" href="bar" />
-          </head>
-          <body>
-            <div>hello world</div>
-          </body>
-        </html>,
-      );
-
-      root.render(
-        <html>
-          <head />
-          <body>
-            <div>hello world</div>
-          </body>
-        </html>,
-      );
-      expect(Scheduler).toFlushWithoutYielding();
-      expect(getMeaningfulChildren(document)).toEqual(
-        <html>
-          <head>
-            <link rel="stylesheet" href="bar" data-precedence="default" />
-            <link rel="preload" href="bar" />
-          </head>
-          <body>
-            <div>hello world</div>
-          </body>
-        </html>,
-      );
-    });
-
-    // @gate enableFloat
-    it('can render <base> as a Resource', async () => {
-      await actIntoEmptyDocument(() => {
-        const {pipe} = renderToPipeableStream(
-          <html>
-            <head />
-            <body>
-              <base target="_blank" />
-              <base href="foo" />
-              <base target="_self" href="bar" />
-              <div>hello world</div>
-            </body>
-          </html>,
-        );
-        pipe(writable);
-      });
-      expect(getMeaningfulChildren(document)).toEqual(
-        <html>
-          <head>
-            <base target="_blank" />
-            <base href="foo" />
-            <base target="_self" href="bar" />
-          </head>
-          <body>
-            <div>hello world</div>
-          </body>
-        </html>,
-      );
-
-      ReactDOMClient.hydrateRoot(
-        document,
-        <html>
-          <head />
-          <body>
-            <base target="_blank" />
-            <base href="foo" />
-            <base target="_self" href="bar" />
-            <base target="_top" href="baz" />
-            <div>hello world</div>
-          </body>
-        </html>,
-      );
-      expect(Scheduler).toFlushWithoutYielding();
-      expect(getMeaningfulChildren(document)).toEqual(
-        <html>
-          <head>
-            <base target="_top" href="baz" />
-            <base target="_blank" />
-            <base href="foo" />
-            <base target="_self" href="bar" />
-          </head>
-          <body>
-            <div>hello world</div>
-          </body>
-        </html>,
-      );
-    });
-
-    // @gate enableFloat
-    it('can render icons and apple-touch-icons as Resources', async () => {
-      await actIntoEmptyDocument(() => {
-        const {pipe} = renderToPipeableStream(
-          <>
-            <html>
-              <head />
-              <body>
-                <link rel="icon" href="foo" />
-                <div>hello world</div>
-              </body>
-            </html>
-            <link rel="apple-touch-icon" href="foo" />
-          </>,
-        );
-        pipe(writable);
-      });
-      expect(getMeaningfulChildren(document)).toEqual(
-        <html>
-          <head>
-            <link rel="icon" href="foo" />
-            <link rel="apple-touch-icon" href="foo" />
-          </head>
-          <body>
-            <div>hello world</div>
-          </body>
-        </html>,
-      );
+    expect(getMeaningfulChildren(document)).toEqual(
+      <html>
+        <head>
+          <link rel="stylesheet" href="initial" data-precedence="one" />
+          <link rel="stylesheet" href="preset" data-precedence="preset" />
+          <link rel="preload" href="foo" as="style" />
+        </head>
+        <body>
+          <div>loading foo bar...</div>
+          <div>loading bar baz qux...</div>
+          <div>loading bar baz qux...</div>
+        </body>
+      </html>,
+    );
 
-      ReactDOMClient.hydrateRoot(
-        document,
-        <html>
-          <link rel="apple-touch-icon" href="foo" />
-          <head />
-          <body>
-            <link rel="icon" href="foo" />
-            <div>hello world</div>
-          </body>
-        </html>,
-      );
-      expect(Scheduler).toFlushWithoutYielding();
-      expect(getMeaningfulChildren(document)).toEqual(
-        <html>
-          <head>
-            <link rel="icon" href="foo" />
-            <link rel="apple-touch-icon" href="foo" />
-          </head>
-          <body>
-            <div>hello world</div>
-          </body>
-        </html>,
-      );
+    await act(() => {
+      resolveText('foo');
+      resolveText('bar');
     });
 
-    // @gate enableFloat
-    it('can hydrate the right instances for deeply nested structured metas', async () => {
-      await actIntoEmptyDocument(() => {
-        const {pipe} = renderToPipeableStream(
-          <>
-            <html>
-              <head />
-              <body>
-                <div>hello world</div>
-              </body>
-            </html>
-            <meta property="og:foo" content="one" />
-            <meta property="og:foo:bar" content="bar" />
-            <meta property="og:foo:bar:baz" content="baz" />
-            <meta property="og:foo" content="two" />
-            <meta property="og:foo:bar" content="bar" />
-            <meta property="og:foo:bar:baz" content="baz" />
-          </>,
-        );
-        pipe(writable);
-      });
-      expect(getMeaningfulChildren(document)).toEqual(
-        <html>
-          <head>
-            <meta property="og:foo" content="one" />
-            <meta property="og:foo:bar" content="bar" />
-            <meta property="og:foo:bar:baz" content="baz" />
-            <meta property="og:foo" content="two" />
-            <meta property="og:foo:bar" content="bar" />
-            <meta property="og:foo:bar:baz" content="baz" />
-          </head>
-          <body>
-            <div>hello world</div>
-          </body>
-        </html>,
-      );
-
-      const root = ReactDOMClient.hydrateRoot(
-        document,
-        <>
-          <html>
-            <head />
-            <body>
-              <div>hello world</div>
-            </body>
-          </html>
-          <meta property="og:foo" content="one" />
-          <meta property="og:foo:bar" content="bar" />
-          <meta property="og:foo:bar:baz" content="baz" />
-          <meta property="og:foo" content="two" />
-          <meta property="og:foo:bar" content="bar" />
-          <meta property="og:foo:bar:baz" content="baz" />
-        </>,
-      );
-      expect(Scheduler).toFlushWithoutYielding();
-      expect(getMeaningfulChildren(document)).toEqual(
-        <html>
-          <head>
-            <meta property="og:foo" content="one" />
-            <meta property="og:foo:bar" content="bar" />
-            <meta property="og:foo:bar:baz" content="baz" />
-            <meta property="og:foo" content="two" />
-            <meta property="og:foo:bar" content="bar" />
-            <meta property="og:foo:bar:baz" content="baz" />
-          </head>
-          <body>
-            <div>hello world</div>
-          </body>
-        </html>,
-      );
+    expect(getMeaningfulChildren(document)).toEqual(
+      <html>
+        <head>
+          <link rel="stylesheet" href="initial" data-precedence="one" />
+          <link rel="stylesheet" href="foo" data-precedence="one" />
+          <link rel="stylesheet" href="preset" data-precedence="preset" />
+          <link rel="stylesheet" href="bar" data-precedence="default" />
+          <link rel="preload" href="foo" as="style" />
+        </head>
+        <body>
+          <div>loading foo bar...</div>
+          <div>loading bar baz qux...</div>
+          <div>loading bar baz qux...</div>
+          <link rel="preload" href="bar" as="style" />
+        </body>
+      </html>,
+    );
 
-      root.render(
-        <>
-          <html>
-            <head />
-            <body>
-              <div>hello world</div>
-            </body>
-          </html>
-        </>,
-      );
-      expect(Scheduler).toFlushWithoutYielding();
-      expect(getMeaningfulChildren(document)).toEqual(
-        <html>
-          <head />
-          <body>
-            <div>hello world</div>
-          </body>
-        </html>,
-      );
+    await act(() => {
+      const link = document.querySelector('link[rel="stylesheet"][href="foo"]');
+      const event = document.createEvent('Events');
+      event.initEvent('load', true, true);
+      link.dispatchEvent(event);
     });
 
-    // @gate enableFloat
-    it('can insert meta tags in the expected location', async () => {
-      await actIntoEmptyDocument(() => {
-        const {pipe} = renderToPipeableStream(
-          <>
-            <html>
-              <head />
-              <body>
-                <div>hello world</div>
-              </body>
-            </html>
-            <meta charSet="utf-8" />
-            <meta name="google-site-verification" content="somehash1" />
-            <meta name="google-site-verification" content="somehash2" />
-            <meta
-              name="description"
-              property="og:description"
-              content="my site"
-            />
-            <meta property="og:image" content="foo" />
-            <meta property="og:image:width" content="100" />
-            <meta httpEquiv="refresh" content="dont actually" />
-            <meta property="og:image:height" content="100" />
-            <meta property="og:image" content="bar" />
-            <meta property="og:image:width" content="100" />
-            <meta itemProp="someprop" content="somevalue" />
-            <meta property="og:image:height" content="100" />
-            <meta property="og:description:foo" content="foo" />
-          </>,
-        );
-        pipe(writable);
-      });
-      expect(getMeaningfulChildren(document)).toEqual(
-        <html>
-          <head>
-            <meta charset="utf-8" />
-            <meta name="google-site-verification" content="somehash1" />
-            <meta name="google-site-verification" content="somehash2" />
-            <meta
-              name="description"
-              property="og:description"
-              content="my site"
-            />
-            <meta property="og:image" content="foo" />
-            <meta property="og:image:width" content="100" />
-            <meta http-equiv="refresh" content="dont actually" />
-            <meta property="og:image:height" content="100" />
-            <meta property="og:image" content="bar" />
-            <meta property="og:image:width" content="100" />
-            <meta itemprop="someprop" content="somevalue" />
-            <meta property="og:image:height" content="100" />
-            <meta property="og:description:foo" content="foo" />
-          </head>
-          <body>
-            <div>hello world</div>
-          </body>
-        </html>,
-      );
-
-      const root = ReactDOMClient.hydrateRoot(
-        document,
-        <html>
-          <head>
-            <meta property="og:image" content="bar" />
-            <meta property="og:image:width" content="100" />
-            <meta property="og:image:height" content="100" />
-          </head>
-          <body>
-            <div>hello world</div>
-          </body>
-        </html>,
-      );
-      expect(Scheduler).toFlushWithoutYielding();
-      expect(getMeaningfulChildren(document)).toEqual(
-        <html>
-          <head>
-            <meta charset="utf-8" />
-            <meta name="google-site-verification" content="somehash1" />
-            <meta name="google-site-verification" content="somehash2" />
-            <meta
-              name="description"
-              property="og:description"
-              content="my site"
-            />
-            <meta property="og:image" content="foo" />
-            <meta property="og:image:width" content="100" />
-            <meta http-equiv="refresh" content="dont actually" />
-            <meta property="og:image:height" content="100" />
-            <meta property="og:image" content="bar" />
-            <meta property="og:image:width" content="100" />
-            <meta itemprop="someprop" content="somevalue" />
-            <meta property="og:image:height" content="100" />
-            <meta property="og:description:foo" content="foo" />
-          </head>
-          <body>
-            <div>hello world</div>
-          </body>
-        </html>,
-      );
+    expect(getMeaningfulChildren(document)).toEqual(
+      <html>
+        <head>
+          <link rel="stylesheet" href="initial" data-precedence="one" />
+          <link rel="stylesheet" href="foo" data-precedence="one" />
+          <link rel="stylesheet" href="preset" data-precedence="preset" />
+          <link rel="stylesheet" href="bar" data-precedence="default" />
+          <link rel="preload" href="foo" as="style" />
+        </head>
+        <body>
+          <div>loading foo bar...</div>
+          <div>loading bar baz qux...</div>
+          <div>loading bar baz qux...</div>
+          <link rel="preload" href="bar" as="style" />
+        </body>
+      </html>,
+    );
 
-      root.render(
-        <html>
-          <head>
-            <meta property="og:image" content="bar" />
-            <meta property="og:image:width" content="100" />
-            <meta property="og:image:height" content="100" />
-            <meta property="og:description" content="my site" />
-            <meta
-              itemProp="description bar"
-              property="og:description:bar"
-              content="bar"
-            />
-          </head>
-          <body>
-            <div>hello world</div>
-          </body>
-        </html>,
-      );
-      expect(Scheduler).toFlushWithoutYielding();
-      expect(getMeaningfulChildren(document)).toEqual(
-        <html>
-          <head>
-            <meta charset="utf-8" />
-            <meta name="google-site-verification" content="somehash1" />
-            <meta name="google-site-verification" content="somehash2" />
-            <meta
-              name="description"
-              property="og:description"
-              content="my site"
-            />
-            <meta
-              itemprop="description bar"
-              property="og:description:bar"
-              content="bar"
-            />
-            <meta property="og:image" content="foo" />
-            <meta property="og:image:width" content="100" />
-            <meta http-equiv="refresh" content="dont actually" />
-            <meta property="og:image:height" content="100" />
-            <meta property="og:image" content="bar" />
-            <meta property="og:image:width" content="100" />
-            <meta itemprop="someprop" content="somevalue" />
-            <meta property="og:image:height" content="100" />
-            <meta property="og:description:foo" content="foo" />
-          </head>
-          <body>
-            <div>hello world</div>
-          </body>
-        </html>,
-      );
+    await act(() => {
+      const link = document.querySelector('link[rel="stylesheet"][href="bar"]');
+      const event = document.createEvent('Events');
+      event.initEvent('load', true, true);
+      link.dispatchEvent(event);
     });
 
-    // @gate enableFloat
-    it('can render meta tags with og properties with structured data', async () => {
-      await actIntoEmptyDocument(() => {
-        const {pipe} = renderToPipeableStream(
-          <>
-            <html>
-              <head />
-              <body>
-                <div>hello world</div>
-              </body>
-            </html>
-            <meta property="og:image" content="foo" />
-            <meta property="og:image:width" content="100" />
-            <meta property="og:image:height" content="100" />
-            <meta property="og:image" content="bar" />
-            <meta property="og:image:width" content="100" />
-            <meta property="og:image:height" content="100" />
-          </>,
-        );
-        pipe(writable);
-      });
-      expect(getMeaningfulChildren(document)).toEqual(
-        <html>
-          <head>
-            <meta property="og:image" content="foo" />
-            <meta property="og:image:width" content="100" />
-            <meta property="og:image:height" content="100" />
-            <meta property="og:image" content="bar" />
-            <meta property="og:image:width" content="100" />
-            <meta property="og:image:height" content="100" />
-          </head>
-          <body>
-            <div>hello world</div>
-          </body>
-        </html>,
-      );
+    expect(getMeaningfulChildren(document)).toEqual(
+      <html>
+        <head>
+          <link rel="stylesheet" href="initial" data-precedence="one" />
+          <link rel="stylesheet" href="foo" data-precedence="one" />
+          <link rel="stylesheet" href="preset" data-precedence="preset" />
+          <link rel="stylesheet" href="bar" data-precedence="default" />
+          <link rel="preload" href="foo" as="style" />
+        </head>
+        <body>
+          <div>
+            <div>foo</div>
+            <div>bar</div>
+          </div>
+          <div>loading bar baz qux...</div>
+          <div>loading bar baz qux...</div>
+          <link rel="preload" href="bar" as="style" />
+        </body>
+      </html>,
+    );
 
-      const root = ReactDOMClient.hydrateRoot(
-        document,
-        <html>
-          <head />
-          <body>
-            <meta property="og:image" content="foo" />
-            <meta property="og:image:width" content="100" />
-            <meta property="og:image:height" content="100" />
-            <meta property="og:image" content="bar" />
-            <meta property="og:image:width" content="100" />
-            <meta property="og:image:height" content="100" />
-            <div>hello world</div>
-          </body>
-        </html>,
-      );
-      expect(Scheduler).toFlushWithoutYielding();
-      expect(getMeaningfulChildren(document)).toEqual(
-        <html>
-          <head>
-            <meta property="og:image" content="foo" />
-            <meta property="og:image:width" content="100" />
-            <meta property="og:image:height" content="100" />
-            <meta property="og:image" content="bar" />
-            <meta property="og:image:width" content="100" />
-            <meta property="og:image:height" content="100" />
-          </head>
-          <body>
-            <div>hello world</div>
-          </body>
-        </html>,
-      );
+    await act(() => {
+      resolveText('baz');
+    });
 
-      root.render(
-        <html>
-          <head />
-          <body>
-            <meta property="og:image" content="foo" />
-            <meta property="og:image:width" content="100" />
-            <meta property="og:image:height" content="100" />
-            <meta property="og:image" content="bar" />
-            <meta property="og:image:height" content="100" />
-            <div>hello world</div>
-          </body>
-        </html>,
-      );
-      expect(Scheduler).toFlushWithoutYielding();
-      expect(getMeaningfulChildren(document)).toEqual(
-        <html>
-          <head>
-            <meta property="og:image" content="foo" />
-            <meta property="og:image:width" content="100" />
-            <meta property="og:image:height" content="100" />
-            <meta property="og:image" content="bar" />
-            <meta property="og:image:height" content="100" />
-          </head>
-          <body>
-            <div>hello world</div>
-          </body>
-        </html>,
-      );
+    expect(getMeaningfulChildren(document)).toEqual(
+      <html>
+        <head>
+          <link rel="stylesheet" href="initial" data-precedence="one" />
+          <link rel="stylesheet" href="foo" data-precedence="one" />
+          <link rel="stylesheet" href="preset" data-precedence="preset" />
+          <link rel="stylesheet" href="bar" data-precedence="default" />
+          <link rel="preload" href="foo" as="style" />
+        </head>
+        <body>
+          <div>
+            <div>foo</div>
+            <div>bar</div>
+          </div>
+          <div>loading bar baz qux...</div>
+          <div>loading bar baz qux...</div>
+          <link rel="preload" as="style" href="bar" />
+          <link rel="preload" as="style" href="baz" />
+        </body>
+      </html>,
+    );
 
-      root.render(
-        <html>
-          <head />
-          <body>
-            <meta property="og:image" content="foo" />
-            <meta property="og:image:width" content="100" />
-            <meta property="og:image:height" content="100" />
-            <meta property="og:image:foo" content="foo" />
-            <meta property="og:image" content="bar" />
-            <meta property="og:image:height" content="100" />
-            <div>hello world</div>
-          </body>
-        </html>,
-      );
-      expect(Scheduler).toFlushWithoutYielding();
-      expect(getMeaningfulChildren(document)).toEqual(
-        <html>
-          <head>
-            <meta property="og:image" content="foo" />
-            <meta property="og:image:foo" content="foo" />
-            <meta property="og:image:width" content="100" />
-            <meta property="og:image:height" content="100" />
-            <meta property="og:image" content="bar" />
-            <meta property="og:image:height" content="100" />
-          </head>
-          <body>
-            <div>hello world</div>
-          </body>
-        </html>,
-      );
+    await act(() => {
+      resolveText('qux');
+    });
 
-      root.render(
-        <html>
-          <head />
-          <body>
-            <meta property="og:image" content="foo" />
-            <meta property="og:image:width" content="100" />
-            <meta property="og:image:width:bar" content="bar" />
-            <meta property="og:image:height" content="100" />
-            <meta property="og:image:foo" content="foo" />
-            <meta property="og:image" content="bar" />
-            <meta property="og:image:height" content="100" />
-            <div>hello world</div>
-          </body>
-        </html>,
+    expect(getMeaningfulChildren(document)).toEqual(
+      <html>
+        <head>
+          <link rel="stylesheet" href="initial" data-precedence="one" />
+          <link rel="stylesheet" href="foo" data-precedence="one" />
+          <link rel="stylesheet" href="qux" data-precedence="one" />
+          <link rel="stylesheet" href="preset" data-precedence="preset" />
+          <link rel="stylesheet" href="bar" data-precedence="default" />
+          <link rel="stylesheet" href="baz" data-precedence="two" />
+          <link rel="preload" href="foo" as="style" />
+        </head>
+        <body>
+          <div>
+            <div>foo</div>
+            <div>bar</div>
+          </div>
+          <div>loading bar baz qux...</div>
+          <div>loading bar baz qux...</div>
+          <link rel="preload" as="style" href="bar" />
+          <link rel="preload" as="style" href="baz" />
+          <link rel="preload" as="style" href="qux" />
+        </body>
+      </html>,
+    );
+
+    await act(() => {
+      const bazlink = document.querySelector(
+        'link[rel="stylesheet"][href="baz"]',
       );
-      expect(Scheduler).toFlushWithoutYielding();
-      expect(getMeaningfulChildren(document)).toEqual(
-        <html>
-          <head>
-            <meta property="og:image" content="foo" />
-            <meta property="og:image:foo" content="foo" />
-            <meta property="og:image:height" content="100" />
-            <meta property="og:image:width" content="100" />
-            <meta property="og:image:width:bar" content="bar" />
-            <meta property="og:image" content="bar" />
-            <meta property="og:image:height" content="100" />
-          </head>
-          <body>
-            <div>hello world</div>
-          </body>
-        </html>,
+      const quxlink = document.querySelector(
+        'link[rel="stylesheet"][href="qux"]',
       );
+      const presetLink = document.querySelector(
+        'link[rel="stylesheet"][href="preset"]',
+      );
+      const event = document.createEvent('Events');
+      event.initEvent('load', true, true);
+      bazlink.dispatchEvent(event);
+      quxlink.dispatchEvent(event);
+      presetLink.dispatchEvent(event);
     });
 
-    // @gate enableFloat
-    it('can render meta tags as resources', async () => {
-      await actIntoEmptyDocument(() => {
-        const {pipe} = renderToPipeableStream(
-          <>
-            <html>
-              <head />
-              <body>
-                <div>hello world</div>
-              </body>
-            </html>
-            <meta name="robots" content="noindex" />
-            <meta httpEquiv="content-security-policy" content="foo" />
-            <meta itemProp="description" content="desc" />
-            <meta property="description" content="desc2" />
-            <meta charSet="utf-8" />
-          </>,
-        );
-        pipe(writable);
-      });
-      expect(getMeaningfulChildren(document)).toEqual(
-        <html>
-          <head>
-            <meta charset="utf-8" />
-            <meta name="robots" content="noindex" />
-            <meta http-equiv="content-security-policy" content="foo" />
-            <meta itemprop="description" content="desc" />
-            <meta property="description" content="desc2" />
-          </head>
-          <body>
-            <div>hello world</div>
-          </body>
-        </html>,
-      );
+    expect(getMeaningfulChildren(document)).toEqual(
+      <html>
+        <head>
+          <link rel="stylesheet" href="initial" data-precedence="one" />
+          <link rel="stylesheet" href="foo" data-precedence="one" />
+          <link rel="stylesheet" href="qux" data-precedence="one" />
+          <link rel="stylesheet" href="preset" data-precedence="preset" />
+          <link rel="stylesheet" href="bar" data-precedence="default" />
+          <link rel="stylesheet" href="baz" data-precedence="two" />
+          <link rel="preload" href="foo" as="style" />
+        </head>
+        <body>
+          <div>
+            <div>foo</div>
+            <div>bar</div>
+          </div>
+          <div>
+            <div>bar</div>
+            <div>baz</div>
+            <div>qux</div>
+          </div>
+          <div>loading bar baz qux...</div>
+          <link rel="preload" as="style" href="bar" />
+          <link rel="preload" as="style" href="baz" />
+          <link rel="preload" as="style" href="qux" />
+        </body>
+      </html>,
+    );
 
-      ReactDOMClient.hydrateRoot(
-        document,
-        <html>
-          <head>
-            <meta charSet="utf-8" />
-          </head>
-          <body>
-            <meta name="robots" content="noindex" />
-            <meta httpEquiv="content-security-policy" content="foo" />
-            <div>hello world</div>
-          </body>
-        </html>,
-      );
-      expect(Scheduler).toFlushWithoutYielding();
-      expect(getMeaningfulChildren(document)).toEqual(
-        <html>
-          <head>
-            <meta charset="utf-8" />
-            <meta name="robots" content="noindex" />
-            <meta http-equiv="content-security-policy" content="foo" />
-            <meta itemprop="description" content="desc" />
-            <meta property="description" content="desc2" />
-          </head>
-          <body>
-            <div>hello world</div>
-          </body>
-        </html>,
-      );
+    await act(() => {
+      resolveText('unblock');
     });
 
-    // @gate enableFloat
-    it('can rendering title tags anywhere in the tree', async () => {
-      await actIntoEmptyDocument(() => {
-        const {pipe} = renderToPipeableStream(
-          <>
-            <title>before</title>
-            <>
-              <html>
-                <head>
-                  <title>in head</title>
-                </head>
-                <body>
-                  <div>
-                    <title>during</title>
-                    hello world
-                  </div>
-                </body>
-              </html>
-            </>
-            <title>after</title>
-          </>,
-        );
-        pipe(writable);
-      });
+    expect(getMeaningfulChildren(document)).toEqual(
+      <html>
+        <head>
+          <link rel="stylesheet" href="initial" data-precedence="one" />
+          <link rel="stylesheet" href="foo" data-precedence="one" />
+          <link rel="stylesheet" href="qux" data-precedence="one" />
+          <link rel="stylesheet" href="preset" data-precedence="preset" />
+          <link rel="stylesheet" href="bar" data-precedence="default" />
+          <link rel="stylesheet" href="baz" data-precedence="two" />
+          <link rel="preload" href="foo" as="style" />
+        </head>
+        <body>
+          <div>
+            <div>foo</div>
+            <div>bar</div>
+          </div>
+          <div>
+            <div>bar</div>
+            <div>baz</div>
+            <div>qux</div>
+          </div>
+          <div>
+            <div>bar</div>
+            <div>baz</div>
+            <div>qux</div>
+          </div>
+          <link rel="preload" as="style" href="bar" />
+          <link rel="preload" as="style" href="baz" />
+          <link rel="preload" as="style" href="qux" />
+        </body>
+      </html>,
+    );
+  });
 
-      expect(getMeaningfulChildren(document)).toEqual(
+  // @gate enableFloat
+  it('normalizes stylesheet resource precedence for all boundaries inlined as part of the shell flush', async () => {
+    await actIntoEmptyDocument(() => {
+      const {pipe} = renderToPipeableStream(
         <html>
-          <head>
-            <title>before</title>
-            <title>in head</title>
-            <title>during</title>
-            <title>after</title>
-          </head>
+          <head />
           <body>
-            <div>hello world</div>
-          </body>
-        </html>,
-      );
-
-      ReactDOMClient.hydrateRoot(
-        document,
-        <>
-          <title>before</title>
-          <>
-            <html>
-              <head>
-                <title>in head</title>
-              </head>
-              <body>
+            <div>
+              outer
+              <link rel="stylesheet" href="1one" precedence="one" />
+              <link rel="stylesheet" href="1two" precedence="two" />
+              <link rel="stylesheet" href="1three" precedence="three" />
+              <link rel="stylesheet" href="1four" precedence="four" />
+              <Suspense fallback={null}>
                 <div>
-                  <title>during</title>
-                  hello world
+                  middle
+                  <link rel="stylesheet" href="2one" precedence="one" />
+                  <link rel="stylesheet" href="2two" precedence="two" />
+                  <link rel="stylesheet" href="2three" precedence="three" />
+                  <link rel="stylesheet" href="2four" precedence="four" />
+                  <Suspense fallback={null}>
+                    <div>
+                      inner
+                      <link rel="stylesheet" href="3five" precedence="five" />
+                      <link rel="stylesheet" href="3one" precedence="one" />
+                      <link rel="stylesheet" href="3two" precedence="two" />
+                      <link rel="stylesheet" href="3three" precedence="three" />
+                      <link rel="stylesheet" href="3four" precedence="four" />
+                    </div>
+                  </Suspense>
                 </div>
-              </body>
-            </html>
-          </>
-          <title>after</title>
-        </>,
-      );
-      expect(Scheduler).toFlushWithoutYielding();
-      expect(getMeaningfulChildren(document)).toEqual(
-        <html>
-          <head>
-            <title>before</title>
-            <title>in head</title>
-            <title>during</title>
-            <title>after</title>
-          </head>
-          <body>
-            <div>hello world</div>
+              </Suspense>
+              <Suspense fallback={null}>
+                <div>middle</div>
+                <link rel="stylesheet" href="4one" precedence="one" />
+                <link rel="stylesheet" href="4two" precedence="two" />
+                <link rel="stylesheet" href="4three" precedence="three" />
+                <link rel="stylesheet" href="4four" precedence="four" />
+              </Suspense>
+            </div>
           </body>
         </html>,
       );
+      pipe(writable);
     });
 
-    // @gate enableFloat
-    it('prepends new titles on the client so newer ones override older ones, including orphaned server rendered titles', async () => {
-      await actIntoEmptyDocument(() => {
-        const {pipe} = renderToPipeableStream(
-          <html>
-            <head>
-              <title>server</title>
-            </head>
-            <body>
-              <div>hello world</div>
-            </body>
-          </html>,
-        );
-        pipe(writable);
-      });
+    expect(getMeaningfulChildren(document)).toEqual(
+      <html>
+        <head>
+          <link rel="stylesheet" href="1one" data-precedence="one" />
+          <link rel="stylesheet" href="2one" data-precedence="one" />
+          <link rel="stylesheet" href="3one" data-precedence="one" />
+          <link rel="stylesheet" href="4one" data-precedence="one" />
 
-      expect(getMeaningfulChildren(document)).toEqual(
-        <html>
-          <head>
-            <title>server</title>
-          </head>
-          <body>
-            <div>hello world</div>
-          </body>
-        </html>,
-      );
+          <link rel="stylesheet" href="1two" data-precedence="two" />
+          <link rel="stylesheet" href="2two" data-precedence="two" />
+          <link rel="stylesheet" href="3two" data-precedence="two" />
+          <link rel="stylesheet" href="4two" data-precedence="two" />
 
-      ReactDOMClient.hydrateRoot(
-        document,
-        <html>
-          <title>html</title>
-          <head>
-            <title>head</title>
-          </head>
-          <body>
-            <title>body</title>
-            <div>hello world</div>
-          </body>
-        </html>,
-      );
-      expect(Scheduler).toFlushWithoutYielding();
-      expect(getMeaningfulChildren(document)).toEqual(
+          <link rel="stylesheet" href="1three" data-precedence="three" />
+          <link rel="stylesheet" href="2three" data-precedence="three" />
+          <link rel="stylesheet" href="3three" data-precedence="three" />
+          <link rel="stylesheet" href="4three" data-precedence="three" />
+
+          <link rel="stylesheet" href="1four" data-precedence="four" />
+          <link rel="stylesheet" href="2four" data-precedence="four" />
+          <link rel="stylesheet" href="3four" data-precedence="four" />
+          <link rel="stylesheet" href="4four" data-precedence="four" />
+
+          <link rel="stylesheet" href="3five" data-precedence="five" />
+        </head>
+        <body>
+          <div>
+            outer
+            <div>
+              middle<div>inner</div>
+            </div>
+            <div>middle</div>
+          </div>
+        </body>
+      </html>,
+    );
+  });
+
+  // @gate enableFloat
+  it('stylesheet resources are inserted according to precedence order on the client', async () => {
+    await actIntoEmptyDocument(() => {
+      const {pipe} = renderToPipeableStream(
         <html>
-          <head>
-            <title>body</title>
-            <title>head</title>
-            <title>html</title>
-            <title>server</title>
-          </head>
+          <head />
           <body>
-            <div>hello world</div>
+            <div>
+              <link rel="stylesheet" href="foo" precedence="one" />
+              <link rel="stylesheet" href="bar" precedence="two" />
+              Hello
+            </div>
           </body>
         </html>,
       );
+      pipe(writable);
     });
 
-    // @gate enableFloat
-    it('keys titles on text children and only removes them when no more instances refer to that title', async () => {
-      const root = ReactDOMClient.createRoot(container);
-      root.render(
-        <div>
-          <title>{[2]}</title>hello world<title>2</title>
-        </div>,
-      );
-      expect(Scheduler).toFlushWithoutYielding();
-      expect(getMeaningfulChildren(document)).toEqual(
-        <html>
-          <head>
-            <title>2</title>
-          </head>
-          <body>
-            <div id="container">
-              <div>hello world</div>
-            </div>
-          </body>
-        </html>,
-      );
+    expect(getMeaningfulChildren(document)).toEqual(
+      <html>
+        <head>
+          <link rel="stylesheet" href="foo" data-precedence="one" />
+          <link rel="stylesheet" href="bar" data-precedence="two" />
+        </head>
+        <body>
+          <div>Hello</div>
+        </body>
+      </html>,
+    );
+
+    const root = ReactDOMClient.hydrateRoot(
+      document,
+      <html>
+        <head />
+        <body>
+          <div>
+            <link rel="stylesheet" href="foo" precedence="one" />
+            <link rel="stylesheet" href="bar" precedence="two" />
+            Hello
+          </div>
+        </body>
+      </html>,
+    );
+    expect(Scheduler).toFlushWithoutYielding();
+    expect(getMeaningfulChildren(document)).toEqual(
+      <html>
+        <head>
+          <link rel="stylesheet" href="foo" data-precedence="one" />
+          <link rel="stylesheet" href="bar" data-precedence="two" />
+        </head>
+        <body>
+          <div>Hello</div>
+        </body>
+      </html>,
+    );
+
+    root.render(
+      <html>
+        <head />
+        <body>
+          <div>Hello</div>
+          <link rel="stylesheet" href="baz" precedence="one" />
+        </body>
+      </html>,
+    );
+    expect(Scheduler).toFlushWithoutYielding();
+    expect(getMeaningfulChildren(document)).toEqual(
+      <html>
+        <head>
+          <link rel="stylesheet" href="foo" data-precedence="one" />
+          <link rel="stylesheet" href="baz" data-precedence="one" />
+          <link rel="stylesheet" href="bar" data-precedence="two" />
+          <link rel="preload" as="style" href="baz" />
+        </head>
+        <body>
+          <div>Hello</div>
+        </body>
+      </html>,
+    );
+  });
+
+  // @gate enableFloat
+  it('inserts preloads in render phase eagerly', async () => {
+    function Throw() {
+      throw new Error('Uh oh!');
+    }
+    class ErrorBoundary extends React.Component {
+      state = {hasError: false, error: null};
+      static getDerivedStateFromError(error) {
+        return {
+          hasError: true,
+          error,
+        };
+      }
+      render() {
+        if (this.state.hasError) {
+          return this.state.error.message;
+        }
+        return this.props.children;
+      }
+    }
 
-      root.render(
-        <div>
-          {null}hello world<title>2</title>
-        </div>,
-      );
-      expect(Scheduler).toFlushWithoutYielding();
-      expect(getMeaningfulChildren(document)).toEqual(
-        <html>
-          <head>
-            <title>2</title>
-          </head>
-          <body>
-            <div id="container">
-              <div>hello world</div>
-            </div>
-          </body>
-        </html>,
-      );
-      root.render(
-        <div>
-          {null}hello world{null}
-        </div>,
-      );
-      expect(Scheduler).toFlushWithoutYielding();
-      expect(getMeaningfulChildren(document)).toEqual(
+    const root = ReactDOMClient.createRoot(container);
+    root.render(
+      <ErrorBoundary>
+        <link rel="stylesheet" href="foo" precedence="default" />
+        <div>foo</div>
+        <Throw />
+      </ErrorBoundary>,
+    );
+    expect(Scheduler).toFlushWithoutYielding();
+    expect(getMeaningfulChildren(document)).toEqual(
+      <html>
+        <head>
+          <link rel="preload" href="foo" as="style" />
+        </head>
+        <body>
+          <div id="container">Uh oh!</div>
+        </body>
+      </html>,
+    );
+  });
+
+  // @gate enableFloat
+  it('will include child boundary stylesheet resources in the boundary reveal instruction', async () => {
+    await actIntoEmptyDocument(() => {
+      const {pipe} = renderToPipeableStream(
         <html>
           <head />
           <body>
-            <div id="container">
-              <div>hello world</div>
+            <div>
+              <Suspense fallback="loading foo...">
+                <BlockedOn value="foo">
+                  <div>foo</div>
+                  <link rel="stylesheet" href="foo" precedence="default" />
+                  <Suspense fallback="loading bar...">
+                    <BlockedOn value="bar">
+                      <div>bar</div>
+                      <link rel="stylesheet" href="bar" precedence="default" />
+                      <Suspense fallback="loading baz...">
+                        <BlockedOn value="baz">
+                          <div>baz</div>
+                          <link
+                            rel="stylesheet"
+                            href="baz"
+                            precedence="default"
+                          />
+                        </BlockedOn>
+                      </Suspense>
+                    </BlockedOn>
+                  </Suspense>
+                </BlockedOn>
+              </Suspense>
             </div>
           </body>
         </html>,
       );
+      pipe(writable);
     });
 
-    // @gate enableFloat && enableHostSingletons && (enableClientRenderFallbackOnTextMismatch || !__DEV__)
-    it('can render a title before a singleton even if that singleton clears its contents', async () => {
-      await actIntoEmptyDocument(() => {
-        const {pipe} = renderToPipeableStream(
-          <>
-            <title>foo</title>
-            <html>
-              <head />
-              <body>
-                <div>server</div>
-              </body>
-            </html>
-          </>,
-        );
-        pipe(writable);
-      });
+    expect(getMeaningfulChildren(document)).toEqual(
+      <html>
+        <head />
+        <body>
+          <div>loading foo...</div>
+        </body>
+      </html>,
+    );
 
-      const errors = [];
-      ReactDOMClient.hydrateRoot(
-        document,
-        <>
-          <title>foo</title>
-          <html>
-            <head />
-            <body>
-              <div>client</div>
-            </body>
-          </html>
-        </>,
-        {
-          onRecoverableError(err) {
-            errors.push(err.message);
-          },
-        },
-      );
-      try {
-        expect(() => {
-          expect(Scheduler).toFlushWithoutYielding();
-        }).toErrorDev(
-          [
-            'Warning: Text content did not match. Server: "server" Client: "client"',
-            'Warning: An error occurred during hydration. The server HTML was replaced with client content in <#document>.',
-          ],
-          {withoutStack: 1},
-        );
-      } catch (e) {
-        // When gates are false this test fails on a DOMException if you don't clear the scheduler after catching.
-        // When gates are true this branch should not be hit
-        expect(Scheduler).toFlushWithoutYielding();
-        throw e;
-      }
-      expect(getMeaningfulChildren(document)).toEqual(
-        <html>
-          <head>
-            <title>foo</title>
-          </head>
-          <body>
-            <div>client</div>
-          </body>
-        </html>,
-      );
+    await act(() => {
+      resolveText('bar');
     });
-  });
+    expect(getMeaningfulChildren(document)).toEqual(
+      <html>
+        <head />
+        <body>
+          <div>loading foo...</div>
+        </body>
+      </html>,
+    );
 
-  describe('style resources', () => {
-    // @gate enableFloat
-    it('treats link rel stylesheet elements as a style resource when it includes a precedence when server rendering', async () => {
-      await actIntoEmptyDocument(() => {
-        const {pipe} = renderToPipeableStream(
-          <html>
-            <head />
-            <body>
-              <link rel="stylesheet" href="aresource" precedence="foo" />
-              <div>hello world</div>
-            </body>
-          </html>,
-        );
-        pipe(writable);
-      });
+    await act(() => {
+      resolveText('baz');
+    });
+    expect(getMeaningfulChildren(document)).toEqual(
+      <html>
+        <head />
+        <body>
+          <div>loading foo...</div>
+        </body>
+      </html>,
+    );
 
-      expect(getMeaningfulChildren(document)).toEqual(
-        <html>
-          <head>
-            <link rel="stylesheet" href="aresource" data-precedence="foo" />
-          </head>
-          <body>
-            <div>hello world</div>
-          </body>
-        </html>,
+    await act(() => {
+      resolveText('foo');
+    });
+    expect(getMeaningfulChildren(document)).toEqual(
+      <html>
+        <head>
+          <link rel="stylesheet" href="foo" data-precedence="default" />
+          <link rel="stylesheet" href="bar" data-precedence="default" />
+          <link rel="stylesheet" href="baz" data-precedence="default" />
+        </head>
+        <body>
+          <div>loading foo...</div>
+          <link rel="preload" href="foo" as="style" />
+          <link rel="preload" href="bar" as="style" />
+          <link rel="preload" href="baz" as="style" />
+        </body>
+      </html>,
+    );
+
+    await act(() => {
+      const event = document.createEvent('Events');
+      event.initEvent('load', true, true);
+      Array.from(document.querySelectorAll('link[rel="stylesheet"]')).forEach(
+        el => {
+          el.dispatchEvent(event);
+        },
       );
     });
+    expect(getMeaningfulChildren(document)).toEqual(
+      <html>
+        <head>
+          <link rel="stylesheet" href="foo" data-precedence="default" />
+          <link rel="stylesheet" href="bar" data-precedence="default" />
+          <link rel="stylesheet" href="baz" data-precedence="default" />
+        </head>
+        <body>
+          <div>
+            <div>foo</div>
+            <div>bar</div>
+            <div>baz</div>
+          </div>
+          <link rel="preload" href="foo" as="style" />
+          <link rel="preload" href="bar" as="style" />
+          <link rel="preload" href="baz" as="style" />
+        </body>
+      </html>,
+    );
+  });
 
-    // @gate enableFloat
-    it('treats link rel stylesheet elements as a style resource when it includes a precedence when client rendering', async () => {
-      const root = ReactDOMClient.createRoot(document);
-      root.render(
+  // @gate enableFloat
+  it('will hoist resources of child boundaries emitted as part of a partial boundary to the parent boundary', async () => {
+    await actIntoEmptyDocument(() => {
+      const {pipe} = renderToPipeableStream(
         <html>
           <head />
           <body>
-            <link rel="stylesheet" href="aresource" precedence="foo" />
-            <div>hello world</div>
+            <div>
+              <Suspense fallback="loading...">
+                <div>
+                  <BlockedOn value="foo">
+                    <div>foo</div>
+                    <link rel="stylesheet" href="foo" precedence="default" />
+                    <Suspense fallback="loading bar...">
+                      <BlockedOn value="bar">
+                        <div>bar</div>
+                        <link
+                          rel="stylesheet"
+                          href="bar"
+                          precedence="default"
+                        />
+                        <Suspense fallback="loading baz...">
+                          <div>
+                            <BlockedOn value="baz">
+                              <div>baz</div>
+                              <link
+                                rel="stylesheet"
+                                href="baz"
+                                precedence="default"
+                              />
+                            </BlockedOn>
+                          </div>
+                        </Suspense>
+                      </BlockedOn>
+                    </Suspense>
+                  </BlockedOn>
+                  <BlockedOn value="qux">
+                    <div>qux</div>
+                    <link rel="stylesheet" href="qux" precedence="default" />
+                  </BlockedOn>
+                </div>
+              </Suspense>
+            </div>
           </body>
         </html>,
       );
-      expect(Scheduler).toFlushWithoutYielding();
+      pipe(writable);
+    });
 
-      expect(getMeaningfulChildren(document)).toEqual(
-        <html>
-          <head>
-            <link rel="stylesheet" href="aresource" data-precedence="foo" />
-          </head>
-          <body>
-            <div>hello world</div>
-          </body>
-        </html>,
-      );
+    expect(getMeaningfulChildren(document)).toEqual(
+      <html>
+        <head />
+        <body>
+          <div>loading...</div>
+        </body>
+      </html>,
+    );
+
+    // This will enqueue a stylesheet resource in a deep blocked boundary (loading baz...).
+    await act(() => {
+      resolveText('baz');
     });
+    expect(getMeaningfulChildren(document)).toEqual(
+      <html>
+        <head />
+        <body>
+          <div>loading...</div>
+        </body>
+      </html>,
+    );
 
-    // @gate enableFloat
-    it('treats link rel stylesheet elements as a style resource when it includes a precedence when hydrating', async () => {
-      await actIntoEmptyDocument(() => {
-        const {pipe} = renderToPipeableStream(
-          <html>
-            <head />
-            <body>
-              <link rel="stylesheet" href="aresource" precedence="foo" />
-              <div>hello world</div>
-            </body>
-          </html>,
-        );
-        pipe(writable);
-      });
-      ReactDOMClient.hydrateRoot(
-        document,
-        <html>
-          <head />
-          <body>
-            <link rel="stylesheet" href="aresource" precedence="foo" />
-            <div>hello world</div>
-          </body>
-        </html>,
+    // This will enqueue a stylesheet resource in the intermediate blocked boundary (loading bar...).
+    await act(() => {
+      resolveText('bar');
+    });
+    expect(getMeaningfulChildren(document)).toEqual(
+      <html>
+        <head />
+        <body>
+          <div>loading...</div>
+        </body>
+      </html>,
+    );
+
+    // This will complete a segment in the top level boundary that is still blocked on another segment.
+    // It will flush the completed segment however the inner boundaries should not emit their style dependencies
+    // because they are not going to be revealed yet. instead their dependencies are hoisted to the blocked
+    // boundary (top level).
+    await act(() => {
+      resolveText('foo');
+    });
+    expect(getMeaningfulChildren(document)).toEqual(
+      <html>
+        <head />
+        <body>
+          <div>loading...</div>
+          <link rel="preload" href="foo" as="style" />
+          <link rel="preload" href="bar" as="style" />
+          <link rel="preload" href="baz" as="style" />
+        </body>
+      </html>,
+    );
+
+    // This resolves the last blocked segment on the top level boundary so we see all dependencies of the
+    // nested boundaries emitted at this level
+    await act(() => {
+      resolveText('qux');
+    });
+    expect(getMeaningfulChildren(document)).toEqual(
+      <html>
+        <head>
+          <link rel="stylesheet" href="foo" data-precedence="default" />
+          <link rel="stylesheet" href="bar" data-precedence="default" />
+          <link rel="stylesheet" href="baz" data-precedence="default" />
+          <link rel="stylesheet" href="qux" data-precedence="default" />
+        </head>
+        <body>
+          <div>loading...</div>
+          <link rel="preload" href="foo" as="style" />
+          <link rel="preload" href="bar" as="style" />
+          <link rel="preload" href="baz" as="style" />
+          <link rel="preload" href="qux" as="style" />
+        </body>
+      </html>,
+    );
+
+    // We load all stylesheets and confirm the content is revealed
+    await act(() => {
+      const event = document.createEvent('Events');
+      event.initEvent('load', true, true);
+      Array.from(document.querySelectorAll('link[rel="stylesheet"]')).forEach(
+        el => {
+          el.dispatchEvent(event);
+        },
       );
-      expect(Scheduler).toFlushWithoutYielding();
+    });
+    expect(getMeaningfulChildren(document)).toEqual(
+      <html>
+        <head>
+          <link rel="stylesheet" href="foo" data-precedence="default" />
+          <link rel="stylesheet" href="bar" data-precedence="default" />
+          <link rel="stylesheet" href="baz" data-precedence="default" />
+          <link rel="stylesheet" href="qux" data-precedence="default" />
+        </head>
+        <body>
+          <div>
+            <div>
+              <div>foo</div>
+              <div>bar</div>
+              <div>
+                <div>baz</div>
+              </div>
+              <div>qux</div>
+            </div>
+          </div>
+          <link rel="preload" href="foo" as="style" />
+          <link rel="preload" href="bar" as="style" />
+          <link rel="preload" href="baz" as="style" />
+          <link rel="preload" href="qux" as="style" />
+        </body>
+      </html>,
+    );
+  });
 
-      expect(getMeaningfulChildren(document)).toEqual(
+  // @gate enableFloat
+  it('encodes attributes consistently whether resources are flushed in shell or in late boundaries', async () => {
+    function App() {
+      return (
         <html>
-          <head>
-            <link rel="stylesheet" href="aresource" data-precedence="foo" />
-          </head>
+          <head />
           <body>
-            <div>hello world</div>
+            <div>
+              <link
+                // This preload is explicit so it can flush with a lot of potential attrs
+                // We will duplicate this as a style that flushes after the shell
+                rel="stylesheet"
+                href="foo"
+                // precedence is not a special attribute for preloads so this will just flush as is
+                precedence="default"
+                // Some standard link props
+                crossOrigin="anonymous"
+                media="all"
+                integrity="somehash"
+                referrerPolicy="origin"
+                // data and non starndard attributes that should flush
+                data-foo={'"quoted"'}
+                nonStandardAttr="attr"
+                properlyformattednonstandardattr="attr"
+                // attributes that should be filtered out for violating certain rules
+                onSomething="this should be removed b/c event handler"
+                shouldnotincludefunctions={() => {}}
+                norsymbols={Symbol('foo')}
+              />
+              <Suspense fallback={'loading...'}>
+                <BlockedOn value="unblock">
+                  <link
+                    // This preload is explicit so it can flush with a lot of potential attrs
+                    // We will duplicate this as a style that flushes after the shell
+                    rel="stylesheet"
+                    href="bar"
+                    // opt-in property to get this treated as a resource
+                    precedence="default"
+                    // Some standard link props
+                    crossOrigin="anonymous"
+                    media="all"
+                    integrity="somehash"
+                    referrerPolicy="origin"
+                    // data and non starndard attributes that should flush
+                    data-foo={'"quoted"'}
+                    nonStandardAttr="attr"
+                    properlyformattednonstandardattr="attr"
+                    // attributes that should be filtered out for violating certain rules
+                    onSomething="this should be removed b/c event handler"
+                    shouldnotincludefunctions={() => {}}
+                    norsymbols={Symbol('foo')}
+                  />
+                </BlockedOn>
+              </Suspense>
+            </div>
           </body>
-        </html>,
+        </html>
       );
-    });
-
-    // @gate enableFloat
-    it('preloads stylesheets without a precedence prop when server rendering', async () => {
+    }
+    await expect(async () => {
       await actIntoEmptyDocument(() => {
-        const {pipe} = renderToPipeableStream(
-          <html>
-            <head />
-            <body>
-              <link rel="stylesheet" href="notaresource" />
-              <div>hello world</div>
-            </body>
-          </html>,
-        );
+        const {pipe} = renderToPipeableStream(<App />);
         pipe(writable);
       });
-
       expect(getMeaningfulChildren(document)).toEqual(
         <html>
           <head>
-            <link rel="preload" as="style" href="notaresource" />
+            <link
+              rel="stylesheet"
+              href="foo"
+              data-precedence="default"
+              crossorigin="anonymous"
+              media="all"
+              integrity="somehash"
+              referrerpolicy="origin"
+              data-foo={'"quoted"'}
+              nonstandardattr="attr"
+              properlyformattednonstandardattr="attr"
+            />
           </head>
           <body>
-            <link rel="stylesheet" href="notaresource" />
-            <div>hello world</div>
+            <div>loading...</div>
           </body>
         </html>,
       );
+    }).toErrorDev([
+      'React does not recognize the `nonStandardAttr` prop on a DOM element.' +
+        ' If you intentionally want it to appear in the DOM as a custom attribute,' +
+        ' spell it as lowercase `nonstandardattr` instead. If you accidentally passed it from a' +
+        ' parent component, remove it from the DOM element.',
+      'Invalid values for props `shouldnotincludefunctions`, `norsymbols` on <link> tag. Either remove them from' +
+        ' the element, or pass a string or number value to keep them in the DOM. For' +
+        ' details, see https://reactjs.org/link/attribute-behavior',
+    ]);
+
+    // Now we flush the stylesheet with the boundary
+    await act(() => {
+      resolveText('unblock');
     });
 
-    // @gate enableFloat
-    it('hoists style resources to the correct precedence', async () => {
-      await actIntoEmptyDocument(() => {
-        const {pipe} = renderToPipeableStream(
-          <html>
-            <head />
-            <body>
-              <link rel="stylesheet" href="foo1" precedence="foo" />
-              <link rel="stylesheet" href="default1" precedence="default" />
-              <link rel="stylesheet" href="foo2" precedence="foo" />
-              <div>hello world</div>
-            </body>
-          </html>,
-        );
-        pipe(writable);
-      });
-      expect(getMeaningfulChildren(document)).toEqual(
-        <html>
-          <head>
-            <link rel="stylesheet" href="foo1" data-precedence="foo" />
-            <link rel="stylesheet" href="foo2" data-precedence="foo" />
-            <link rel="stylesheet" href="default1" data-precedence="default" />
-          </head>
-          <body>
-            <div>hello world</div>
-          </body>
-        </html>,
-      );
+    expect(getMeaningfulChildren(document)).toEqual(
+      <html>
+        <head>
+          <link
+            rel="stylesheet"
+            href="foo"
+            data-precedence="default"
+            crossorigin="anonymous"
+            media="all"
+            integrity="somehash"
+            referrerpolicy="origin"
+            data-foo={'"quoted"'}
+            nonstandardattr="attr"
+            properlyformattednonstandardattr="attr"
+          />
+          <link
+            rel="stylesheet"
+            href="bar"
+            data-precedence="default"
+            crossorigin="anonymous"
+            media="all"
+            integrity="somehash"
+            referrerpolicy="origin"
+            data-foo={'"quoted"'}
+            nonstandardattr="attr"
+            properlyformattednonstandardattr="attr"
+          />
+        </head>
+        <body>
+          <div>loading...</div>
+          <link
+            rel="preload"
+            as="style"
+            href="bar"
+            crossorigin="anonymous"
+            media="all"
+            integrity="somehash"
+            referrerpolicy="origin"
+          />
+        </body>
+      </html>,
+    );
+  });
 
-      ReactDOMClient.hydrateRoot(
-        document,
+  // @gate enableFloat
+  it('boundary stylesheet resource dependencies hoist to a parent boundary when flushed inline', async () => {
+    await actIntoEmptyDocument(() => {
+      const {pipe} = renderToPipeableStream(
         <html>
           <head />
           <body>
-            <link rel="stylesheet" href="bar1" precedence="bar" />
-            <link rel="stylesheet" href="foo3" precedence="foo" />
-            <link rel="stylesheet" href="default2" precedence="default" />
-            <div>hello world</div>
-          </body>
-        </html>,
-      );
-      expect(Scheduler).toFlushWithoutYielding();
-      expect(getMeaningfulChildren(document)).toEqual(
-        <html>
-          <head>
-            <link rel="stylesheet" href="foo1" data-precedence="foo" />
-            <link rel="stylesheet" href="foo2" data-precedence="foo" />
-            <link rel="stylesheet" href="foo3" data-precedence="foo" />
-            <link rel="stylesheet" href="default1" data-precedence="default" />
-            <link rel="stylesheet" href="default2" data-precedence="default" />
-            <link rel="stylesheet" href="bar1" data-precedence="bar" />
-            <link rel="preload" as="style" href="bar1" />
-            <link rel="preload" as="style" href="foo3" />
-            <link rel="preload" as="style" href="default2" />
-          </head>
-          <body>
-            <div>hello world</div>
+            <div>
+              <Suspense fallback="loading A...">
+                <BlockedOn value="unblock">
+                  <AsyncText text="A" />
+                  <link rel="stylesheet" href="A" precedence="A" />
+                  <Suspense fallback="loading AA...">
+                    <AsyncText text="AA" />
+                    <link rel="stylesheet" href="AA" precedence="AA" />
+                    <Suspense fallback="loading AAA...">
+                      <AsyncText text="AAA" />
+                      <link rel="stylesheet" href="AAA" precedence="AAA" />
+                      <Suspense fallback="loading AAAA...">
+                        <AsyncText text="AAAA" />
+                        <link rel="stylesheet" href="AAAA" precedence="AAAA" />
+                      </Suspense>
+                    </Suspense>
+                  </Suspense>
+                </BlockedOn>
+              </Suspense>
+            </div>
           </body>
         </html>,
       );
+      pipe(writable);
     });
+    expect(getMeaningfulChildren(document)).toEqual(
+      <html>
+        <head />
+        <body>
+          <div>loading A...</div>
+        </body>
+      </html>,
+    );
 
-    // @gate enableFloat
-    it('retains styles even after the last referring Resource unmounts', async () => {
-      // This test is true until a future update where there is some form of garbage collection.
-      const root = ReactDOMClient.createRoot(document);
+    await act(() => {
+      resolveText('unblock');
+      resolveText('AAAA');
+      resolveText('AA');
+    });
+    expect(getMeaningfulChildren(document)).toEqual(
+      <html>
+        <head />
+        <body>
+          <div>loading A...</div>
+          <link rel="preload" as="style" href="A" />
+          <link rel="preload" as="style" href="AA" />
+          <link rel="preload" as="style" href="AAA" />
+          <link rel="preload" as="style" href="AAAA" />
+        </body>
+      </html>,
+    );
 
-      root.render(
-        <html>
-          <head />
-          <body>
-            hello world
-            <link rel="stylesheet" href="foo" precedence="foo" />
-          </body>
-        </html>,
-      );
-      expect(Scheduler).toFlushWithoutYielding();
+    await act(() => {
+      resolveText('A');
+    });
+    await act(() => {
+      document.querySelectorAll('link[rel="stylesheet"]').forEach(l => {
+        const event = document.createEvent('Events');
+        event.initEvent('load', true, true);
+        l.dispatchEvent(event);
+      });
+    });
+    expect(getMeaningfulChildren(document)).toEqual(
+      <html>
+        <head>
+          <link rel="stylesheet" href="A" data-precedence="A" />
+          <link rel="stylesheet" href="AA" data-precedence="AA" />
+        </head>
+        <body>
+          <div>
+            {'A'}
+            {'AA'}
+            {'loading AAA...'}
+          </div>
+          <link rel="preload" as="style" href="A" />
+          <link rel="preload" as="style" href="AA" />
+          <link rel="preload" as="style" href="AAA" />
+          <link rel="preload" as="style" href="AAAA" />
+        </body>
+      </html>,
+    );
 
-      root.render(
-        <html>
-          <head />
-          <body>hello world</body>
-        </html>,
-      );
-      expect(Scheduler).toFlushWithoutYielding();
-      expect(getMeaningfulChildren(document)).toEqual(
+    await act(() => {
+      resolveText('AAA');
+    });
+    await act(() => {
+      document.querySelectorAll('link[rel="stylesheet"]').forEach(l => {
+        const event = document.createEvent('Events');
+        event.initEvent('load', true, true);
+        l.dispatchEvent(event);
+      });
+    });
+    expect(getMeaningfulChildren(document)).toEqual(
+      <html>
+        <head>
+          <link rel="stylesheet" href="A" data-precedence="A" />
+          <link rel="stylesheet" href="AA" data-precedence="AA" />
+          <link rel="stylesheet" href="AAA" data-precedence="AAA" />
+          <link rel="stylesheet" href="AAAA" data-precedence="AAAA" />
+        </head>
+        <body>
+          <div>
+            {'A'}
+            {'AA'}
+            {'AAA'}
+            {'AAAA'}
+          </div>
+          <link rel="preload" as="style" href="A" />
+          <link rel="preload" as="style" href="AA" />
+          <link rel="preload" as="style" href="AAA" />
+          <link rel="preload" as="style" href="AAAA" />
+        </body>
+      </html>,
+    );
+  });
+
+  // @gate enableFloat
+  it('always enforces crossOrigin "anonymous" for font preloads', async () => {
+    function App() {
+      ReactDOM.preload('foo', {as: 'font'});
+      ReactDOM.preload('bar', {as: 'font', crossOrigin: 'foo'});
+      ReactDOM.preload('baz', {as: 'font', crossOrigin: 'use-credentials'});
+      ReactDOM.preload('qux', {as: 'font', crossOrigin: 'anonymous'});
+      return (
         <html>
-          <head>
-            <link rel="stylesheet" href="foo" data-precedence="foo" />
-          </head>
-          <body>hello world</body>
-        </html>,
+          <head />
+          <body />
+        </html>
       );
+    }
+    await actIntoEmptyDocument(() => {
+      const {pipe} = renderToPipeableStream(<App />);
+      pipe(writable);
     });
+    expect(getMeaningfulChildren(document)).toEqual(
+      <html>
+        <head>
+          <link rel="preload" as="font" href="foo" crossorigin="" />
+          <link rel="preload" as="font" href="bar" crossorigin="" />
+          <link rel="preload" as="font" href="baz" crossorigin="" />
+          <link rel="preload" as="font" href="qux" crossorigin="" />
+        </head>
+        <body />
+      </html>,
+    );
+  });
 
-    // @gate enableFloat && enableHostSingletons && enableClientRenderFallbackOnTextMismatch
-    it('retains styles even when a new html, head, and/body mount', async () => {
-      await actIntoEmptyDocument(() => {
-        const {pipe} = renderToPipeableStream(
+  describe('ReactDOM.preload(href, { as: ... })', () => {
+    // @gate enableFloat
+    it('creates a preload resource when called', async () => {
+      function App() {
+        ReactDOM.preload('foo', {as: 'style'});
+        return (
           <html>
-            <head />
             <body>
-              <link rel="stylesheet" href="foo" precedence="foo" />
-              <link rel="stylesheet" href="bar" precedence="bar" />
-              server
+              <Suspense fallback="loading...">
+                <BlockedOn value="blocked">
+                  <Component />
+                </BlockedOn>
+              </Suspense>
             </body>
-          </html>,
+          </html>
         );
+      }
+      function Component() {
+        ReactDOM.preload('bar', {as: 'script'});
+        return <div>hello</div>;
+      }
+
+      await actIntoEmptyDocument(() => {
+        const {pipe} = renderToPipeableStream(<App />);
         pipe(writable);
       });
-      const errors = [];
-      ReactDOMClient.hydrateRoot(
-        document,
+      expect(getMeaningfulChildren(document)).toEqual(
         <html>
           <head>
-            <link rel="stylesheet" href="qux" precedence="qux" />
-            <link rel="stylesheet" href="foo" precedence="foo" />
+            <link rel="preload" as="style" href="foo" />
           </head>
-          <body>client</body>
+          <body>loading...</body>
         </html>,
-        {
-          onRecoverableError(error) {
-            errors.push(error.message);
-          },
-        },
-      );
-      expect(() => {
-        expect(Scheduler).toFlushWithoutYielding();
-      }).toErrorDev(
-        [
-          'Warning: Text content did not match. Server: "server" Client: "client"',
-          'Warning: An error occurred during hydration. The server HTML was replaced with client content in <#document>.',
-        ],
-        {withoutStack: 1},
       );
+
+      await act(() => {
+        resolveText('blocked');
+      });
       expect(getMeaningfulChildren(document)).toEqual(
         <html>
           <head>
-            <link rel="stylesheet" href="foo" data-precedence="foo" />
-            <link rel="stylesheet" href="bar" data-precedence="bar" />
-            <link rel="stylesheet" href="qux" data-precedence="qux" />
+            <link rel="preload" as="style" href="foo" />
           </head>
-          <body>client</body>
+          <body>
+            <div>hello</div>
+            <link rel="preload" as="script" href="bar" />
+          </body>
         </html>,
       );
-    });
 
-    // @gate enableFloat && !enableHostSingletons
-    it('retains styles even when a new html, head, and/body mount - without HostSingleton', async () => {
-      await actIntoEmptyDocument(() => {
-        const {pipe} = renderToPipeableStream(
+      function ClientApp() {
+        ReactDOM.preload('foo', {as: 'style'});
+        React.useInsertionEffect(() => ReactDOM.preload('bar', {as: 'script'}));
+        React.useLayoutEffect(() => ReactDOM.preload('baz', {as: 'font'}));
+        React.useEffect(() => ReactDOM.preload('qux', {as: 'style'}));
+        return (
           <html>
-            <head />
             <body>
-              <link rel="stylesheet" href="foo" precedence="foo" />
-              <link rel="stylesheet" href="bar" precedence="bar" />
-              server
+              <Suspense fallback="loading...">
+                <div>hello</div>
+              </Suspense>
             </body>
-          </html>,
+          </html>
         );
-        pipe(writable);
-      });
-      const errors = [];
-      ReactDOMClient.hydrateRoot(
-        document,
-        <html>
-          <head>
-            <link rel="stylesheet" href="qux" precedence="qux" />
-            <link rel="stylesheet" href="foo" precedence="foo" />
-          </head>
-          <body>client</body>
-        </html>,
-        {
-          onRecoverableError(error) {
-            errors.push(error.message);
-          },
-        },
-      );
-      expect(() => {
-        expect(Scheduler).toFlushWithoutYielding();
-      }).toErrorDev(
-        [
-          'Warning: Text content did not match. Server: "server" Client: "client"',
-          'Warning: An error occurred during hydration. The server HTML was replaced with client content in <#document>.',
-        ],
-        {withoutStack: 1},
-      );
+      }
+      ReactDOMClient.hydrateRoot(document, <ClientApp />);
+      expect(Scheduler).toFlushWithoutYielding();
       expect(getMeaningfulChildren(document)).toEqual(
         <html>
           <head>
-            <link rel="stylesheet" href="qux" data-precedence="qux" />
-            <link rel="stylesheet" href="foo" data-precedence="foo" />
+            <link rel="preload" as="style" href="foo" />
+            <link rel="preload" as="font" href="baz" crossorigin="" />
+            <link rel="preload" as="style" href="qux" />
           </head>
-          <body>client</body>
-        </html>,
-      );
-    });
-
-    // @gate enableFloat && enableHostSingletons
-    it('retains styles in head through head remounts', async () => {
-      const root = ReactDOMClient.createRoot(document);
-      root.render(
-        <html>
-          <head key={1} />
           <body>
-            <link rel="stylesheet" href="foo" precedence="foo" />
-            <link rel="stylesheet" href="bar" precedence="bar" />
-            {null}
-            hello
+            <div>hello</div>
+            <link rel="preload" as="script" href="bar" />
           </body>
         </html>,
       );
-      expect(Scheduler).toFlushWithoutYielding();
+    });
+
+    // @gate enableFloat
+    it('can seed connection props for stylesheet and script resources', async () => {
+      function App() {
+        ReactDOM.preload('foo', {
+          as: 'style',
+          crossOrigin: 'use-credentials',
+          integrity: 'some hash',
+        });
+        return (
+          <html>
+            <body>
+              <div>hello</div>
+              <link rel="stylesheet" href="foo" precedence="default" />
+            </body>
+          </html>
+        );
+      }
+
+      await actIntoEmptyDocument(() => {
+        const {pipe} = renderToPipeableStream(<App />);
+        pipe(writable);
+      });
+
       expect(getMeaningfulChildren(document)).toEqual(
         <html>
           <head>
-            <link rel="stylesheet" href="foo" data-precedence="foo" />
-            <link rel="stylesheet" href="bar" data-precedence="bar" />
+            <link
+              rel="stylesheet"
+              href="foo"
+              data-precedence="default"
+              crossorigin="use-credentials"
+              integrity="some hash"
+            />
           </head>
-          <body>hello</body>
-        </html>,
-      );
-
-      root.render(
-        <html>
-          <head key={2} />
           <body>
-            <link rel="stylesheet" href="foo" precedence="foo" />
-            {null}
-            <link rel="stylesheet" href="baz" precedence="baz" />
-            hello
+            <div>hello</div>
           </body>
         </html>,
       );
-      expect(Scheduler).toFlushWithoutYielding();
-      // The reason we do not see preloads in the head is they are inserted synchronously
-      // during render and then when the new singleton mounts it resets it's content, retaining only styles
-      expect(getMeaningfulChildren(document)).toEqual(
-        <html>
-          <head>
-            <link rel="stylesheet" href="foo" data-precedence="foo" />
-            <link rel="stylesheet" href="bar" data-precedence="bar" />
-            <link rel="stylesheet" href="baz" data-precedence="baz" />
-            <link rel="preload" href="baz" as="style" />
-          </head>
-          <body>hello</body>
-        </html>,
-      );
+    });
+
+    // @gate enableFloat
+    it('warns if you do not pass in a valid href argument or options argument', async () => {
+      function App() {
+        ReactDOM.preload();
+        ReactDOM.preload('');
+        ReactDOM.preload('foo', null);
+        ReactDOM.preload('foo', {});
+        ReactDOM.preload('foo', {as: 'foo'});
+        return <div>foo</div>;
+      }
+
+      await expect(async () => {
+        await act(() => {
+          renderToPipeableStream(<App />).pipe(writable);
+        });
+      }).toErrorDev([
+        'ReactDOM.preload(): Expected the `href` argument (first) to be a non-empty string but encountered `undefined` instead.',
+        'ReactDOM.preload(): Expected the `href` argument (first) to be a non-empty string but encountered an empty string instead.',
+        'ReactDOM.preload(): Expected the `options` argument (second) to be an object with an `as` property describing the type of resource to be preloaded but encountered `null` instead.',
+        'ReactDOM.preload(): Expected the `as` property in the `options` argument (second) to contain a string value describing the type of resource to be preloaded but encountered `undefined` instead. Values that are valid in for the `as` attribute of a `<link rel="preload" as="..." />` tag are valid here.',
+      ]);
+    });
+
+    // @gate enableFloat
+    it('warns if you pass incompatible options to two `ReactDOM.preload(...)` with the same href', async () => {
+      function Component() {
+        ReactDOM.preload('foo', {
+          as: 'font',
+          crossOrigin: 'use-credentials',
+        });
+        ReactDOM.preload('foo', {
+          as: 'font',
+          integrity: 'some hash',
+          crossOrigin: 'anonymous',
+        });
+        ReactDOM.preload('foo', {
+          as: 'font',
+          extra: 'ignored',
+        });
+      }
+
+      await expect(async () => {
+        await actIntoEmptyDocument(() => {
+          renderToPipeableStream(
+            <html>
+              <body>
+                <Component />
+              </body>
+            </html>,
+          );
+        });
+      }).toErrorDev([
+        'Warning: ReactDOM.preload(): The options provided conflict with another call to `ReactDOM.preload("foo", { as: "font", ...})`. React will always use the options it first encounters when preloading a resource for a given `href` and `as` type, and any later options will be ignored if different. Try updating all calls to `ReactDOM.preload()` with the same `href` and `as` type to use the same options, or eliminate one of the calls.\n  "integrity" option value: "some hash", missing from original options\n  "crossOrigin" option value: "anonymous", original option value: "use-credentials"',
+        'Warning: ReactDOM.preload(): The options provided conflict with another call to `ReactDOM.preload("foo", { as: "font", ...})`. React will always use the options it first encounters when preloading a resource for a given `href` and `as` type, and any later options will be ignored if different. Try updating all calls to `ReactDOM.preload()` with the same `href` and `as` type to use the same options, or eliminate one of the calls.\n  "crossOrigin" missing from options, original option value: "use-credentials"',
+      ]);
+    });
+
+    // @gate enableFloat
+    it('warns if you pass incompatible options to two `ReactDOM.preload(...)` when an implicit preload already exists with the same href', async () => {
+      function Component() {
+        ReactDOM.preload('foo', {
+          as: 'style',
+          crossOrigin: 'use-credentials',
+        });
+      }
+
+      await expect(async () => {
+        await actIntoEmptyDocument(() => {
+          renderToPipeableStream(
+            <html>
+              <body>
+                <link
+                  rel="stylesheet"
+                  href="foo"
+                  integrity="some hash"
+                  media="print"
+                />
+                <Component />
+              </body>
+            </html>,
+          );
+        });
+      }).toErrorDev([
+        'ReactDOM.preload(): For `href` "foo", The options provided conflict with props on a matching <link rel="stylesheet" ... /> element. When the preload options disagree with the underlying resource it usually means the browser will not be able to use the preload when the resource is fetched, negating any benefit the preload would provide. React will preload the resource using props derived from the resource instead and ignore the options provided to the `ReactDOM.preload()` call. In general, preloading is useful when you expect to render a resource soon but have not yet done so. In this case since the underlying resource was already rendered the preload call may be extraneous. Try removing the call, otherwise try adjusting both the props on the <link rel="stylesheet" ... /> and the options passed to `ReactDOM.preload()` to agree.\n  "integrity" missing from options, underlying prop value: "some hash"\n  "media" missing from options, underlying prop value: "print"\n  "crossOrigin" option value: "use-credentials", missing from underlying props',
+      ]);
     });
   });
 
-  describe('script resources', () => {
+  describe('ReactDOM.preinit(href, { as: ... })', () => {
     // @gate enableFloat
-    it('treats async scripts without onLoad or onError as Resources', async () => {
-      await actIntoEmptyDocument(() => {
-        const {pipe} = renderToPipeableStream(
+    it('creates a stylesheet resource when ReactDOM.preinit(..., {as: "style" }) is called', async () => {
+      function App() {
+        ReactDOM.preinit('foo', {as: 'style'});
+        return (
           <html>
-            <head />
             <body>
-              <script src="foo" async={true} />
-              <script src="bar" async={true} onLoad={() => {}} />
-              <script src="baz" data-meaningful="" />
-              hello world
+              <Suspense fallback="loading...">
+                <BlockedOn value="bar">
+                  <Component />
+                </BlockedOn>
+              </Suspense>
             </body>
-          </html>,
+          </html>
         );
+      }
+
+      function Component() {
+        ReactDOM.preinit('bar', {as: 'style'});
+        return <div>hello</div>;
+      }
+
+      await actIntoEmptyDocument(() => {
+        const {pipe} = renderToPipeableStream(<App />);
         pipe(writable);
       });
-      // The plain async script is converted to a resource and emitted as part of the shell
-      // The async script with onLoad is preloaded in the shell but is expecting to be added
-      // during hydration. This is novel, the script is NOT a HostResource but it also will
-      // never hydrate
-      // The regular script is just a normal html that should hydrate with a HostComponent
       expect(getMeaningfulChildren(document)).toEqual(
         <html>
           <head>
-            <script src="foo" async="" />
-            <link rel="preload" href="bar" as="script" />
+            <link rel="stylesheet" href="foo" data-precedence="default" />
           </head>
-          <body>
-            <script src="baz" data-meaningful="" />
-            hello world
-          </body>
+          <body>loading...</body>
         </html>,
       );
 
-      ReactDOMClient.hydrateRoot(
-        document,
+      await act(() => {
+        resolveText('bar');
+      });
+      // The reason we do not see the "bar" stylesheet here is that ReactDOM.preinit is not about
+      // encoding a resource dependency but is a hint that a resource will be used in the near future.
+      // If we call preinit on the server after the shell has flushed the best we can do is emit a preload
+      // because any flushing suspense boundaries are not actually dependent on that resource and we don't
+      // want to delay reveal based on when that resource loads.
+      expect(getMeaningfulChildren(document)).toEqual(
         <html>
-          <head />
+          <head>
+            <link rel="stylesheet" href="foo" data-precedence="default" />
+          </head>
           <body>
-            <script src="foo" async={true} />
-            <script src="bar" async={true} onLoad={() => {}} />
-            <script src="baz" data-meaningful="" />
-            hello world
+            <div>hello</div>
+            <link rel="preload" href="bar" as="style" />
           </body>
         </html>,
       );
+
+      function ClientApp() {
+        ReactDOM.preinit('bar', {as: 'style'});
+        return (
+          <html>
+            <body>
+              <Suspense fallback="loading...">
+                <div>hello</div>
+              </Suspense>
+            </body>
+          </html>
+        );
+      }
+
+      ReactDOMClient.hydrateRoot(document, <ClientApp />);
       expect(Scheduler).toFlushWithoutYielding();
-      // The async script with onLoad is inserted in the right place but does not cause the hydration
-      // to fail.
       expect(getMeaningfulChildren(document)).toEqual(
         <html>
           <head>
-            <script src="foo" async="" />
-            <link rel="preload" href="bar" as="script" />
+            <link rel="stylesheet" href="foo" data-precedence="default" />
+            <link rel="stylesheet" href="bar" data-precedence="default" />
           </head>
           <body>
-            <script src="bar" async="" />
-            <script src="baz" data-meaningful="" />
-            hello world
+            <div>hello</div>
+            <link rel="preload" href="bar" as="style" />
           </body>
         </html>,
       );
     });
-  });
 
-  // @gate enableFloat
-  it('client renders a boundary if a style Resource dependency fails to load', async () => {
-    function BlockedOn({text, children}) {
-      readText(text);
-      return children;
-    }
-    function App() {
-      return (
+    // @gate enableFloat
+    it('creates a preload resource when ReactDOM.preinit(..., {as: "style" }) is called outside of render on the client', async () => {
+      function App() {
+        React.useEffect(() => {
+          ReactDOM.preinit('foo', {as: 'style'});
+        }, []);
+        return (
+          <html>
+            <body>foo</body>
+          </html>
+        );
+      }
+
+      const root = ReactDOMClient.createRoot(document);
+      root.render(<App />);
+      expect(Scheduler).toFlushWithoutYielding();
+      expect(getMeaningfulChildren(document)).toEqual(
         <html>
-          <head />
-          <body>
-            <Suspense fallback="loading...">
-              <BlockedOn text="unblock">
-                <link rel="stylesheet" href="foo" precedence="arbitrary" />
-                <link rel="stylesheet" href="bar" precedence="arbitrary" />
-                Hello
-              </BlockedOn>
-            </Suspense>
-          </body>
-        </html>
+          <head>
+            <link rel="preload" href="foo" as="style" />
+          </head>
+          <body>foo</body>
+        </html>,
       );
-    }
-    await actIntoEmptyDocument(() => {
-      const {pipe} = renderToPipeableStream(<App />);
-      pipe(writable);
     });
 
-    await act(() => {
-      resolveText('unblock');
-    });
+    // @gate enableFloat
+    it('creates a script resource when ReactDOM.preinit(..., {as: "script" }) is called', async () => {
+      function App() {
+        ReactDOM.preinit('foo', {as: 'script'});
+        return (
+          <html>
+            <body>
+              <Suspense fallback="loading...">
+                <BlockedOn value="bar">
+                  <Component />
+                </BlockedOn>
+              </Suspense>
+            </body>
+          </html>
+        );
+      }
 
-    expect(getMeaningfulChildren(document)).toEqual(
-      <html>
-        <head>
-          <link rel="stylesheet" href="foo" data-precedence="arbitrary" />
-          <link rel="stylesheet" href="bar" data-precedence="arbitrary" />
-        </head>
-        <body>
-          loading...
-          <link rel="preload" href="foo" as="style" />
-          <link rel="preload" href="bar" as="style" />
-        </body>
-      </html>,
-    );
+      function Component() {
+        ReactDOM.preinit('bar', {as: 'script'});
+        return <div>hello</div>;
+      }
 
-    await act(() => {
-      const barLink = document.querySelector(
-        'link[rel="stylesheet"][href="bar"]',
+      await actIntoEmptyDocument(() => {
+        const {pipe} = renderToPipeableStream(<App />);
+        pipe(writable);
+      });
+      expect(getMeaningfulChildren(document)).toEqual(
+        <html>
+          <head>
+            <script async="" src="foo" />
+          </head>
+          <body>loading...</body>
+        </html>,
       );
-      const event = document.createEvent('Events');
-      event.initEvent('error', true, true);
-      barLink.dispatchEvent(event);
-    });
-
-    const boundaryTemplateInstance = document.getElementById('B:0');
-    const suspenseInstance = boundaryTemplateInstance.previousSibling;
-
-    expect(suspenseInstance.data).toEqual('$!');
-    expect(boundaryTemplateInstance.dataset.dgst).toBe(
-      'Resource failed to load',
-    );
-
-    expect(getMeaningfulChildren(document)).toEqual(
-      <html>
-        <head>
-          <link rel="stylesheet" href="foo" data-precedence="arbitrary" />
-          <link rel="stylesheet" href="bar" data-precedence="arbitrary" />
-        </head>
-        <body>
-          loading...
-          <link rel="preload" href="foo" as="style" />
-          <link rel="preload" href="bar" as="style" />
-        </body>
-      </html>,
-    );
-
-    const errors = [];
-    ReactDOMClient.hydrateRoot(document, <App />, {
-      onRecoverableError(err, errInfo) {
-        errors.push(err.message);
-        errors.push(err.digest);
-      },
-    });
-    expect(Scheduler).toFlushWithoutYielding();
-    expect(getMeaningfulChildren(document)).toEqual(
-      <html>
-        <head>
-          <link rel="stylesheet" href="foo" data-precedence="arbitrary" />
-          <link rel="stylesheet" href="bar" data-precedence="arbitrary" />
-        </head>
-        <body>
-          <link rel="preload" href="foo" as="style" />
-          <link rel="preload" href="bar" as="style" />
-          Hello
-        </body>
-      </html>,
-    );
-    expect(errors).toEqual([
-      'The server could not finish this Suspense boundary, likely due to an error during server rendering. Switched to client rendering.',
-      'Resource failed to load',
-    ]);
-  });
 
-  // @gate enableFloat
-  it('treats stylesheet links with a precedence as a resource', async () => {
-    await actIntoEmptyDocument(() => {
-      const {pipe} = renderToPipeableStream(
+      await act(() => {
+        resolveText('bar');
+      });
+      expect(getMeaningfulChildren(document)).toEqual(
         <html>
-          <head />
+          <head>
+            <script async="" src="foo" />
+          </head>
           <body>
-            <link rel="stylesheet" href="foo" precedence="arbitrary" />
-            Hello
+            <div>hello</div>
+            <script async="" src="bar" />
           </body>
-        </html>,
-      );
-      pipe(writable);
-    });
-    expect(getMeaningfulChildren(document)).toEqual(
-      <html>
-        <head>
-          <link rel="stylesheet" href="foo" data-precedence="arbitrary" />
-        </head>
-        <body>Hello</body>
-      </html>,
-    );
-
-    ReactDOMClient.hydrateRoot(
-      document,
-      <html>
-        <head />
-        <body>Hello</body>
-      </html>,
-    );
-    expect(Scheduler).toFlushWithoutYielding();
-    expect(getMeaningfulChildren(document)).toEqual(
-      <html>
-        <head>
-          <link rel="stylesheet" href="foo" data-precedence="arbitrary" />
-        </head>
-        <body>Hello</body>
-      </html>,
-    );
-  });
-
-  // @gate enableFloat
-  it('inserts text separators following text when followed by an element that is converted to a resource and thus removed from the html inline', async () => {
-    // If you render many of these as siblings the values get emitted as a single text with no separator sometimes
-    // because the link gets elided as a resource
-    function AsyncTextWithResource({text, href, precedence}) {
-      const value = readText(text);
-      return (
-        <>
-          {value}
-          <link rel="stylesheet" href={href} precedence={precedence} />
-        </>
+        </html>,
       );
-    }
 
-    await actIntoEmptyDocument(() => {
-      const {pipe} = renderToPipeableStream(
+      function ClientApp() {
+        ReactDOM.preinit('bar', {as: 'script'});
+        return (
+          <html>
+            <body>
+              <Suspense fallback="loading...">
+                <div>hello</div>
+              </Suspense>
+            </body>
+          </html>
+        );
+      }
+
+      ReactDOMClient.hydrateRoot(document, <ClientApp />);
+      expect(Scheduler).toFlushWithoutYielding();
+      expect(getMeaningfulChildren(document)).toEqual(
         <html>
-          <head />
+          <head>
+            <script async="" src="foo" />
+          </head>
           <body>
-            <AsyncTextWithResource text="foo" href="foo" precedence="one" />
-            <AsyncTextWithResource text="bar" href="bar" precedence="two" />
-            <AsyncTextWithResource text="baz" href="baz" precedence="three" />
+            <div>hello</div>
+            <script async="" src="bar" />
           </body>
         </html>,
       );
-      pipe(writable);
-      resolveText('foo');
-      resolveText('bar');
-      resolveText('baz');
     });
 
-    expect(getMeaningfulChildren(document)).toEqual(
-      <html>
-        <head>
-          <link rel="stylesheet" href="foo" data-precedence="one" />
-          <link rel="stylesheet" href="bar" data-precedence="two" />
-          <link rel="stylesheet" href="baz" data-precedence="three" />
-        </head>
-        <body>
-          {'foo'}
-          {'bar'}
-          {'baz'}
-        </body>
-      </html>,
-    );
-  });
+    // @gate enableFloat
+    it('creates a preload resource when ReactDOM.preinit(..., {as: "script" }) is called outside of render on the client', async () => {
+      function App() {
+        React.useEffect(() => {
+          ReactDOM.preinit('foo', {as: 'script'});
+        }, []);
+        return (
+          <html>
+            <body>foo</body>
+          </html>
+        );
+      }
 
-  // @gate enableFloat
-  it('hoists late stylesheets the correct precedence', async () => {
-    function AsyncListItemWithResource({text, href, precedence, ...rest}) {
-      const value = readText(text);
-      return (
-        <li>
-          <link
-            rel="stylesheet"
-            href={href}
-            precedence={precedence}
-            {...rest}
-          />
-          {value}
-        </li>
-      );
-    }
-    function BlockingChildren({text, children}) {
-      readText(text);
-      return children;
-    }
-    function PresetPrecedence() {
-      ReactDOM.preinit('preset', {as: 'style', precedence: 'preset'});
-    }
-    await actIntoEmptyDocument(() => {
-      const {pipe} = renderToPipeableStream(
+      const root = ReactDOMClient.createRoot(document);
+      root.render(<App />);
+      expect(Scheduler).toFlushWithoutYielding();
+      expect(getMeaningfulChildren(document)).toEqual(
         <html>
-          <head />
-          <body>
-            <link rel="stylesheet" href="initial" precedence="one" />
-            <PresetPrecedence />
-            <div>
-              <Suspense fallback="loading foo bar...">
-                <link rel="stylesheet" href="foo" precedence="one" />
-                <ul>
-                  <li>
-                    <AsyncText text="foo" />
-                  </li>
-                  <AsyncListItemWithResource
-                    text="bar"
-                    href="bar"
-                    precedence="default"
-                    data-foo="foo"
-                    crossOrigin="anonymous"
-                  />
-                </ul>
-              </Suspense>
-            </div>
-            <div>
-              <Suspense fallback="loading bar baz qux...">
-                <ul>
-                  <AsyncListItemWithResource
-                    text="bar"
-                    href="bar"
-                    precedence="default"
-                  />
-                  <AsyncListItemWithResource
-                    text="baz"
-                    href="baz"
-                    precedence="two"
-                  />
-                  <AsyncListItemWithResource
-                    text="qux"
-                    href="qux"
-                    precedence="one"
-                  />
-                </ul>
-              </Suspense>
-            </div>
-            <div>
-              <Suspense fallback="loading bar baz qux...">
-                <BlockingChildren text="unblock">
-                  <ul>
-                    <AsyncListItemWithResource
-                      text="bar"
-                      href="bar"
-                      precedence="default"
-                    />
-                    <AsyncListItemWithResource
-                      text="baz"
-                      href="baz"
-                      precedence="two"
-                    />
-                    <AsyncListItemWithResource
-                      text="qux"
-                      href="qux"
-                      precedence="one"
-                    />
-                  </ul>
-                </BlockingChildren>
-              </Suspense>
-            </div>
-          </body>
+          <head>
+            <link rel="preload" href="foo" as="script" />
+          </head>
+          <body>foo</body>
         </html>,
       );
-      pipe(writable);
     });
 
-    expect(getMeaningfulChildren(document)).toEqual(
-      <html>
-        <head>
-          <link rel="stylesheet" href="initial" data-precedence="one" />
-          <link rel="stylesheet" href="preset" data-precedence="preset" />
-          <link rel="preload" href="foo" as="style" />
-        </head>
-        <body>
-          <div>loading foo bar...</div>
-          <div>loading bar baz qux...</div>
-          <div>loading bar baz qux...</div>
-        </body>
-      </html>,
-    );
+    // @gate enableFloat
+    it('warns if you do not pass in a valid href argument or options argument', async () => {
+      function App() {
+        ReactDOM.preinit();
+        ReactDOM.preinit('');
+        ReactDOM.preinit('foo', null);
+        ReactDOM.preinit('foo', {});
+        ReactDOM.preinit('foo', {as: 'foo'});
+        return <div>foo</div>;
+      }
 
-    await act(() => {
-      resolveText('foo');
-      resolveText('bar');
+      await expect(async () => {
+        await act(() => {
+          renderToPipeableStream(<App />).pipe(writable);
+        });
+      }).toErrorDev([
+        'ReactDOM.preinit(): Expected the `href` argument (first) to be a non-empty string but encountered `undefined` instead',
+        'ReactDOM.preinit(): Expected the `href` argument (first) to be a non-empty string but encountered an empty string instead',
+        'ReactDOM.preinit(): Expected the `options` argument (second) to be an object with an `as` property describing the type of resource to be preinitialized but encountered `null` instead',
+        'ReactDOM.preinit(): Expected the `as` property in the `options` argument (second) to contain a valid value describing the type of resource to be preinitialized but encountered `undefined` instead. Valid values for `as` are "style" and "script".',
+        'ReactDOM.preinit(): Expected the `as` property in the `options` argument (second) to contain a valid value describing the type of resource to be preinitialized but encountered "foo" instead. Valid values for `as` are "style" and "script".',
+      ]);
     });
 
-    expect(getMeaningfulChildren(document)).toEqual(
-      <html>
-        <head>
-          <link rel="stylesheet" href="initial" data-precedence="one" />
-          <link rel="stylesheet" href="foo" data-precedence="one" />
-          <link rel="stylesheet" href="preset" data-precedence="preset" />
-          <link
-            rel="stylesheet"
-            href="bar"
-            data-precedence="default"
-            data-foo="foo"
-            crossorigin="anonymous"
-          />
-          <link rel="preload" href="foo" as="style" />
-        </head>
-        <body>
-          <div>loading foo bar...</div>
-          <div>loading bar baz qux...</div>
-          <div>loading bar baz qux...</div>
-          <link rel="preload" href="bar" as="style" crossorigin="anonymous" />
-        </body>
-      </html>,
-    );
+    // @gate enableFloat
+    it('warns if you pass options to `ReactDOM.preinit(..., { as: "style", ... })` incompatible with props from an existing <link rel="stylesheet" .../>', async () => {
+      function Component() {
+        ReactDOM.preinit('foo', {
+          as: 'style',
+          integrity: 'some hash',
+          crossOrigin: 'use-credentials',
+        });
+      }
 
-    await act(() => {
-      const link = document.querySelector('link[rel="stylesheet"][href="foo"]');
-      const event = document.createEvent('Events');
-      event.initEvent('load', true, true);
-      link.dispatchEvent(event);
+      await expect(async () => {
+        await actIntoEmptyDocument(() => {
+          renderToPipeableStream(
+            <html>
+              <body>
+                <link
+                  rel="stylesheet"
+                  href="foo"
+                  precedence="foo"
+                  crossOrigin="anonymous"
+                />
+                <Component />
+              </body>
+            </html>,
+          );
+        });
+      }).toErrorDev([
+        'ReactDOM.preinit(): For `href` "foo", the options provided conflict with props found on a <link rel="stylesheet" precedence="foo" href="foo" .../> that was already rendered. React will always use the props or options it first encounters for a hoistable stylesheet for a given `href` and any later props or options will be ignored if different. Generally, ReactDOM.preinit() is useful when you are not yet rendering a stylesheet but you anticipate it will be used soon. In this case the stylesheet was already rendered so preinitializing it does not provide any additional benefit. To resolve, try making the props and options agree between the <link rel="stylesheet" .../> and the `ReactDOM.preinit()` call or remove the `ReactDOM.preinit()` call.\n  "precedence" missing from options, prop value: "foo"\n  "integrity" option value: "some hash", missing from props\n  "crossOrigin" option value: "use-credentials", prop value: "anonymous"',
+      ]);
     });
 
-    expect(getMeaningfulChildren(document)).toEqual(
-      <html>
-        <head>
-          <link rel="stylesheet" href="initial" data-precedence="one" />
-          <link rel="stylesheet" href="foo" data-precedence="one" />
-          <link rel="stylesheet" href="preset" data-precedence="preset" />
-          <link
-            rel="stylesheet"
-            href="bar"
-            data-precedence="default"
-            data-foo="foo"
-            crossorigin="anonymous"
-          />
-          <link rel="preload" href="foo" as="style" />
-        </head>
-        <body>
-          <div>loading foo bar...</div>
-          <div>loading bar baz qux...</div>
-          <div>loading bar baz qux...</div>
-          <link rel="preload" href="bar" as="style" crossorigin="anonymous" />
-        </body>
-      </html>,
-    );
+    // @gate enableFloat
+    it('warns if you pass incompatible options to two `ReactDOM.preinit(..., { as: "style", ... })` with the same href', async () => {
+      function Component() {
+        ReactDOM.preinit('foo', {
+          as: 'style',
+          precedence: 'foo',
+          crossOrigin: 'use-credentials',
+        });
+        ReactDOM.preinit('foo', {
+          as: 'style',
+          integrity: 'some hash',
+          crossOrigin: 'anonymous',
+        });
+      }
 
-    await act(() => {
-      const link = document.querySelector('link[rel="stylesheet"][href="bar"]');
-      const event = document.createEvent('Events');
-      event.initEvent('load', true, true);
-      link.dispatchEvent(event);
+      await expect(async () => {
+        await actIntoEmptyDocument(() => {
+          renderToPipeableStream(
+            <html>
+              <body>
+                <Component />
+              </body>
+            </html>,
+          );
+        });
+      }).toErrorDev([
+        'ReactDOM.preinit(): For `href` "foo", the options provided conflict with another call to `ReactDOM.preinit("foo", { as: "style", ... })`. React will always use the options it first encounters when preinitializing a hoistable stylesheet for a given `href` and any later options will be ignored if different. Try updating all calls to `ReactDOM.preinit()` for a given `href` to use the same options, or only call `ReactDOM.preinit()` once per `href`.\n  "precedence" missing from options, original option value: "foo"\n  "integrity" option value: "some hash", missing from original options\n  "crossOrigin" option value: "anonymous", original option value: "use-credentials"',
+      ]);
     });
 
-    expect(getMeaningfulChildren(document)).toEqual(
-      <html>
-        <head>
-          <link rel="stylesheet" href="initial" data-precedence="one" />
-          <link rel="stylesheet" href="foo" data-precedence="one" />
-          <link rel="stylesheet" href="preset" data-precedence="preset" />
-          <link
-            rel="stylesheet"
-            href="bar"
-            data-precedence="default"
-            data-foo="foo"
-            crossorigin="anonymous"
-          />
-          <link rel="preload" href="foo" as="style" />
-        </head>
-        <body>
-          <div>
-            <ul>
-              <li>foo</li>
-              <li>bar</li>
-            </ul>
-          </div>
-          <div>loading bar baz qux...</div>
-          <div>loading bar baz qux...</div>
-          <link rel="preload" href="bar" as="style" crossorigin="anonymous" />
-        </body>
-      </html>,
-    );
+    // @gate enableFloat
+    it('warns if you pass options to `ReactDOM.preinit(..., { as: "script", ... })` incompatible with props from an existing <script async={true} .../>', async () => {
+      function Component() {
+        ReactDOM.preinit('foo', {
+          as: 'script',
+          integrity: 'some hash',
+          crossOrigin: 'use-credentials',
+        });
+      }
+
+      await expect(async () => {
+        await actIntoEmptyDocument(() => {
+          renderToPipeableStream(
+            <html>
+              <body>
+                <script async={true} src="foo" crossOrigin="anonymous" />
+                <Component />
+              </body>
+            </html>,
+          );
+        });
+      }).toErrorDev([
+        'ReactDOM.preinit(): For `href` "foo", the options provided conflict with props found on a <script async={true} src="foo" .../> that was already rendered. React will always use the props or options it first encounters for a hoistable script for a given `href` and any later props or options will be ignored if different. Generally, ReactDOM.preinit() is useful when you are not yet rendering a script but you anticipate it will be used soon and want to go beyond preloading it and have it execute early. In this case the script was already rendered so preinitializing it does not provide any additional benefit. To resolve, try making the props and options agree between the <script .../> and the `ReactDOM.preinit()` call or remove the `ReactDOM.preinit()` call.\n  "integrity" option value: "some hash", missing from props\n  "crossOrigin" option value: "use-credentials", prop value: "anonymous"',
+      ]);
+    });
 
-    await act(() => {
-      resolveText('baz');
+    // @gate enableFloat
+    it('warns if you pass incompatible options to two `ReactDOM.preinit(..., { as: "script", ... })` with the same href', async () => {
+      function Component() {
+        ReactDOM.preinit('foo', {
+          as: 'script',
+          crossOrigin: 'use-credentials',
+        });
+        ReactDOM.preinit('foo', {
+          as: 'script',
+          integrity: 'some hash',
+          crossOrigin: 'anonymous',
+        });
+      }
+
+      await expect(async () => {
+        await actIntoEmptyDocument(() => {
+          renderToPipeableStream(
+            <html>
+              <body>
+                <Component />
+              </body>
+            </html>,
+          );
+        });
+      }).toErrorDev([
+        'ReactDOM.preinit(): For `href` "foo", the options provided conflict with another call to `ReactDOM.preinit("foo", { as: "script", ... })`. React will always use the options it first encounters when preinitializing a hoistable script for a given `href` and any later options will be ignored if different. Try updating all calls to `ReactDOM.preinit()` for a given `href` to use the same options, or only call `ReactDOM.preinit()` once per `href`.\n  "integrity" option value: "some hash", missing from original options\n  "crossOrigin" option value: "anonymous", original option value: "use-credentials"',
+      ]);
     });
+  });
 
-    expect(getMeaningfulChildren(document)).toEqual(
-      <html>
-        <head>
-          <link rel="stylesheet" href="initial" data-precedence="one" />
-          <link rel="stylesheet" href="foo" data-precedence="one" />
-          <link rel="stylesheet" href="preset" data-precedence="preset" />
-          <link
-            rel="stylesheet"
-            href="bar"
-            data-precedence="default"
-            data-foo="foo"
-            crossorigin="anonymous"
-          />
-          <link rel="preload" href="foo" as="style" />
-        </head>
-        <body>
-          <div>
-            <ul>
-              <li>foo</li>
-              <li>bar</li>
-            </ul>
-          </div>
-          <div>loading bar baz qux...</div>
-          <div>loading bar baz qux...</div>
-          <link rel="preload" as="style" href="bar" crossorigin="anonymous" />
-          <link rel="preload" as="style" href="baz" />
-        </body>
-      </html>,
-    );
+  describe('Stylesheet Resources', () => {
+    // @gate enableFloat
+    it('treats link rel stylesheet elements as a stylesheet resource when it includes a precedence when server rendering', async () => {
+      await actIntoEmptyDocument(() => {
+        const {pipe} = renderToPipeableStream(
+          <html>
+            <head />
+            <body>
+              <link rel="stylesheet" href="aresource" precedence="foo" />
+              <div>hello world</div>
+            </body>
+          </html>,
+        );
+        pipe(writable);
+      });
 
-    await act(() => {
-      resolveText('qux');
+      expect(getMeaningfulChildren(document)).toEqual(
+        <html>
+          <head>
+            <link rel="stylesheet" href="aresource" data-precedence="foo" />
+          </head>
+          <body>
+            <div>hello world</div>
+          </body>
+        </html>,
+      );
     });
 
-    expect(getMeaningfulChildren(document)).toEqual(
-      <html>
-        <head>
-          <link rel="stylesheet" href="initial" data-precedence="one" />
-          <link rel="stylesheet" href="foo" data-precedence="one" />
-          <link rel="stylesheet" href="qux" data-precedence="one" />
-          <link rel="stylesheet" href="preset" data-precedence="preset" />
-          <link
-            rel="stylesheet"
-            href="bar"
-            data-precedence="default"
-            data-foo="foo"
-            crossorigin="anonymous"
-          />
-          <link rel="stylesheet" href="baz" data-precedence="two" />
-          <link rel="preload" href="foo" as="style" />
-        </head>
-        <body>
-          <div>
-            <ul>
-              <li>foo</li>
-              <li>bar</li>
-            </ul>
-          </div>
-          <div>loading bar baz qux...</div>
-          <div>loading bar baz qux...</div>
-          <link rel="preload" as="style" href="bar" crossorigin="anonymous" />
-          <link rel="preload" as="style" href="baz" />
-          <link rel="preload" as="style" href="qux" />
-        </body>
-      </html>,
-    );
+    // @gate enableFloat
+    it('treats link rel stylesheet elements as a stylesheet resource when it includes a precedence when client rendering', async () => {
+      const root = ReactDOMClient.createRoot(document);
+      root.render(
+        <html>
+          <head />
+          <body>
+            <link rel="stylesheet" href="aresource" precedence="foo" />
+            <div>hello world</div>
+          </body>
+        </html>,
+      );
+      expect(Scheduler).toFlushWithoutYielding();
 
-    await act(() => {
-      const bazlink = document.querySelector(
-        'link[rel="stylesheet"][href="baz"]',
+      expect(getMeaningfulChildren(document)).toEqual(
+        <html>
+          <head>
+            <link rel="stylesheet" href="aresource" data-precedence="foo" />
+          </head>
+          <body>
+            <div>hello world</div>
+          </body>
+        </html>,
       );
-      const quxlink = document.querySelector(
-        'link[rel="stylesheet"][href="qux"]',
+    });
+
+    // @gate enableFloat
+    it('treats link rel stylesheet elements as a stylesheet resource when it includes a precedence when hydrating', async () => {
+      await actIntoEmptyDocument(() => {
+        const {pipe} = renderToPipeableStream(
+          <html>
+            <head />
+            <body>
+              <link rel="stylesheet" href="aresource" precedence="foo" />
+              <div>hello world</div>
+            </body>
+          </html>,
+        );
+        pipe(writable);
+      });
+      ReactDOMClient.hydrateRoot(
+        document,
+        <html>
+          <head />
+          <body>
+            <link rel="stylesheet" href="aresource" precedence="foo" />
+            <div>hello world</div>
+          </body>
+        </html>,
       );
-      const presetLink = document.querySelector(
-        'link[rel="stylesheet"][href="preset"]',
+      expect(Scheduler).toFlushWithoutYielding();
+
+      expect(getMeaningfulChildren(document)).toEqual(
+        <html>
+          <head>
+            <link rel="stylesheet" href="aresource" data-precedence="foo" />
+          </head>
+          <body>
+            <div>hello world</div>
+          </body>
+        </html>,
       );
-      const event = document.createEvent('Events');
-      event.initEvent('load', true, true);
-      bazlink.dispatchEvent(event);
-      quxlink.dispatchEvent(event);
-      presetLink.dispatchEvent(event);
     });
 
-    expect(getMeaningfulChildren(document)).toEqual(
-      <html>
-        <head>
-          <link rel="stylesheet" href="initial" data-precedence="one" />
-          <link rel="stylesheet" href="foo" data-precedence="one" />
-          <link rel="stylesheet" href="qux" data-precedence="one" />
-          <link rel="stylesheet" href="preset" data-precedence="preset" />
-          <link
-            rel="stylesheet"
-            href="bar"
-            data-precedence="default"
-            data-foo="foo"
-            crossorigin="anonymous"
-          />
-          <link rel="stylesheet" href="baz" data-precedence="two" />
-          <link rel="preload" href="foo" as="style" />
-        </head>
-        <body>
-          <div>
-            <ul>
-              <li>foo</li>
-              <li>bar</li>
-            </ul>
-          </div>
-          <div>
-            <ul>
-              <li>bar</li>
-              <li>baz</li>
-              <li>qux</li>
-            </ul>
-          </div>
-          <div>loading bar baz qux...</div>
-          <link rel="preload" as="style" href="bar" crossorigin="anonymous" />
-          <link rel="preload" as="style" href="baz" />
-          <link rel="preload" as="style" href="qux" />
-        </body>
-      </html>,
-    );
+    // @gate enableFloat
+    it('preloads stylesheets without a precedence prop when server rendering', async () => {
+      await actIntoEmptyDocument(() => {
+        const {pipe} = renderToPipeableStream(
+          <html>
+            <head />
+            <body>
+              <link rel="stylesheet" href="notaresource" />
+              <div>hello world</div>
+            </body>
+          </html>,
+        );
+        pipe(writable);
+      });
 
-    await act(() => {
-      resolveText('unblock');
+      expect(getMeaningfulChildren(document)).toEqual(
+        <html>
+          <head>
+            <link rel="preload" as="style" href="notaresource" />
+          </head>
+          <body>
+            <link rel="stylesheet" href="notaresource" />
+            <div>hello world</div>
+          </body>
+        </html>,
+      );
     });
 
-    expect(getMeaningfulChildren(document)).toEqual(
-      <html>
-        <head>
-          <link rel="stylesheet" href="initial" data-precedence="one" />
-          <link rel="stylesheet" href="foo" data-precedence="one" />
-          <link rel="stylesheet" href="qux" data-precedence="one" />
-          <link rel="stylesheet" href="preset" data-precedence="preset" />
-          <link
-            rel="stylesheet"
-            href="bar"
-            data-precedence="default"
-            data-foo="foo"
-            crossorigin="anonymous"
-          />
-          <link rel="stylesheet" href="baz" data-precedence="two" />
-          <link rel="preload" href="foo" as="style" />
-        </head>
-        <body>
-          <div>
-            <ul>
-              <li>foo</li>
-              <li>bar</li>
-            </ul>
-          </div>
-          <div>
-            <ul>
-              <li>bar</li>
-              <li>baz</li>
-              <li>qux</li>
-            </ul>
-          </div>
-          <div>
-            <ul>
-              <li>bar</li>
-              <li>baz</li>
-              <li>qux</li>
-            </ul>
-          </div>
-          <link rel="preload" as="style" href="bar" crossorigin="anonymous" />
-          <link rel="preload" as="style" href="baz" />
-          <link rel="preload" as="style" href="qux" />
-        </body>
-      </html>,
-    );
-  });
+    // @gate enableFloat
+    it('hoists stylesheet resources to the correct precedence', async () => {
+      await actIntoEmptyDocument(() => {
+        const {pipe} = renderToPipeableStream(
+          <html>
+            <head />
+            <body>
+              <link rel="stylesheet" href="foo1" precedence="foo" />
+              <link rel="stylesheet" href="default1" precedence="default" />
+              <link rel="stylesheet" href="foo2" precedence="foo" />
+              <div>hello world</div>
+            </body>
+          </html>,
+        );
+        pipe(writable);
+      });
+      expect(getMeaningfulChildren(document)).toEqual(
+        <html>
+          <head>
+            <link rel="stylesheet" href="foo1" data-precedence="foo" />
+            <link rel="stylesheet" href="foo2" data-precedence="foo" />
+            <link rel="stylesheet" href="default1" data-precedence="default" />
+          </head>
+          <body>
+            <div>hello world</div>
+          </body>
+        </html>,
+      );
 
-  // @gate enableFloat
-  it('normalizes style resource precedence for all boundaries inlined as part of the shell flush', async () => {
-    await actIntoEmptyDocument(() => {
-      const {pipe} = renderToPipeableStream(
+      ReactDOMClient.hydrateRoot(
+        document,
         <html>
           <head />
           <body>
-            <div>
-              outer
-              <link rel="stylesheet" href="1one" precedence="one" />
-              <link rel="stylesheet" href="1two" precedence="two" />
-              <link rel="stylesheet" href="1three" precedence="three" />
-              <link rel="stylesheet" href="1four" precedence="four" />
-              <Suspense fallback={null}>
-                <div>
-                  middle
-                  <link rel="stylesheet" href="2one" precedence="one" />
-                  <link rel="stylesheet" href="2two" precedence="two" />
-                  <link rel="stylesheet" href="2three" precedence="three" />
-                  <link rel="stylesheet" href="2four" precedence="four" />
-                  <Suspense fallback={null}>
-                    <div>
-                      inner
-                      <link rel="stylesheet" href="3five" precedence="five" />
-                      <link rel="stylesheet" href="3one" precedence="one" />
-                      <link rel="stylesheet" href="3two" precedence="two" />
-                      <link rel="stylesheet" href="3three" precedence="three" />
-                      <link rel="stylesheet" href="3four" precedence="four" />
-                    </div>
-                  </Suspense>
-                </div>
-              </Suspense>
-              <Suspense fallback={null}>
-                <div>middle</div>
-                <link rel="stylesheet" href="4one" precedence="one" />
-                <link rel="stylesheet" href="4two" precedence="two" />
-                <link rel="stylesheet" href="4three" precedence="three" />
-                <link rel="stylesheet" href="4four" precedence="four" />
-              </Suspense>
-            </div>
+            <link rel="stylesheet" href="bar1" precedence="bar" />
+            <link rel="stylesheet" href="foo3" precedence="foo" />
+            <link rel="stylesheet" href="default2" precedence="default" />
+            <div>hello world</div>
+          </body>
+        </html>,
+      );
+      expect(Scheduler).toFlushWithoutYielding();
+      expect(getMeaningfulChildren(document)).toEqual(
+        <html>
+          <head>
+            <link rel="stylesheet" href="foo1" data-precedence="foo" />
+            <link rel="stylesheet" href="foo2" data-precedence="foo" />
+            <link rel="stylesheet" href="foo3" data-precedence="foo" />
+            <link rel="stylesheet" href="default1" data-precedence="default" />
+            <link rel="stylesheet" href="default2" data-precedence="default" />
+            <link rel="stylesheet" href="bar1" data-precedence="bar" />
+            <link rel="preload" as="style" href="bar1" />
+            <link rel="preload" as="style" href="foo3" />
+            <link rel="preload" as="style" href="default2" />
+          </head>
+          <body>
+            <div>hello world</div>
           </body>
         </html>,
       );
-      pipe(writable);
     });
 
-    // The reason the href's aren't ordered linearly is that when boundaries complete their resources
-    // get hoisted to the shell directly so they can flush in the head. If a boundary doesn't suspend then
-    // child boundaries will complete before the parent boundary and thus have their resources hoist
-    // early. The reason precedences are still ordered correctly between child and parent is because
-    // the precedence ordering is determined upon first discovernig a resource rather than on hoist and
-    // so it follows render order
-    expect(getMeaningfulChildren(document)).toEqual(
-      <html>
-        <head>
-          <link rel="stylesheet" href="1one" data-precedence="one" />
-          <link rel="stylesheet" href="3one" data-precedence="one" />
-          <link rel="stylesheet" href="2one" data-precedence="one" />
-          <link rel="stylesheet" href="4one" data-precedence="one" />
+    // @gate enableFloat
+    it('retains styles even after the last referring Resource unmounts', async () => {
+      // This test is true until a future update where there is some form of garbage collection.
+      const root = ReactDOMClient.createRoot(document);
 
-          <link rel="stylesheet" href="1two" data-precedence="two" />
-          <link rel="stylesheet" href="3two" data-precedence="two" />
-          <link rel="stylesheet" href="2two" data-precedence="two" />
-          <link rel="stylesheet" href="4two" data-precedence="two" />
+      root.render(
+        <html>
+          <head />
+          <body>
+            hello world
+            <link rel="stylesheet" href="foo" precedence="foo" />
+          </body>
+        </html>,
+      );
+      expect(Scheduler).toFlushWithoutYielding();
 
-          <link rel="stylesheet" href="1three" data-precedence="three" />
-          <link rel="stylesheet" href="3three" data-precedence="three" />
-          <link rel="stylesheet" href="2three" data-precedence="three" />
-          <link rel="stylesheet" href="4three" data-precedence="three" />
+      root.render(
+        <html>
+          <head />
+          <body>hello world</body>
+        </html>,
+      );
+      expect(Scheduler).toFlushWithoutYielding();
+      expect(getMeaningfulChildren(document)).toEqual(
+        <html>
+          <head>
+            <link rel="stylesheet" href="foo" data-precedence="foo" />
+          </head>
+          <body>hello world</body>
+        </html>,
+      );
+    });
 
-          <link rel="stylesheet" href="1four" data-precedence="four" />
-          <link rel="stylesheet" href="3four" data-precedence="four" />
-          <link rel="stylesheet" href="2four" data-precedence="four" />
-          <link rel="stylesheet" href="4four" data-precedence="four" />
+    // @gate enableFloat && enableHostSingletons && enableClientRenderFallbackOnTextMismatch
+    it('retains styles even when a new html, head, and/body mount', async () => {
+      await actIntoEmptyDocument(() => {
+        const {pipe} = renderToPipeableStream(
+          <html>
+            <head />
+            <body>
+              <link rel="stylesheet" href="foo" precedence="foo" />
+              <link rel="stylesheet" href="bar" precedence="bar" />
+              server
+            </body>
+          </html>,
+        );
+        pipe(writable);
+      });
+      const errors = [];
+      ReactDOMClient.hydrateRoot(
+        document,
+        <html>
+          <head>
+            <link rel="stylesheet" href="qux" precedence="qux" />
+            <link rel="stylesheet" href="foo" precedence="foo" />
+          </head>
+          <body>client</body>
+        </html>,
+        {
+          onRecoverableError(error) {
+            errors.push(error.message);
+          },
+        },
+      );
+      expect(() => {
+        expect(Scheduler).toFlushWithoutYielding();
+      }).toErrorDev(
+        [
+          'Warning: Text content did not match. Server: "server" Client: "client"',
+          'Warning: An error occurred during hydration. The server HTML was replaced with client content in <#document>.',
+        ],
+        {withoutStack: 1},
+      );
+      expect(getMeaningfulChildren(document)).toEqual(
+        <html>
+          <head>
+            <link rel="stylesheet" href="foo" data-precedence="foo" />
+            <link rel="stylesheet" href="bar" data-precedence="bar" />
+            <link rel="stylesheet" href="qux" data-precedence="qux" />
+          </head>
+          <body>client</body>
+        </html>,
+      );
+    });
 
-          <link rel="stylesheet" href="3five" data-precedence="five" />
-        </head>
-        <body>
-          <div>
-            outer
-            <div>
-              middle<div>inner</div>
-            </div>
-            <div>middle</div>
-          </div>
-        </body>
-      </html>,
-    );
-  });
+    // @gate enableFloat && !enableHostSingletons
+    it('retains styles even when a new html, head, and/body mount - without HostSingleton', async () => {
+      await actIntoEmptyDocument(() => {
+        const {pipe} = renderToPipeableStream(
+          <html>
+            <head />
+            <body>
+              <link rel="stylesheet" href="foo" precedence="foo" />
+              <link rel="stylesheet" href="bar" precedence="bar" />
+              server
+            </body>
+          </html>,
+        );
+        pipe(writable);
+      });
+      const errors = [];
+      ReactDOMClient.hydrateRoot(
+        document,
+        <html>
+          <head>
+            <link rel="stylesheet" href="qux" precedence="qux" />
+            <link rel="stylesheet" href="foo" precedence="foo" />
+          </head>
+          <body>client</body>
+        </html>,
+        {
+          onRecoverableError(error) {
+            errors.push(error.message);
+          },
+        },
+      );
+      expect(() => {
+        expect(Scheduler).toFlushWithoutYielding();
+      }).toErrorDev(
+        [
+          'Warning: Text content did not match. Server: "server" Client: "client"',
+          'Warning: An error occurred during hydration. The server HTML was replaced with client content in <#document>.',
+        ],
+        {withoutStack: 1},
+      );
+      expect(getMeaningfulChildren(document)).toEqual(
+        <html>
+          <head>
+            <link rel="stylesheet" href="qux" data-precedence="qux" />
+            <link rel="stylesheet" href="foo" data-precedence="foo" />
+          </head>
+          <body>client</body>
+        </html>,
+      );
+    });
+
+    // @gate enableFloat && enableHostSingletons
+    it('retains styles in head through head remounts', async () => {
+      const root = ReactDOMClient.createRoot(document);
+      root.render(
+        <html>
+          <head key={1} />
+          <body>
+            <link rel="stylesheet" href="foo" precedence="foo" />
+            <link rel="stylesheet" href="bar" precedence="bar" />
+            {null}
+            hello
+          </body>
+        </html>,
+      );
+      expect(Scheduler).toFlushWithoutYielding();
+      expect(getMeaningfulChildren(document)).toEqual(
+        <html>
+          <head>
+            <link rel="stylesheet" href="foo" data-precedence="foo" />
+            <link rel="stylesheet" href="bar" data-precedence="bar" />
+          </head>
+          <body>hello</body>
+        </html>,
+      );
 
-  // @gate enableFloat
-  it('style resources are inserted according to precedence order on the client', async () => {
-    await actIntoEmptyDocument(() => {
-      const {pipe} = renderToPipeableStream(
+      root.render(
         <html>
-          <head />
+          <head key={2} />
           <body>
-            <div>
-              <link rel="stylesheet" href="foo" precedence="one" />
-              <link rel="stylesheet" href="bar" precedence="two" />
-              Hello
-            </div>
+            <link rel="stylesheet" href="foo" precedence="foo" />
+            {null}
+            <link rel="stylesheet" href="baz" precedence="baz" />
+            hello
           </body>
         </html>,
       );
-      pipe(writable);
+      expect(Scheduler).toFlushWithoutYielding();
+      // The reason we do not see preloads in the head is they are inserted synchronously
+      // during render and then when the new singleton mounts it resets it's content, retaining only styles
+      expect(getMeaningfulChildren(document)).toEqual(
+        <html>
+          <head>
+            <link rel="stylesheet" href="foo" data-precedence="foo" />
+            <link rel="stylesheet" href="bar" data-precedence="bar" />
+            <link rel="stylesheet" href="baz" data-precedence="baz" />
+            <link rel="preload" href="baz" as="style" />
+          </head>
+          <body>hello</body>
+        </html>,
+      );
     });
-
-    expect(getMeaningfulChildren(document)).toEqual(
-      <html>
-        <head>
-          <link rel="stylesheet" href="foo" data-precedence="one" />
-          <link rel="stylesheet" href="bar" data-precedence="two" />
-        </head>
-        <body>
-          <div>Hello</div>
-        </body>
-      </html>,
-    );
-
-    const root = ReactDOMClient.hydrateRoot(
-      document,
-      <html>
-        <head />
-        <body>
-          <div>
-            <link rel="stylesheet" href="foo" precedence="one" />
-            <link rel="stylesheet" href="bar" precedence="two" />
-            Hello
-          </div>
-        </body>
-      </html>,
-    );
-    expect(Scheduler).toFlushWithoutYielding();
-    expect(getMeaningfulChildren(document)).toEqual(
-      <html>
-        <head>
-          <link rel="stylesheet" href="foo" data-precedence="one" />
-          <link rel="stylesheet" href="bar" data-precedence="two" />
-        </head>
-        <body>
-          <div>Hello</div>
-        </body>
-      </html>,
-    );
-
-    root.render(
-      <html>
-        <head />
-        <body>
-          <div>Hello</div>
-          <link rel="stylesheet" href="baz" precedence="one" />
-        </body>
-      </html>,
-    );
-    expect(Scheduler).toFlushWithoutYielding();
-    expect(getMeaningfulChildren(document)).toEqual(
-      <html>
-        <head>
-          <link rel="stylesheet" href="foo" data-precedence="one" />
-          <link rel="stylesheet" href="baz" data-precedence="one" />
-          <link rel="stylesheet" href="bar" data-precedence="two" />
-          <link rel="preload" as="style" href="baz" />
-        </head>
-        <body>
-          <div>Hello</div>
-        </body>
-      </html>,
-    );
-  });
-
-  // @gate enableFloat
-  it('inserts preloads in render phase eagerly', async () => {
-    function Throw() {
-      throw new Error('Uh oh!');
-    }
-    class ErrorBoundary extends React.Component {
-      state = {hasError: false, error: null};
-      static getDerivedStateFromError(error) {
-        return {
-          hasError: true,
-          error,
-        };
-      }
-      render() {
-        if (this.state.hasError) {
-          return this.state.error.message;
-        }
-        return this.props.children;
-      }
-    }
-
-    const root = ReactDOMClient.createRoot(container);
-    root.render(
-      <ErrorBoundary>
-        <link rel="stylesheet" href="foo" precedence="default" />
-        <div>foo</div>
-        <Throw />
-      </ErrorBoundary>,
-    );
-    expect(Scheduler).toFlushWithoutYielding();
-    expect(getMeaningfulChildren(document)).toEqual(
-      <html>
-        <head>
-          <link rel="preload" href="foo" as="style" />
-        </head>
-        <body>
-          <div id="container">Uh oh!</div>
-        </body>
-      </html>,
-    );
-  });
-
-  // @gate enableFloat
-  it('does not emit preinit stylesheets if they are invoked after the shell flushes', async () => {
-    function PreinitsBlockedOn({text}) {
-      readText(text);
-      ReactDOM.preinit('one', {precedence: 'one', as: 'style'});
-      ReactDOM.preinit('two', {precedence: 'two', as: 'style'});
-      return null;
-    }
-    await actIntoEmptyDocument(() => {
-      const {pipe} = renderToPipeableStream(
+    // @gate enableFloat
+    it('can support styles inside portals to a shadowRoot', async () => {
+      const shadow = document.body.attachShadow({mode: 'open'});
+      const root = ReactDOMClient.createRoot(container);
+      root.render(
+        <>
+          <link rel="stylesheet" href="foo" precedence="default" />
+          {ReactDOM.createPortal(
+            <div>
+              <link
+                rel="stylesheet"
+                href="foo"
+                data-extra-prop="foo"
+                precedence="different"
+              />
+              shadow
+            </div>,
+            shadow,
+          )}
+          container
+        </>,
+      );
+      expect(Scheduler).toFlushWithoutYielding();
+      expect(getMeaningfulChildren(document)).toEqual(
         <html>
-          <head />
+          <head>
+            <link rel="stylesheet" href="foo" data-precedence="default" />
+            <link rel="preload" href="foo" as="style" />
+          </head>
           <body>
-            <div>
-              <link rel="stylesheet" href="foo" precedence="one" />
-              <link rel="stylesheet" href="bar" precedence="two" />
-              Hello
-            </div>
-            <div>
-              <Suspense fallback={'loading...'}>
-                <PreinitsBlockedOn text="foo" />
-                <AsyncText text="bar" />
-              </Suspense>
-            </div>
+            <div id="container">container</div>
           </body>
         </html>,
       );
-      pipe(writable);
+      expect(getMeaningfulChildren(shadow)).toEqual([
+        <link
+          rel="stylesheet"
+          href="foo"
+          data-precedence="different"
+          data-extra-prop="foo"
+        />,
+        <div>shadow</div>,
+      ]);
     });
+    // @gate enableFloat
+    it('can support styles inside portals to an element in shadowRoots', async () => {
+      const template = document.createElement('template');
+      template.innerHTML =
+        "<div><div id='shadowcontainer1'></div><div id='shadowcontainer2'></div></div>";
+      const shadow = document.body.attachShadow({mode: 'open'});
+      shadow.appendChild(template.content);
 
-    expect(getMeaningfulChildren(document)).toEqual(
-      <html>
-        <head>
-          <link rel="stylesheet" href="foo" data-precedence="one" />
-          <link rel="stylesheet" href="bar" data-precedence="two" />
-        </head>
-        <body>
-          <div>Hello</div>
-          <div>loading...</div>
-        </body>
-      </html>,
-    );
-
-    await act(() => {
-      resolveText('foo');
+      const shadowContainer1 = shadow.getElementById('shadowcontainer1');
+      const shadowContainer2 = shadow.getElementById('shadowcontainer2');
+      const root = ReactDOMClient.createRoot(container);
+      root.render(
+        <>
+          <link rel="stylesheet" href="foo" precedence="default" />
+          {ReactDOM.createPortal(
+            <div>
+              <link rel="stylesheet" href="foo" precedence="one" />
+              <link rel="stylesheet" href="bar" precedence="two" />1
+            </div>,
+            shadow,
+          )}
+          {ReactDOM.createPortal(
+            <div>
+              <link rel="stylesheet" href="foo" precedence="one" />
+              <link rel="stylesheet" href="baz" precedence="one" />2
+            </div>,
+            shadowContainer1,
+          )}
+          {ReactDOM.createPortal(
+            <div>
+              <link rel="stylesheet" href="bar" precedence="two" />
+              <link rel="stylesheet" href="qux" precedence="three" />3
+            </div>,
+            shadowContainer2,
+          )}
+          container
+        </>,
+      );
+      expect(Scheduler).toFlushWithoutYielding();
+      expect(getMeaningfulChildren(document)).toEqual(
+        <html>
+          <head>
+            <link rel="stylesheet" href="foo" data-precedence="default" />
+            <link rel="preload" href="foo" as="style" />
+            <link rel="preload" href="bar" as="style" />
+            <link rel="preload" href="baz" as="style" />
+            <link rel="preload" href="qux" as="style" />
+          </head>
+          <body>
+            <div id="container">container</div>
+          </body>
+        </html>,
+      );
+      expect(getMeaningfulChildren(shadow)).toEqual([
+        <link rel="stylesheet" href="foo" data-precedence="one" />,
+        <link rel="stylesheet" href="baz" data-precedence="one" />,
+        <link rel="stylesheet" href="bar" data-precedence="two" />,
+        <link rel="stylesheet" href="qux" data-precedence="three" />,
+        <div>
+          <div id="shadowcontainer1">
+            <div>2</div>
+          </div>
+          <div id="shadowcontainer2">
+            <div>3</div>
+          </div>
+        </div>,
+        <div>1</div>,
+      ]);
     });
-    expect(getMeaningfulChildren(document)).toEqual(
-      <html>
-        <head>
-          <link rel="stylesheet" href="foo" data-precedence="one" />
-          <link rel="stylesheet" href="bar" data-precedence="two" />
-        </head>
-        <body>
-          <div>Hello</div>
-          <div>loading...</div>
-          <link rel="preload" href="one" as="style" />
-          <link rel="preload" href="two" as="style" />
-        </body>
-      </html>,
-    );
+    // @gate enableFloat
+    it('escapes hrefs when selecting matching elements in the document when rendering Resources', async () => {
+      function App() {
+        ReactDOM.preload('preload', {as: 'style'});
+        ReactDOM.preload('with\nnewline', {as: 'style'});
+        return (
+          <html>
+            <head />
+            <body>
+              <link rel="stylesheet" href="style" precedence="style" />
+              <link rel="stylesheet" href="with\slashes" precedence="style" />
+              <div id="container" />
+            </body>
+          </html>
+        );
+      }
+      await actIntoEmptyDocument(() => {
+        const {pipe} = renderToPipeableStream(<App />);
+        pipe(writable);
+      });
 
-    await act(() => {
-      resolveText('bar');
-    });
-    expect(getMeaningfulChildren(document)).toEqual(
-      <html>
-        <head>
-          <link rel="stylesheet" href="foo" data-precedence="one" />
-          <link rel="stylesheet" href="bar" data-precedence="two" />
-        </head>
-        <body>
-          <div>Hello</div>
-          <div>bar</div>
-          <link rel="preload" href="one" as="style" />
-          <link rel="preload" href="two" as="style" />
-        </body>
-      </html>,
-    );
-  });
+      container = document.getElementById('container');
+      const root = ReactDOMClient.createRoot(container);
 
-  // @gate enableFloat
-  it('will include child boundary style resources in the boundary reveal instruction', async () => {
-    function BlockedOn({text, children}) {
-      readText(text);
-      return children;
-    }
-    await actIntoEmptyDocument(() => {
-      const {pipe} = renderToPipeableStream(
+      function ClientApp() {
+        ReactDOM.preload('preload', {as: 'style'});
+        ReactDOM.preload('with\nnewline', {as: 'style'});
+        return (
+          <div>
+            <link
+              rel="stylesheet"
+              href={'style"][rel="stylesheet'}
+              precedence="style"
+            />
+            <link rel="stylesheet" href="with\slashes" precedence="style" />
+            foo
+          </div>
+        );
+      }
+      root.render(<ClientApp />);
+      expect(Scheduler).toFlushWithoutYielding();
+      expect(getMeaningfulChildren(document)).toEqual(
         <html>
-          <head />
+          <head>
+            <link rel="stylesheet" href="style" data-precedence="style" />
+            <link
+              rel="stylesheet"
+              href="with\slashes"
+              data-precedence="style"
+            />
+            <link
+              rel="stylesheet"
+              href={'style"][rel="stylesheet'}
+              data-precedence="style"
+            />
+            <link rel="preload" as="style" href="preload" />
+            <link rel="preload" href={'with\nnewline'} as="style" />
+            <link rel="preload" href={'style"][rel="stylesheet'} as="style" />
+          </head>
           <body>
-            <div>
-              <Suspense fallback="loading foo...">
-                <BlockedOn text="foo">
-                  <div>foo</div>
-                  <link rel="stylesheet" href="foo" precedence="default" />
-                  <Suspense fallback="loading bar...">
-                    <BlockedOn text="bar">
-                      <div>bar</div>
-                      <link rel="stylesheet" href="bar" precedence="default" />
-                      <Suspense fallback="loading baz...">
-                        <BlockedOn text="baz">
-                          <div>baz</div>
-                          <link
-                            rel="stylesheet"
-                            href="baz"
-                            precedence="default"
-                          />
-                        </BlockedOn>
-                      </Suspense>
-                    </BlockedOn>
-                  </Suspense>
-                </BlockedOn>
-              </Suspense>
+            <div id="container">
+              <div>foo</div>
             </div>
           </body>
         </html>,
       );
-      pipe(writable);
-    });
-
-    expect(getMeaningfulChildren(document)).toEqual(
-      <html>
-        <head />
-        <body>
-          <div>loading foo...</div>
-        </body>
-      </html>,
-    );
-
-    await act(() => {
-      resolveText('bar');
-    });
-    expect(getMeaningfulChildren(document)).toEqual(
-      <html>
-        <head />
-        <body>
-          <div>loading foo...</div>
-        </body>
-      </html>,
-    );
-
-    await act(() => {
-      resolveText('baz');
     });
-    expect(getMeaningfulChildren(document)).toEqual(
-      <html>
-        <head />
-        <body>
-          <div>loading foo...</div>
-        </body>
-      </html>,
-    );
 
-    await act(() => {
-      resolveText('foo');
-    });
-    expect(getMeaningfulChildren(document)).toEqual(
-      <html>
-        <head>
-          <link rel="stylesheet" href="foo" data-precedence="default" />
-          <link rel="stylesheet" href="bar" data-precedence="default" />
-          <link rel="stylesheet" href="baz" data-precedence="default" />
-        </head>
-        <body>
-          <div>loading foo...</div>
-          <link rel="preload" href="foo" as="style" />
-          <link rel="preload" href="bar" as="style" />
-          <link rel="preload" href="baz" as="style" />
-        </body>
-      </html>,
-    );
+    // @gate enableFloat
+    it('escapes hrefs when selecting matching elements in the document when using preload and preinit', async () => {
+      await actIntoEmptyDocument(() => {
+        const {pipe} = renderToPipeableStream(
+          <html>
+            <head />
+            <body>
+              <link rel="preload" href="preload" as="style" />
+              <link rel="stylesheet" href="style" precedence="style" />
+              <link rel="stylesheet" href="with\slashes" precedence="style" />
+              <link rel="preload" href={'with\nnewline'} as="style" />
+              <div id="container" />
+            </body>
+          </html>,
+        );
+        pipe(writable);
+      });
 
-    await act(() => {
-      const event = document.createEvent('Events');
-      event.initEvent('load', true, true);
-      Array.from(document.querySelectorAll('link[rel="stylesheet"]')).forEach(
-        el => {
-          el.dispatchEvent(event);
-        },
-      );
-    });
-    expect(getMeaningfulChildren(document)).toEqual(
-      <html>
-        <head>
-          <link rel="stylesheet" href="foo" data-precedence="default" />
-          <link rel="stylesheet" href="bar" data-precedence="default" />
-          <link rel="stylesheet" href="baz" data-precedence="default" />
-        </head>
-        <body>
-          <div>
-            <div>foo</div>
-            <div>bar</div>
-            <div>baz</div>
-          </div>
-          <link rel="preload" href="foo" as="style" />
-          <link rel="preload" href="bar" as="style" />
-          <link rel="preload" href="baz" as="style" />
-        </body>
-      </html>,
-    );
-  });
+      function App() {
+        ReactDOM.preload('preload"][rel="preload', {as: 'style'});
+        ReactDOM.preinit('style"][rel="stylesheet', {
+          as: 'style',
+          precedence: 'style',
+        });
+        ReactDOM.preinit('with\\slashes', {
+          as: 'style',
+          precedence: 'style',
+        });
+        ReactDOM.preload('with\nnewline', {as: 'style'});
+        return <div>foo</div>;
+      }
 
-  // @gate enableFloat
-  it('will hoist resources of child boundaries emitted as part of a partial boundary to the parent boundary', async () => {
-    function BlockedOn({text, children}) {
-      readText(text);
-      return children;
-    }
-    await actIntoEmptyDocument(() => {
-      const {pipe} = renderToPipeableStream(
+      container = document.getElementById('container');
+      const root = ReactDOMClient.createRoot(container);
+      root.render(<App />);
+      expect(Scheduler).toFlushWithoutYielding();
+      expect(getMeaningfulChildren(document)).toEqual(
         <html>
-          <head />
+          <head>
+            <link rel="stylesheet" href="style" data-precedence="style" />
+            <link
+              rel="stylesheet"
+              href="with\slashes"
+              data-precedence="style"
+            />
+            <link
+              rel="stylesheet"
+              href={'style"][rel="stylesheet'}
+              data-precedence="style"
+            />
+            <link rel="preload" as="style" href="preload" />
+            <link rel="preload" href={'with\nnewline'} as="style" />
+            <link rel="preload" href={'preload"][rel="preload'} as="style" />
+          </head>
           <body>
-            <div>
-              <Suspense fallback="loading...">
-                <div>
-                  <BlockedOn text="foo">
-                    <div>foo</div>
-                    <link rel="stylesheet" href="foo" precedence="default" />
-                    <Suspense fallback="loading bar...">
-                      <BlockedOn text="bar">
-                        <div>bar</div>
-                        <link
-                          rel="stylesheet"
-                          href="bar"
-                          precedence="default"
-                        />
-                        <Suspense fallback="loading baz...">
-                          <div>
-                            <BlockedOn text="baz">
-                              <div>baz</div>
-                              <link
-                                rel="stylesheet"
-                                href="baz"
-                                precedence="default"
-                              />
-                            </BlockedOn>
-                          </div>
-                        </Suspense>
-                      </BlockedOn>
-                    </Suspense>
-                  </BlockedOn>
-                  <BlockedOn text="qux">
-                    <div>qux</div>
-                    <link rel="stylesheet" href="qux" precedence="default" />
-                  </BlockedOn>
-                </div>
-              </Suspense>
+            <div id="container">
+              <div>foo</div>
             </div>
           </body>
         </html>,
       );
-      pipe(writable);
     });
 
-    expect(getMeaningfulChildren(document)).toEqual(
-      <html>
-        <head />
-        <body>
-          <div>loading...</div>
-        </body>
-      </html>,
-    );
-
-    // This will enqueue a style resource in a deep blocked boundary (loading baz...).
-    await act(() => {
-      resolveText('baz');
-    });
-    expect(getMeaningfulChildren(document)).toEqual(
-      <html>
-        <head />
-        <body>
-          <div>loading...</div>
-        </body>
-      </html>,
-    );
-
-    // This will enqueue a style resource in the intermediate blocked boundary (loading bar...).
-    await act(() => {
-      resolveText('bar');
-    });
-    expect(getMeaningfulChildren(document)).toEqual(
-      <html>
-        <head />
-        <body>
-          <div>loading...</div>
-        </body>
-      </html>,
-    );
+    // @gate enableFloat
+    it('does not create stylesheet resources when inside an <svg> context', async () => {
+      await actIntoEmptyDocument(() => {
+        const {pipe} = renderToPipeableStream(
+          <html>
+            <body>
+              <svg>
+                <path>
+                  <link rel="stylesheet" href="foo" precedence="default" />
+                </path>
+                <foreignObject>
+                  <link rel="stylesheet" href="bar" precedence="default" />
+                </foreignObject>
+              </svg>
+            </body>
+          </html>,
+        );
+        pipe(writable);
+      });
+      expect(getMeaningfulChildren(document)).toEqual(
+        <html>
+          <head>
+            <link rel="stylesheet" href="bar" data-precedence="default" />
+          </head>
+          <body>
+            <svg>
+              <path>
+                <link rel="stylesheet" href="foo" precedence="default" />
+              </path>
+              <foreignobject />
+            </svg>
+          </body>
+        </html>,
+      );
 
-    // This will complete a segment in the top level boundary that is still blocked on another segment.
-    // It will flush the completed segment however the inner boundaries should not emit their style dependencies
-    // because they are not going to be revealed yet. instead their dependencies are hoisted to the blocked
-    // boundary (top level).
-    await act(() => {
-      resolveText('foo');
+      const root = ReactDOMClient.createRoot(document.body);
+      root.render(
+        <div>
+          <svg>
+            <path>
+              <link rel="stylesheet" href="foo" precedence="default" />
+            </path>
+            <foreignObject>
+              <link rel="stylesheet" href="bar" precedence="default" />
+            </foreignObject>
+          </svg>
+        </div>,
+      );
+      expect(Scheduler).toFlushWithoutYielding();
+      expect(getMeaningfulChildren(document.body)).toEqual(
+        <div>
+          <svg>
+            <path>
+              <link rel="stylesheet" href="foo" precedence="default" />
+            </path>
+            <foreignobject />
+          </svg>
+        </div>,
+      );
     });
-    expect(getMeaningfulChildren(document)).toEqual(
-      <html>
-        <head />
-        <body>
-          <div>loading...</div>
-          <link rel="preload" href="foo" as="style" />
-          <link rel="preload" href="bar" as="style" />
-          <link rel="preload" href="baz" as="style" />
-        </body>
-      </html>,
-    );
 
-    // This resolves the last blocked segment on the top level boundary so we see all dependencies of the
-    // nested boundaries emitted at this level
-    await act(() => {
-      resolveText('qux');
-    });
-    expect(getMeaningfulChildren(document)).toEqual(
-      <html>
-        <head>
-          <link rel="stylesheet" href="foo" data-precedence="default" />
-          <link rel="stylesheet" href="bar" data-precedence="default" />
-          <link rel="stylesheet" href="baz" data-precedence="default" />
-          <link rel="stylesheet" href="qux" data-precedence="default" />
-        </head>
-        <body>
-          <div>loading...</div>
-          <link rel="preload" href="foo" as="style" />
-          <link rel="preload" href="bar" as="style" />
-          <link rel="preload" href="baz" as="style" />
-          <link rel="preload" href="qux" as="style" />
-        </body>
-      </html>,
-    );
+    // @gate enableFloat
+    it('does not create stylesheet resources when inside a <noscript> context', async () => {
+      await actIntoEmptyDocument(() => {
+        const {pipe} = renderToPipeableStream(
+          <html>
+            <body>
+              <noscript>
+                <link rel="stylesheet" href="foo" precedence="default" />
+              </noscript>
+            </body>
+          </html>,
+        );
+        pipe(writable);
+      });
+      expect(getMeaningfulChildren(document)).toEqual(
+        <html>
+          <head />
+          <body>
+            <noscript>
+              &lt;link rel="stylesheet" href="foo" precedence="default"/&gt;
+            </noscript>
+          </body>
+        </html>,
+      );
 
-    // We load all stylesheets and confirm the content is revealed
-    await act(() => {
-      const event = document.createEvent('Events');
-      event.initEvent('load', true, true);
-      Array.from(document.querySelectorAll('link[rel="stylesheet"]')).forEach(
-        el => {
-          el.dispatchEvent(event);
-        },
+      const root = ReactDOMClient.createRoot(document.body);
+      root.render(
+        <div>
+          <noscript>
+            <link rel="stylesheet" href="foo" precedence="default" />
+          </noscript>
+        </div>,
+      );
+      expect(Scheduler).toFlushWithoutYielding();
+      expect(getMeaningfulChildren(document.body)).toEqual(
+        <div>
+          {/* On the client, <noscript> never renders children */}
+          <noscript />
+        </div>,
       );
     });
-    expect(getMeaningfulChildren(document)).toEqual(
-      <html>
-        <head>
-          <link rel="stylesheet" href="foo" data-precedence="default" />
-          <link rel="stylesheet" href="bar" data-precedence="default" />
-          <link rel="stylesheet" href="baz" data-precedence="default" />
-          <link rel="stylesheet" href="qux" data-precedence="default" />
-        </head>
-        <body>
-          <div>
-            <div>
-              <div>foo</div>
-              <div>bar</div>
-              <div>
-                <div>baz</div>
-              </div>
-              <div>qux</div>
-            </div>
-          </div>
-          <link rel="preload" href="foo" as="style" />
-          <link rel="preload" href="bar" as="style" />
-          <link rel="preload" href="baz" as="style" />
-          <link rel="preload" href="qux" as="style" />
-        </body>
-      </html>,
-    );
-  });
 
-  // @gate enableFloat
-  it('encodes attributes consistently whether resources are flushed in shell or in late boundaries', async () => {
-    const originalConsoleError = console.error;
-    const mockError = jest.fn();
-    console.error = (...args) => {
-      mockError(...args.map(normalizeCodeLocInfo));
-    };
-    function BlockedOn({text, children}) {
-      readText(text);
-      return children;
-    }
-    function App() {
-      return (
+    // @gate enableFloat
+    it('warns if you provide a `precedence` prop with other props that invalidate the creation of a stylesheet resource', async () => {
+      await expect(async () => {
+        await actIntoEmptyDocument(() => {
+          renderToPipeableStream(
+            <html>
+              <body>
+                <link rel="stylesheet" precedence="default" />
+                <link rel="stylesheet" href="" precedence="default" />
+                <link
+                  rel="stylesheet"
+                  href="foo"
+                  precedence="default"
+                  onLoad={() => {}}
+                  onError={() => {}}
+                />
+                <link
+                  rel="stylesheet"
+                  href="foo"
+                  precedence="default"
+                  onLoad={() => {}}
+                />
+                <link
+                  rel="stylesheet"
+                  href="foo"
+                  precedence="default"
+                  onError={() => {}}
+                />
+                <link
+                  rel="stylesheet"
+                  href="foo"
+                  precedence="default"
+                  disabled={false}
+                />
+              </body>
+            </html>,
+          ).pipe(writable);
+        });
+      }).toErrorDev(
+        [
+          gate(flags => flags.enableFilterEmptyStringAttributesDOM)
+            ? 'An empty string ("") was passed to the href attribute. To fix this, either do not render the element at all or pass null to href instead of an empty string.'
+            : undefined,
+          'React encountered a `<link rel="stylesheet" .../>` with a `precedence` prop and expected the `href` prop to be a non-empty string but ecountered `undefined` instead. If your intent was to have React hoist and deduplciate this stylesheet using the `precedence` prop ensure there is a non-empty string `href` prop as well, otherwise remove the `precedence` prop.',
+          'React encountered a `<link rel="stylesheet" .../>` with a `precedence` prop and expected the `href` prop to be a non-empty string but ecountered an empty string instead. If your intent was to have React hoist and deduplciate this stylesheet using the `precedence` prop ensure there is a non-empty string `href` prop as well, otherwise remove the `precedence` prop.',
+          'React encountered a `<link rel="stylesheet" .../>` with a `precedence` prop and `onLoad` and `onError` props. The presence of loading and error handlers indicates an intent to manage the stylesheet loading state from your from your Component code and React will not hoist or deduplicate this stylesheet. If your intent was to have React hoist and deduplciate this stylesheet using the `precedence` prop remove the `onLoad` and `onError` props, otherwise remove the `precedence` prop.',
+          'React encountered a `<link rel="stylesheet" .../>` with a `precedence` prop and `onLoad` prop. The presence of loading and error handlers indicates an intent to manage the stylesheet loading state from your from your Component code and React will not hoist or deduplicate this stylesheet. If your intent was to have React hoist and deduplciate this stylesheet using the `precedence` prop remove the `onLoad` prop, otherwise remove the `precedence` prop.',
+          'React encountered a `<link rel="stylesheet" .../>` with a `precedence` prop and `onError` prop. The presence of loading and error handlers indicates an intent to manage the stylesheet loading state from your from your Component code and React will not hoist or deduplicate this stylesheet. If your intent was to have React hoist and deduplciate this stylesheet using the `precedence` prop remove the `onError` prop, otherwise remove the `precedence` prop.',
+          'React encountered a `<link rel="stylesheet" .../>` with a `precedence` prop and a `disabled` prop. The presence of the `disabled` prop indicates an intent to manage the stylesheet active state from your from your Component code and React will not hoist or deduplicate this stylesheet. If your intent was to have React hoist and deduplciate this stylesheet using the `precedence` prop remove the `disabled` prop, otherwise remove the `precedence` prop.',
+        ].filter(Boolean),
+      );
+
+      ReactDOMClient.hydrateRoot(
+        document,
         <html>
-          <head />
           <body>
-            <div>
+            <link
+              rel="stylesheet"
+              href="foo"
+              precedence="default"
+              onLoad={() => {}}
+              onError={() => {}}
+            />
+          </body>
+        </html>,
+      );
+      expect(() => {
+        expect(Scheduler).toFlushWithoutYielding();
+      }).toErrorDev([
+        'React encountered a <link rel="stylesheet" href="foo" ... /> with a `precedence` prop that also included the `onLoad` and `onError` props. The presence of loading and error handlers indicates an intent to manage the stylesheet loading state from your from your Component code and React will not hoist or deduplicate this stylesheet. If your intent was to have React hoist and deduplciate this stylesheet using the `precedence` prop remove the `onLoad` and `onError` props, otherwise remove the `precedence` prop.',
+      ]);
+    });
+
+    // @gate enableFloat
+    it('warns if you provide different props between <link re="stylesheet" .../> and ReactDOM.preinit(..., {as: "style"}) for the same `href`', async () => {
+      function App() {
+        ReactDOM.preinit('foo', {as: 'style'});
+        return (
+          <html>
+            <body>
+              <link rel="stylesheet" href="foo" precedence="foo" media="all" />
+              hello
+            </body>
+          </html>
+        );
+      }
+      await expect(async () => {
+        await actIntoEmptyDocument(() => {
+          const {pipe} = renderToPipeableStream(<App />);
+          pipe(writable);
+        });
+      }).toErrorDev([
+        'Warning: React encountered a <link rel="stylesheet" precedence="foo" href="foo" .../> with props that conflict with the options provided to `ReactDOM.preinit("foo", { as: "style", ... })`. React will use the first props or preinitialization options encountered when rendering a hoistable stylesheet with a particular `href` and will ignore any newer props or options. The first instance of this stylesheet resource was created using the `ReactDOM.preinit()` function. Please note, `ReactDOM.preinit()` is modeled off of module import assertions capabilities and does not support arbitrary props. If you need to have props not included with the preinit options you will need to rely on rendering <link> tags only.\n  "media" prop value: "all", option not available with ReactDOM.preinit()\n  "precedence" prop value: "foo", missing from options',
+      ]);
+    });
+
+    // @gate enableFloat
+    it('warns if you provide different props between two <link re="stylesheet" .../> that share the same `href`', async () => {
+      function App() {
+        return (
+          <html>
+            <body>
+              <link rel="stylesheet" href="foo" precedence="foo" media="all" />
               <link
-                // This preload is explicit so it can flush with a lot of potential attrs
-                // We will duplicate this as a style that flushes after the shell
-                rel="preload"
-                as="style"
+                rel="stylesheet"
                 href="foo"
-                // precedence is not a special attribute for preloads so this will just flush as is
-                precedence="default"
-                // Some standard link props
-                crossOrigin="anonymous"
-                media="all"
-                integrity="somehash"
-                referrerPolicy="origin"
-                // data and non starndard attributes that should flush
-                data-foo={'"quoted"'}
-                nonStandardAttr="attr"
-                properlyformattednonstandardattr="attr"
-                // attributes that should be filtered out for violating certain rules
-                onSomething="this should be removed b/c event handler"
-                shouldnotincludefunctions={() => {}}
-                norsymbols={Symbol('foo')}
+                precedence="bar"
+                data-extra="foo"
               />
-              <Suspense fallback={'loading...'}>
-                <BlockedOn text="unblock">
+              hello
+            </body>
+          </html>
+        );
+      }
+      await expect(async () => {
+        await actIntoEmptyDocument(() => {
+          const {pipe} = renderToPipeableStream(<App />);
+          pipe(writable);
+        });
+      }).toErrorDev([
+        'Warning: React encountered a <link rel="stylesheet" href="foo" .../> with a `precedence` prop that has props that conflict with another hoistable stylesheet with the same `href`. When using `precedence` with <link rel="stylsheet" .../> the props from the first encountered instance will be used and props from later instances will be ignored. Update the props on either <link rel="stylesheet" .../> instance so they agree.\n  "media" missing for props, original value: "all"\n  "data-extra" prop value: "foo", missing from original props\n  "precedence" prop value: "bar", original value: "foo"',
+      ]);
+    });
+
+    // @gate enableFloat
+    it('will not block displaying a Suspense boundary on a stylesheet with media that does not match', async () => {
+      await actIntoEmptyDocument(() => {
+        renderToPipeableStream(
+          <html>
+            <body>
+              <Suspense fallback="loading...">
+                <BlockedOn value="block">
+                  foo
                   <link
-                    // This preload is explicit so it can flush with a lot of potential attrs
-                    // We will duplicate this as a style that flushes after the shell
                     rel="stylesheet"
-                    href="foo"
-                    // opt-in property to get this treated as a resource
-                    precedence="default"
-                    // Some standard link props
-                    crossOrigin="anonymous"
+                    href="print"
+                    media="print"
+                    precedence="print"
+                  />
+                  <link
+                    rel="stylesheet"
+                    href="all"
                     media="all"
-                    integrity="somehash"
-                    referrerPolicy="origin"
-                    // data and non starndard attributes that should flush
-                    data-foo={'"quoted"'}
-                    nonStandardAttr="attr"
-                    properlyformattednonstandardattr="attr"
-                    // attributes that should be filtered out for violating certain rules
-                    onSomething="this should be removed b/c event handler"
-                    shouldnotincludefunctions={() => {}}
-                    norsymbols={Symbol('foo')}
+                    precedence="all"
                   />
                 </BlockedOn>
               </Suspense>
-            </div>
-          </body>
-        </html>
-      );
-    }
-    try {
-      await actIntoEmptyDocument(() => {
-        const {pipe} = renderToPipeableStream(<App />);
-        pipe(writable);
+              <Suspense fallback="loading...">
+                <BlockedOn value="block">
+                  bar
+                  <link
+                    rel="stylesheet"
+                    href="print"
+                    media="print"
+                    precedence="print"
+                  />
+                  <link
+                    rel="stylesheet"
+                    href="all"
+                    media="all"
+                    precedence="all"
+                  />
+                </BlockedOn>
+              </Suspense>
+            </body>
+          </html>,
+        ).pipe(writable);
       });
       expect(getMeaningfulChildren(document)).toEqual(
         <html>
-          <head>
-            <link
-              rel="preload"
-              as="style"
-              href="foo"
-              precedence="default"
-              crossorigin="anonymous"
-              media="all"
-              integrity="somehash"
-              referrerpolicy="origin"
-              data-foo={'"quoted"'}
-              nonstandardattr="attr"
-              properlyformattednonstandardattr="attr"
-            />
-          </head>
+          <head />
           <body>
-            <div>loading...</div>
+            {'loading...'}
+            {'loading...'}
           </body>
         </html>,
       );
-      if (__DEV__) {
-        expect(mockError).toHaveBeenCalledTimes(2);
-        expect(mockError).toHaveBeenCalledWith(
-          'Warning: React does not recognize the `%s` prop on a DOM element.' +
-            ' If you intentionally want it to appear in the DOM as a custom attribute,' +
-            ' spell it as lowercase `%s` instead. If you accidentally passed it from a' +
-            ' parent component, remove it from the DOM element.%s',
-          'nonStandardAttr',
-          'nonstandardattr',
-          componentStack(['link', 'div', 'body', 'html', 'App']),
-        );
-        expect(mockError).toHaveBeenCalledWith(
-          'Warning: Invalid values for props %s on <%s> tag. Either remove them from' +
-            ' the element, or pass a string or number value to keep them in the DOM. For' +
-            ' details, see https://reactjs.org/link/attribute-behavior %s',
-          '`shouldnotincludefunctions`, `norsymbols`',
-          'link',
-          componentStack(['link', 'div', 'body', 'html', 'App']),
-        );
-        mockError.mockClear();
-      } else {
-        expect(mockError).not.toHaveBeenCalled();
-      }
 
-      // Now we flush the stylesheet with the boundary
       await act(() => {
-        resolveText('unblock');
+        resolveText('block');
       });
-
       expect(getMeaningfulChildren(document)).toEqual(
         <html>
           <head>
             <link
               rel="stylesheet"
-              href="foo"
-              data-precedence="default"
-              crossorigin="anonymous"
-              media="all"
-              integrity="somehash"
-              referrerpolicy="origin"
-              data-foo={'"quoted"'}
-              nonstandardattr="attr"
-              properlyformattednonstandardattr="attr"
+              href="print"
+              media="print"
+              data-precedence="print"
             />
             <link
-              rel="preload"
-              as="style"
-              href="foo"
-              precedence="default"
-              crossorigin="anonymous"
+              rel="stylesheet"
+              href="all"
               media="all"
-              integrity="somehash"
-              referrerpolicy="origin"
-              data-foo={'"quoted"'}
-              nonstandardattr="attr"
-              properlyformattednonstandardattr="attr"
+              data-precedence="all"
             />
           </head>
           <body>
-            <div>loading...</div>
-          </body>
-        </html>,
-      );
-      if (__DEV__) {
-        // The way the test is currently set up the props that would warn have already warned
-        // so no new warnings appear. This is really testing the same code pathway so
-        // exercising that more here isn't all that useful
-        expect(mockError).toHaveBeenCalledTimes(0);
-      } else {
-        expect(mockError).not.toHaveBeenCalled();
-      }
-    } finally {
-      console.error = originalConsoleError;
-    }
-  });
-
-  // @gate enableFloat
-  it('boundary style resource dependencies hoist to a parent boundary when flushed inline', async () => {
-    function BlockedOn({text, children}) {
-      readText(text);
-      return children;
-    }
-    await actIntoEmptyDocument(() => {
-      const {pipe} = renderToPipeableStream(
-        <html>
-          <head />
-          <body>
-            <div>
-              <Suspense fallback="loading A...">
-                <BlockedOn text="unblock">
-                  <AsyncText text="A" />
-                  <link rel="stylesheet" href="A" precedence="A" />
-                  <Suspense fallback="loading AA...">
-                    <AsyncText text="AA" />
-                    <link rel="stylesheet" href="AA" precedence="AA" />
-                    <Suspense fallback="loading AAA...">
-                      <AsyncText text="AAA" />
-                      <link rel="stylesheet" href="AAA" precedence="AAA" />
-                      <Suspense fallback="loading AAAA...">
-                        <AsyncText text="AAAA" />
-                        <link rel="stylesheet" href="AAAA" precedence="AAAA" />
-                      </Suspense>
-                    </Suspense>
-                  </Suspense>
-                </BlockedOn>
-              </Suspense>
-            </div>
+            {'loading...'}
+            {'loading...'}
+            <link rel="preload" href="print" media="print" as="style" />
+            <link rel="preload" href="all" media="all" as="style" />
           </body>
-        </html>,
-      );
-      pipe(writable);
-    });
-    expect(getMeaningfulChildren(document)).toEqual(
-      <html>
-        <head />
-        <body>
-          <div>loading A...</div>
-        </body>
-      </html>,
-    );
-
-    await act(() => {
-      resolveText('unblock');
-      resolveText('AAAA');
-      resolveText('AA');
-    });
-    expect(getMeaningfulChildren(document)).toEqual(
-      <html>
-        <head />
-        <body>
-          <div>loading A...</div>
-          <link rel="preload" as="style" href="A" />
-          <link rel="preload" as="style" href="AA" />
-          <link rel="preload" as="style" href="AAA" />
-          <link rel="preload" as="style" href="AAAA" />
-        </body>
-      </html>,
-    );
-
-    await act(() => {
-      resolveText('A');
-    });
-    await act(() => {
-      document.querySelectorAll('link[rel="stylesheet"]').forEach(l => {
-        const event = document.createEvent('Events');
-        event.initEvent('load', true, true);
-        l.dispatchEvent(event);
-      });
-    });
-    expect(getMeaningfulChildren(document)).toEqual(
-      <html>
-        <head>
-          <link rel="stylesheet" href="A" data-precedence="A" />
-          <link rel="stylesheet" href="AA" data-precedence="AA" />
-        </head>
-        <body>
-          <div>
-            {'A'}
-            {'AA'}
-            {'loading AAA...'}
-          </div>
-          <link rel="preload" as="style" href="A" />
-          <link rel="preload" as="style" href="AA" />
-          <link rel="preload" as="style" href="AAA" />
-          <link rel="preload" as="style" href="AAAA" />
-        </body>
-      </html>,
-    );
-
-    await act(() => {
-      resolveText('AAA');
-    });
-    await act(() => {
-      document.querySelectorAll('link[rel="stylesheet"]').forEach(l => {
+        </html>,
+      );
+
+      await act(() => {
+        const allStyle = document.querySelector('link[href="all"]');
         const event = document.createEvent('Events');
         event.initEvent('load', true, true);
-        l.dispatchEvent(event);
+        allStyle.dispatchEvent(event);
       });
+
+      expect(getMeaningfulChildren(document)).toEqual(
+        <html>
+          <head>
+            <link
+              rel="stylesheet"
+              href="print"
+              media="print"
+              data-precedence="print"
+            />
+            <link
+              rel="stylesheet"
+              href="all"
+              media="all"
+              data-precedence="all"
+            />
+          </head>
+          <body>
+            {'foo'}
+            {'bar'}
+            <link rel="preload" href="print" media="print" as="style" />
+            <link rel="preload" href="all" media="all" as="style" />
+          </body>
+        </html>,
+      );
     });
-    expect(getMeaningfulChildren(document)).toEqual(
-      <html>
-        <head>
-          <link rel="stylesheet" href="A" data-precedence="A" />
-          <link rel="stylesheet" href="AA" data-precedence="AA" />
-          <link rel="stylesheet" href="AAA" data-precedence="AAA" />
-          <link rel="stylesheet" href="AAAA" data-precedence="AAAA" />
-        </head>
-        <body>
-          <div>
-            {'A'}
-            {'AA'}
-            {'AAA'}
-            {'AAAA'}
-          </div>
-          <link rel="preload" as="style" href="A" />
-          <link rel="preload" as="style" href="AA" />
-          <link rel="preload" as="style" href="AAA" />
-          <link rel="preload" as="style" href="AAAA" />
-        </body>
-      </html>,
-    );
   });
 
-  // @gate enableFloat
-  it('always enforces crossOrigin "anonymous" for font preloads', async () => {
-    const originalConsoleError = console.error;
-    const mockError = jest.fn();
-    console.error = (...args) => {
-      mockError(...args.map(normalizeCodeLocInfo));
-    };
-    try {
+  describe('Style Resource', () => {
+    // @gate enableFloat
+    it('treats <style href="..." precedence="..."> elements as a style resource when server rendering', async () => {
+      const css = `
+body {
+  background-color: red;
+}`;
       await actIntoEmptyDocument(() => {
-        const {pipe} = renderToPipeableStream(
+        renderToPipeableStream(
           <html>
-            <head />
             <body>
-              <link rel="preload" as="font" href="foo" />
-              <link rel="preload" as="font" href="bar" crossOrigin="foo" />
-              <link
-                rel="preload"
-                as="font"
-                href="baz"
-                crossOrigin="use-credentials"
-              />
-              <link
-                rel="preload"
-                as="font"
-                href="qux"
-                crossOrigin="anonymous"
-              />
+              <style href="foo" precedence="foo">
+                {css}
+              </style>
             </body>
           </html>,
-        );
-        pipe(writable);
+        ).pipe(writable);
       });
+
       expect(getMeaningfulChildren(document)).toEqual(
         <html>
           <head>
-            <link rel="preload" as="font" href="foo" crossorigin="" />
-            <link rel="preload" as="font" href="bar" crossorigin="" />
-            <link rel="preload" as="font" href="baz" crossorigin="" />
-            <link rel="preload" as="font" href="qux" crossorigin="" />
+            <style data-href="foo" data-precedence="foo">
+              {css}
+            </style>
           </head>
           <body />
         </html>,
       );
+    });
 
-      if (__DEV__) {
-        expect(mockError).toHaveBeenCalledTimes(2);
-        expect(mockError).toHaveBeenCalledWith(
-          'Warning: A %s with href "%s" did not specify the crossOrigin prop. Font preloads must always use' +
-            ' anonymouse CORS mode. To fix add an empty string, "anonymous", or any other string' +
-            ' value except "use-credentials" for the crossOrigin prop of all font preloads.%s',
-          'preload Resource (as "font")',
-          'foo',
-          componentStack(['link', 'body', 'html']),
-        );
-        expect(mockError).toHaveBeenCalledWith(
-          'Warning: A %s with href "%s" specified a crossOrigin value of "use-credentials". Font preloads must always use' +
-            ' anonymouse CORS mode. To fix use an empty string, "anonymous", or any other string' +
-            ' value except "use-credentials" for the crossOrigin prop of all font preloads.%s',
-          'preload Resource (as "font")',
-          'baz',
-          componentStack(['link', 'body', 'html']),
-        );
-      } else {
-        expect(mockError).not.toHaveBeenCalled();
-      }
-    } finally {
-      console.error = originalConsoleError;
-    }
-  });
-
-  describe('ReactDOM.pre* function validation', () => {
-    function Preloads({scenarios}) {
-      for (let i = 0; i < scenarios.length; i++) {
-        const href = scenarios[i][0];
-        const options = scenarios[i][1];
-        ReactDOM.preload(href, options);
-      }
-    }
-    function Preinits({scenarios}) {
-      for (let i = 0; i < scenarios.length; i++) {
-        const href = scenarios[i][0];
-        const options = scenarios[i][1];
-        ReactDOM.preinit(href, options);
-      }
-    }
-    async function renderOnServer(Component, scenarios) {
-      const originalConsoleError = console.error;
-      const mockError = jest.fn();
-      console.error = (...args) => {
-        mockError(...args.map(normalizeCodeLocInfo));
-      };
-      try {
-        await actIntoEmptyDocument(() => {
-          const {pipe} = renderToPipeableStream(
-            <html>
-              <head>
-                <Component scenarios={scenarios} />
-              </head>
-            </html>,
-          );
-          pipe(writable);
-        });
-        for (let i = 0; i < scenarios.length; i++) {
-          const assertion = scenarios[i][2];
-          assertion(mockError, i);
-        }
-      } finally {
-        console.error = originalConsoleError;
-      }
-    }
-    async function renderOnClient(Component, scenarios) {
-      const originalConsoleError = console.error;
-      const mockError = jest.fn();
-      console.error = (...args) => {
-        mockError(...args.map(normalizeCodeLocInfo));
-      };
-      try {
-        const root = ReactDOMClient.createRoot(document);
-        root.render(
+    // @gate enableFloat
+    it('can insert style resources as part of a boundary reveal', async () => {
+      const cssRed = `
+body {
+  background-color: red;
+}`;
+      const cssBlue = `
+body {
+background-color: blue;
+}`;
+      const cssGreen = `
+body {
+background-color: green;
+}`;
+      await actIntoEmptyDocument(() => {
+        renderToPipeableStream(
           <html>
-            <head>
-              <Component scenarios={scenarios} />
-            </head>
+            <body>
+              <Suspense fallback="loading...">
+                <BlockedOn value="blocked">
+                  <style href="foo" precedence="foo">
+                    {cssRed}
+                  </style>
+                  loaded
+                </BlockedOn>
+              </Suspense>
+            </body>
           </html>,
-        );
-        expect(Scheduler).toFlushWithoutYielding();
-        for (let i = 0; i < scenarios.length; i++) {
-          const assertion = scenarios[i][2];
-          assertion(mockError, i);
-        }
-      } finally {
-        console.error = originalConsoleError;
-      }
-    }
-
-    [
-      ['server', renderOnServer],
-      ['client', renderOnClient],
-    ].forEach(([environment, render]) => {
-      // @gate enableFloat
-      it(
-        'warns when an invalid href argument is provided to ReactDOM.preload on the ' +
-          environment,
-        async () => {
-          const expectedMessage =
-            'Warning: ReactDOM.preload() expected the first argument to be a string representing an href but found %s instead.%s';
-          const expectedStack = componentStack(['Preloads', 'head', 'html']);
-          function makeArgs(...substitutions) {
-            return [expectedMessage, ...substitutions, expectedStack];
-          }
-          await render(Preloads, [
-            [
-              '',
-              undefined,
-              (mockError, scenarioNumber) => {
-                if (__DEV__) {
-                  expect(mockError.mock.calls[scenarioNumber]).toEqual(
-                    makeArgs('an empty string'),
-                  );
-                } else {
-                  expect(mockError).not.toHaveBeenCalled();
-                }
-              },
-            ],
-            [
-              undefined,
-              undefined,
-              (mockError, scenarioNumber) => {
-                if (__DEV__) {
-                  expect(mockError.mock.calls[scenarioNumber]).toEqual(
-                    makeArgs('undefined'),
-                  );
-                } else {
-                  expect(mockError).not.toHaveBeenCalled();
-                }
-              },
-            ],
-            [
-              null,
-              undefined,
-              (mockError, scenarioNumber) => {
-                if (__DEV__) {
-                  expect(mockError.mock.calls[scenarioNumber]).toEqual(
-                    makeArgs('null'),
-                  );
-                } else {
-                  expect(mockError).not.toHaveBeenCalled();
-                }
-              },
-            ],
-            [
-              232132,
-              undefined,
-              (mockError, scenarioNumber) => {
-                if (__DEV__) {
-                  expect(mockError.mock.calls[scenarioNumber]).toEqual(
-                    makeArgs('something with type "number"'),
-                  );
-                } else {
-                  expect(mockError).not.toHaveBeenCalled();
-                }
-              },
-            ],
-            [
-              {},
-              undefined,
-              (mockError, scenarioNumber) => {
-                if (__DEV__) {
-                  expect(mockError.mock.calls[scenarioNumber]).toEqual(
-                    makeArgs('something with type "object"'),
-                  );
-                } else {
-                  expect(mockError).not.toHaveBeenCalled();
-                }
-              },
-            ],
-          ]);
-        },
-      );
+        ).pipe(writable);
+      });
 
-      // @gate enableFloat
-      it(
-        'warns when an invalid href argument is provided to ReactDOM.preinit on the ' +
-          environment,
-        async () => {
-          const expectedMessage =
-            'Warning: ReactDOM.preinit() expected the first argument to be a string representing an href but found %s instead.%s';
-          const expectedStack = componentStack(['Preinits', 'head', 'html']);
-          function makeArgs(...substitutions) {
-            return [expectedMessage, ...substitutions, expectedStack];
-          }
-          await render(Preinits, [
-            [
-              '',
-              undefined,
-              (mockError, scenarioNumber) => {
-                if (__DEV__) {
-                  expect(mockError.mock.calls[scenarioNumber]).toEqual(
-                    makeArgs('an empty string'),
-                  );
-                } else {
-                  expect(mockError).not.toHaveBeenCalled();
-                }
-              },
-            ],
-            [
-              undefined,
-              undefined,
-              (mockError, scenarioNumber) => {
-                if (__DEV__) {
-                  expect(mockError.mock.calls[scenarioNumber]).toEqual(
-                    makeArgs('undefined'),
-                  );
-                } else {
-                  expect(mockError).not.toHaveBeenCalled();
-                }
-              },
-            ],
-            [
-              null,
-              undefined,
-              (mockError, scenarioNumber) => {
-                if (__DEV__) {
-                  expect(mockError.mock.calls[scenarioNumber]).toEqual(
-                    makeArgs('null'),
-                  );
-                } else {
-                  expect(mockError).not.toHaveBeenCalled();
-                }
-              },
-            ],
-            [
-              232132,
-              undefined,
-              (mockError, scenarioNumber) => {
-                if (__DEV__) {
-                  expect(mockError.mock.calls[scenarioNumber]).toEqual(
-                    makeArgs('something with type "number"'),
-                  );
-                } else {
-                  expect(mockError).not.toHaveBeenCalled();
-                }
-              },
-            ],
-            [
-              {},
-              undefined,
-              (mockError, scenarioNumber) => {
-                if (__DEV__) {
-                  expect(mockError.mock.calls[scenarioNumber]).toEqual(
-                    makeArgs('something with type "object"'),
-                  );
-                } else {
-                  expect(mockError).not.toHaveBeenCalled();
-                }
-              },
-            ],
-          ]);
-        },
+      expect(getMeaningfulChildren(document)).toEqual(
+        <html>
+          <head />
+          <body>loading...</body>
+        </html>,
       );
 
-      // @gate enableFloat
-      it(
-        'warns when an invalid options argument is provided to ReactDOM.preload on the ' +
-          environment,
-        async () => {
-          const expectedMessage =
-            'Warning: ReactDOM.preload() expected the second argument to be an options argument containing at least an "as" property' +
-            ' specifying the Resource type. It found %s instead. The href for the preload call where this warning originated is "%s".%s';
-          const expectedStack = componentStack(['Preloads', 'head', 'html']);
-          function makeArgs(...substitutions) {
-            return [expectedMessage, ...substitutions, expectedStack];
-          }
-          await render(Preloads, [
-            [
-              'foo',
-              undefined,
-              (mockError, scenarioNumber) => {
-                if (__DEV__) {
-                  expect(mockError.mock.calls[scenarioNumber]).toEqual(
-                    makeArgs('undefined', 'foo'),
-                  );
-                } else {
-                  expect(mockError).not.toHaveBeenCalled();
-                }
-              },
-            ],
-            [
-              'foo',
-              null,
-              (mockError, scenarioNumber) => {
-                if (__DEV__) {
-                  expect(mockError.mock.calls[scenarioNumber]).toEqual(
-                    makeArgs('null', 'foo'),
-                  );
-                } else {
-                  expect(mockError).not.toHaveBeenCalled();
-                }
-              },
-            ],
-            [
-              'foo',
-              'bar',
-              (mockError, scenarioNumber) => {
-                if (__DEV__) {
-                  expect(mockError.mock.calls[scenarioNumber]).toEqual(
-                    makeArgs('something with type "string"', 'foo'),
-                  );
-                } else {
-                  expect(mockError).not.toHaveBeenCalled();
-                }
-              },
-            ],
-            [
-              'foo',
-              123,
-              (mockError, scenarioNumber) => {
-                if (__DEV__) {
-                  expect(mockError.mock.calls[scenarioNumber]).toEqual(
-                    makeArgs('something with type "number"', 'foo'),
-                  );
-                } else {
-                  expect(mockError).not.toHaveBeenCalled();
-                }
-              },
-            ],
-          ]);
-        },
-      );
+      await act(() => {
+        resolveText('blocked');
+      });
 
-      // @gate enableFloat
-      it(
-        'warns when an invalid options argument is provided to ReactDOM.preinit on the ' +
-          environment,
-        async () => {
-          const expectedMessage =
-            'Warning: ReactDOM.preinit() expected the second argument to be an options argument containing at least an "as" property' +
-            ' specifying the Resource type. It found %s instead. The href for the preload call where this warning originated is "%s".%s';
-          const expectedStack = componentStack(['Preinits', 'head', 'html']);
-          function makeArgs(...substitutions) {
-            return [expectedMessage, ...substitutions, expectedStack];
-          }
-          await render(Preinits, [
-            [
-              'foo',
-              undefined,
-              (mockError, scenarioNumber) => {
-                if (__DEV__) {
-                  expect(mockError.mock.calls[scenarioNumber]).toEqual(
-                    makeArgs('undefined', 'foo'),
-                  );
-                } else {
-                  expect(mockError).not.toHaveBeenCalled();
-                }
-              },
-            ],
-            [
-              'foo',
-              null,
-              (mockError, scenarioNumber) => {
-                if (__DEV__) {
-                  expect(mockError.mock.calls[scenarioNumber]).toEqual(
-                    makeArgs('null', 'foo'),
-                  );
-                } else {
-                  expect(mockError).not.toHaveBeenCalled();
-                }
-              },
-            ],
-            [
-              'foo',
-              'bar',
-              (mockError, scenarioNumber) => {
-                if (__DEV__) {
-                  expect(mockError.mock.calls[scenarioNumber]).toEqual(
-                    makeArgs('something with type "string"', 'foo'),
-                  );
-                } else {
-                  expect(mockError).not.toHaveBeenCalled();
-                }
-              },
-            ],
-            [
-              'foo',
-              123,
-              (mockError, scenarioNumber) => {
-                if (__DEV__) {
-                  expect(mockError.mock.calls[scenarioNumber]).toEqual(
-                    makeArgs('something with type "number"', 'foo'),
-                  );
-                } else {
-                  expect(mockError).not.toHaveBeenCalled();
-                }
-              },
-            ],
-          ]);
-        },
+      expect(getMeaningfulChildren(document)).toEqual(
+        <html>
+          <head>
+            <style data-href="foo" data-precedence="foo">
+              {cssRed}
+            </style>
+          </head>
+          <body>loaded</body>
+        </html>,
       );
 
-      // @gate enableFloat
-      it(
-        'warns when an invalid "as" option is provided to ReactDOM.preload on the ' +
-          environment,
-        async () => {
-          const expectedMessage =
-            'Warning: ReactDOM.preload() expected a valid "as" type in the options (second) argument but found %s instead.' +
-            ' Please use one of the following valid values instead: %s. The href for the preload call where this' +
-            ' warning originated is "%s".%s';
-          const expectedStack = componentStack(['Preloads', 'head', 'html']);
-          function makeArgs(...substitutions) {
-            return [expectedMessage, ...substitutions, expectedStack];
-          }
-          await render(Preloads, [
-            [
-              'foo',
-              {},
-              (mockError, scenarioNumber) => {
-                if (__DEV__) {
-                  expect(mockError.mock.calls[scenarioNumber]).toEqual(
-                    makeArgs(
-                      'undefined',
-                      '"style", "font", or "script"',
-                      'foo',
-                    ),
-                  );
-                } else {
-                  expect(mockError).not.toHaveBeenCalled();
-                }
-              },
-            ],
-            [
-              'bar',
-              {as: null},
-              (mockError, scenarioNumber) => {
-                if (__DEV__) {
-                  expect(mockError.mock.calls[scenarioNumber]).toEqual(
-                    makeArgs('null', '"style", "font", or "script"', 'bar'),
-                  );
-                } else {
-                  expect(mockError).not.toHaveBeenCalled();
-                }
-              },
-            ],
-            [
-              'baz',
-              {as: 123},
-              (mockError, scenarioNumber) => {
-                if (__DEV__) {
-                  expect(mockError.mock.calls[scenarioNumber]).toEqual(
-                    makeArgs(
-                      'something with type "number"',
-                      '"style", "font", or "script"',
-                      'baz',
-                    ),
-                  );
-                } else {
-                  expect(mockError).not.toHaveBeenCalled();
-                }
-              },
-            ],
-            [
-              'qux',
-              {as: {}},
-              (mockError, scenarioNumber) => {
-                if (__DEV__) {
-                  expect(mockError.mock.calls[scenarioNumber]).toEqual(
-                    makeArgs(
-                      'something with type "object"',
-                      '"style", "font", or "script"',
-                      'qux',
-                    ),
-                  );
-                } else {
-                  expect(mockError).not.toHaveBeenCalled();
-                }
-              },
-            ],
-            [
-              'quux',
-              {as: 'bar'},
-              (mockError, scenarioNumber) => {
-                if (__DEV__) {
-                  expect(mockError.mock.calls[scenarioNumber]).toEqual(
-                    makeArgs('"bar"', '"style", "font", or "script"', 'quux'),
-                  );
-                } else {
-                  expect(mockError).not.toHaveBeenCalled();
-                }
-              },
-            ],
-          ]);
-        },
+      const root = ReactDOMClient.hydrateRoot(
+        document,
+        <html>
+          <body>
+            <Suspense fallback="loading...">
+              <style href="foo" precedence="foo">
+                {cssRed}
+              </style>
+              loaded
+            </Suspense>
+          </body>
+        </html>,
       );
+      expect(Scheduler).toFlushWithoutYielding();
 
-      // @gate enableFloat
-      it(
-        'warns when an invalid "as" option is provided to ReactDOM.preinit on the ' +
-          environment,
-        async () => {
-          const expectedMessage =
-            'Warning: ReactDOM.preinit() expected the second argument to be an options argument containing at least an "as" property' +
-            ' specifying the Resource type. It found %s instead. Currently, valid resource types for for preinit are "style"' +
-            ' and "script". The href for the preinit call where this warning originated is "%s".%s';
-          const expectedStack = componentStack(['Preinits', 'head', 'html']);
-          function makeArgs(...substitutions) {
-            return [expectedMessage, ...substitutions, expectedStack];
-          }
-          await render(Preinits, [
-            [
-              'foo',
-              {},
-              (mockError, scenarioNumber) => {
-                if (__DEV__) {
-                  expect(mockError.mock.calls[scenarioNumber]).toEqual(
-                    makeArgs('undefined', 'foo'),
-                  );
-                } else {
-                  expect(mockError).not.toHaveBeenCalled();
-                }
-              },
-            ],
-            [
-              'bar',
-              {as: null},
-              (mockError, scenarioNumber) => {
-                if (__DEV__) {
-                  expect(mockError.mock.calls[scenarioNumber]).toEqual(
-                    makeArgs('null', 'bar'),
-                  );
-                } else {
-                  expect(mockError).not.toHaveBeenCalled();
-                }
-              },
-            ],
-            [
-              'baz',
-              {as: 123},
-              (mockError, scenarioNumber) => {
-                if (__DEV__) {
-                  expect(mockError.mock.calls[scenarioNumber]).toEqual(
-                    makeArgs('something with type "number"', 'baz'),
-                  );
-                } else {
-                  expect(mockError).not.toHaveBeenCalled();
-                }
-              },
-            ],
-            [
-              'qux',
-              {as: {}},
-              (mockError, scenarioNumber) => {
-                if (__DEV__) {
-                  expect(mockError.mock.calls[scenarioNumber]).toEqual(
-                    makeArgs('something with type "object"', 'qux'),
-                  );
-                } else {
-                  expect(mockError).not.toHaveBeenCalled();
-                }
-              },
-            ],
-            [
-              'quux',
-              {as: 'bar'},
-              (mockError, scenarioNumber) => {
-                if (__DEV__) {
-                  expect(mockError.mock.calls[scenarioNumber]).toEqual(
-                    makeArgs('"bar"', 'quux'),
-                  );
-                } else {
-                  expect(mockError).not.toHaveBeenCalled();
-                }
-              },
-            ],
-          ]);
-        },
+      expect(getMeaningfulChildren(document)).toEqual(
+        <html>
+          <head>
+            <style data-href="foo" data-precedence="foo">
+              {cssRed}
+            </style>
+          </head>
+          <body>loaded</body>
+        </html>,
       );
-    });
-  });
 
-  describe('prop validation', () => {
-    // @gate enableFloat
-    it('warns when you change props on a resource unless you also change the href', async () => {
-      const root = ReactDOMClient.createRoot(container);
       root.render(
-        <div>
-          <link
-            rel="stylesheet"
-            href="foo"
-            precedence="foo"
-            data-something-extra="extra"
-          />
-          <link
-            rel="stylesheet"
-            href="bar"
-            precedence="bar"
-            data-something-extra="extra"
-          />
-          <script src="sfoo" async={true} data-something-extra="extra" />
-          <script src="sbar" async={true} data-something-extra="extra" />
-          hello
-        </div>,
+        <html>
+          <body>
+            <Suspense fallback="loading...">
+              <style href="foo" precedence="foo">
+                {cssRed}
+              </style>
+              loaded
+            </Suspense>
+            <style href="bar" precedence="bar">
+              {cssBlue}
+            </style>
+            <style href="baz" precedence="foo">
+              {cssGreen}
+            </style>
+          </body>
+        </html>,
       );
       expect(Scheduler).toFlushWithoutYielding();
-
-      root.render(
-        <div>
-          <link
-            rel="stylesheet"
-            href="foo"
-            precedence="fu"
-            data-something-new="new"
-          />
-          <link
-            rel="stylesheet"
-            href="baz"
-            precedence="baz"
-            data-something-new="new"
-          />
-          <script src="sfoo" async={true} data-something-new="new" />
-          <script src="sbaz" async={true} data-something-new="new" />
-          hello
-        </div>,
-      );
-      expect(() => {
-        expect(Scheduler).toFlushWithoutYielding();
-      }).toErrorDev([
-        'Warning: A style Resource with href "foo" received new props with different values from the props used' +
-          ' when this Resource was first rendered. React will only use the props provided when' +
-          ' this resource was first rendered until a new href is provided. Unlike conventional' +
-          ' DOM elements, Resources instances do not have a one to one correspondence with Elements' +
-          ' in the DOM and as such, every instance of a Resource for a single Resource identifier' +
-          ' (href) must have props that agree with each other. The differences are described below.' +
-          '\n  data-something-extra: missing or null in latest props, "extra" in original props' +
-          '\n  data-something-new: "new" in latest props, missing or null in original props' +
-          '\n  precedence: "fu" in latest props, "foo" in original props',
-        'Warning: A script Resource with src "sfoo" received new props with different values from the props used' +
-          ' when this Resource was first rendered. React will only use the props provided when' +
-          ' this resource was first rendered until a new src is provided. Unlike conventional' +
-          ' DOM elements, Resources instances do not have a one to one correspondence with Elements' +
-          ' in the DOM and as such, every instance of a Resource for a single Resource identifier' +
-          ' (src) must have props that agree with each other. The differences are described below.' +
-          '\n  data-something-extra: missing or null in latest props, "extra" in original props' +
-          '\n  data-something-new: "new" in latest props, missing or null in original props',
-      ]);
       expect(getMeaningfulChildren(document)).toEqual(
         <html>
           <head>
-            <link
-              rel="stylesheet"
-              href="foo"
-              data-precedence="foo"
-              data-something-extra="extra"
-            />
-            <link
-              rel="stylesheet"
-              href="bar"
-              data-precedence="bar"
-              data-something-extra="extra"
-            />
-            <link
-              rel="stylesheet"
-              href="baz"
-              data-precedence="baz"
-              data-something-new="new"
-            />
-            <link rel="preload" as="style" href="foo" />
-            <link rel="preload" as="style" href="bar" />
-            <script src="sfoo" async="" data-something-extra="extra" />
-            <script src="sbar" async="" data-something-extra="extra" />
-            <link rel="preload" as="style" href="baz" />
-            <script src="sbaz" async="" data-something-new="new" />
+            <style data-href="foo" data-precedence="foo">
+              {cssRed}
+            </style>
+            <style data-href="baz" data-precedence="foo">
+              {cssGreen}
+            </style>
+            <style data-href="bar" data-precedence="bar">
+              {cssBlue}
+            </style>
           </head>
-          <body>
-            <div id="container">
-              <div>hello</div>
-            </div>
-          </body>
+          <body>loaded</body>
         </html>,
       );
     });
 
     // @gate enableFloat
-    it('warns when style Resource have different values for media for the same href', async () => {
-      const originalConsoleError = console.error;
-      const mockError = jest.fn();
-      console.error = (...args) => {
-        mockError(...args.map(normalizeCodeLocInfo));
-      };
-      try {
-        await actIntoEmptyDocument(() => {
-          const {pipe} = renderToPipeableStream(
-            <html>
-              <head>
-                <link
-                  rel="stylesheet"
-                  href="foo"
-                  precedence="foo"
-                  media="all"
-                />
-                <link rel="stylesheet" href="foo" precedence="foo" />
-
-                <link rel="stylesheet" href="bar" precedence="bar" />
-                <link
-                  rel="stylesheet"
-                  href="bar"
-                  precedence="bar"
-                  media="all"
-                />
-
-                <link
-                  rel="stylesheet"
-                  href="baz"
-                  precedence="baz"
-                  media="some"
-                />
-                <link
-                  rel="stylesheet"
-                  href="baz"
-                  precedence="baz"
-                  media="all"
-                />
-              </head>
-            </html>,
-          );
-          pipe(writable);
-        });
-        expect(getMeaningfulChildren(document)).toEqual(
+    it('can emit styles early when a partial boundary flushes', async () => {
+      const css = 'body { background-color: red; }';
+      await actIntoEmptyDocument(() => {
+        renderToPipeableStream(
           <html>
-            <head>
-              <link
-                rel="stylesheet"
-                href="foo"
-                data-precedence="foo"
-                media="all"
-              />
-              <link rel="stylesheet" href="bar" data-precedence="bar" />
-
-              <link
-                rel="stylesheet"
-                href="baz"
-                data-precedence="baz"
-                media="some"
-              />
-            </head>
-            <body />
+            <body>
+              <Suspense>
+                <BlockedOn value="first">
+                  <div>first</div>
+                  <style href="foo" precedence="default">
+                    {css}
+                  </style>
+                  <BlockedOn value="second">
+                    <div>second</div>
+                    <style href="bar" precedence="default">
+                      {css}
+                    </style>
+                  </BlockedOn>
+                </BlockedOn>
+              </Suspense>
+            </body>
           </html>,
-        );
+        ).pipe(writable);
+      });
 
-        if (__DEV__) {
-          expect(mockError).toHaveBeenCalledTimes(3);
-          expect(mockError).toHaveBeenCalledWith(
-            'Warning: A %s with %s "%s" has props that disagree with those found on %s. Resources always use the props' +
-              ' that were provided the first time they are encountered so any differences will be ignored. Please' +
-              ' update Resources that share an %s to have props that agree. The differences are described below.%s%s',
-            'style Resource',
-            'href',
-            'foo',
-            'an earlier instance of this Resource',
-            'href',
-            '\n  media: missing or null in latest props, "all" in original props',
-            componentStack(['link', 'head', 'html']),
-          );
-          expect(mockError).toHaveBeenCalledWith(
-            'Warning: A %s with %s "%s" has props that disagree with those found on %s. Resources always use the props' +
-              ' that were provided the first time they are encountered so any differences will be ignored. Please' +
-              ' update Resources that share an %s to have props that agree. The differences are described below.%s%s',
-            'style Resource',
-            'href',
-            'bar',
-            'an earlier instance of this Resource',
-            'href',
-            '\n  media: "all" in latest props, missing or null in original props',
-            componentStack(['link', 'head', 'html']),
-          );
-          expect(mockError).toHaveBeenCalledWith(
-            'Warning: A %s with %s "%s" has props that disagree with those found on %s. Resources always use the props' +
-              ' that were provided the first time they are encountered so any differences will be ignored. Please' +
-              ' update Resources that share an %s to have props that agree. The differences are described below.%s%s',
-            'style Resource',
-            'href',
-            'baz',
-            'an earlier instance of this Resource',
-            'href',
-            '\n  media: "all" in latest props, "some" in original props',
-            componentStack(['link', 'head', 'html']),
-          );
-        } else {
-          expect(mockError).not.toHaveBeenCalled();
-        }
-      } finally {
-        console.error = originalConsoleError;
-      }
-    });
+      expect(getMeaningfulChildren(document)).toEqual(
+        <html>
+          <head />
+          <body />
+        </html>,
+      );
 
-    // @gate enableFloat
-    it('warns when style Resource props differ or are added for the same href', async () => {
-      const originalConsoleError = console.error;
-      const mockError = jest.fn();
-      console.error = (...args) => {
-        mockError(...args.map(normalizeCodeLocInfo));
-      };
-      try {
-        await actIntoEmptyDocument(() => {
-          const {pipe} = renderToPipeableStream(
-            <html>
-              <head>
-                <link
-                  rel="stylesheet"
-                  href="foo"
-                  precedence="foo"
-                  data-foo="an original value"
-                />
-                <link rel="stylesheet" href="foo" precedence="foo" />
-                <link rel="stylesheet" href="foo" precedence="foonew" />
+      await act(() => {
+        resolveText('first');
+      });
 
-                <link rel="stylesheet" href="bar" precedence="bar" />
-                <link
-                  rel="stylesheet"
-                  href="bar"
-                  precedence="bar"
-                  data-foo="a new value"
-                />
+      const styleTemplates = document.querySelectorAll(
+        'template[data-precedence]',
+      );
+      expect(styleTemplates.length).toBe(1);
+      expect(getMeaningfulChildren(styleTemplates[0].content)).toEqual(
+        <style data-href="foo" data-precedence="default">
+          {css}
+        </style>,
+      );
+      expect(getMeaningfulChildren(document)).toEqual(
+        <html>
+          <head />
+          <body />
+        </html>,
+      );
 
-                <link
-                  rel="stylesheet"
-                  href="baz"
-                  precedence="baz"
-                  data-foo="an original value"
-                />
-                <link
-                  rel="stylesheet"
-                  href="baz"
-                  precedence="baz"
-                  data-foo="a new value"
-                />
-              </head>
-            </html>,
-          );
-          pipe(writable);
-        });
-        expect(getMeaningfulChildren(document)).toEqual(
-          <html>
-            <head>
-              <link
-                rel="stylesheet"
-                href="foo"
-                data-precedence="foo"
-                data-foo="an original value"
-              />
-              <link rel="stylesheet" href="bar" data-precedence="bar" />
-              <link
-                rel="stylesheet"
-                href="baz"
-                data-precedence="baz"
-                data-foo="an original value"
-              />
-            </head>
-            <body />
-          </html>,
-        );
+      await act(() => {
+        resolveText('second');
+      });
 
-        if (__DEV__) {
-          expect(mockError).toHaveBeenCalledTimes(3);
-          expect(mockError).toHaveBeenCalledWith(
-            'Warning: A %s with %s "%s" has props that disagree with those found on %s. Resources always use the props' +
-              ' that were provided the first time they are encountered so any differences will be ignored. Please' +
-              ' update Resources that share an %s to have props that agree. The differences are described below.%s%s',
-            'style Resource',
-            'href',
-            'foo',
-            'an earlier instance of this Resource',
-            'href',
-            '\n  precedence: "foonew" in latest props, "foo" in original props',
-            componentStack(['link', 'head', 'html']),
-          );
-          expect(mockError).toHaveBeenCalledWith(
-            'Warning: A %s with %s "%s" has props that disagree with those found on %s. Resources always use the props' +
-              ' that were provided the first time they are encountered so any differences will be ignored. Please' +
-              ' update Resources that share an %s to have props that agree. The differences are described below.%s%s',
-            'style Resource',
-            'href',
-            'bar',
-            'an earlier instance of this Resource',
-            'href',
-            '\n  data-foo: "a new value" in latest props, missing or null in original props',
-            componentStack(['link', 'head', 'html']),
-          );
-          expect(mockError).toHaveBeenCalledWith(
-            'Warning: A %s with %s "%s" has props that disagree with those found on %s. Resources always use the props' +
-              ' that were provided the first time they are encountered so any differences will be ignored. Please' +
-              ' update Resources that share an %s to have props that agree. The differences are described below.%s%s',
-            'style Resource',
-            'href',
-            'baz',
-            'an earlier instance of this Resource',
-            'href',
-            '\n  data-foo: "a new value" in latest props, "an original value" in original props',
-            componentStack(['link', 'head', 'html']),
-          );
-        } else {
-          expect(mockError).not.toHaveBeenCalled();
-        }
-      } finally {
-        console.error = originalConsoleError;
-      }
+      expect(getMeaningfulChildren(document)).toEqual(
+        <html>
+          <head>
+            <style data-href="foo" data-precedence="default">
+              {css}
+            </style>
+            <style data-href="bar" data-precedence="default">
+              {css}
+            </style>
+          </head>
+          <body>
+            <div>first</div>
+            <div>second</div>
+          </body>
+        </html>,
+      );
     });
+  });
 
+  describe('Script Resources', () => {
     // @gate enableFloat
-    it('warns when style Resource includes any combination of onLoad, onError, or disabled props', async () => {
-      const originalConsoleError = console.error;
-      const mockError = jest.fn();
-      console.error = (...args) => {
-        mockError(...args.map(normalizeCodeLocInfo));
-      };
-      try {
-        await actIntoEmptyDocument(() => {
-          const {pipe} = renderToPipeableStream(
-            <html>
-              <head>
-                <link
-                  rel="stylesheet"
-                  href="foo"
-                  precedence="foo"
-                  onLoad={() => {}}
-                  onError={() => {}}
-                />
-                <link
-                  rel="stylesheet"
-                  href="bar"
-                  precedence="bar"
-                  onLoad={() => {}}
-                />
-                <link
-                  rel="stylesheet"
-                  href="baz"
-                  precedence="baz"
-                  onError={() => {}}
-                />
-                <link
-                  rel="stylesheet"
-                  href="qux"
-                  precedence="qux"
-                  disabled={true}
-                />
-              </head>
-              <body />
-            </html>,
-          );
-          pipe(writable);
-        });
-        // precedence is removed from the stylesheets because it is considered a reserved prop for
-        // stylesheets to opt into resource semantics.
-        expect(getMeaningfulChildren(document)).toEqual(
+    it('treats async scripts without onLoad or onError as Resources', async () => {
+      await actIntoEmptyDocument(() => {
+        const {pipe} = renderToPipeableStream(
           <html>
-            <head>
-              <link rel="preload" as="style" href="foo" />
-              <link rel="preload" as="style" href="bar" />
-              <link rel="preload" as="style" href="baz" />
-              <link rel="preload" as="style" href="qux" />
-              <link rel="stylesheet" href="foo" />
-              <link rel="stylesheet" href="bar" />
-              <link rel="stylesheet" href="baz" />
-              <link rel="stylesheet" href="qux" disabled="" />
-            </head>
-            <body />
+            <head />
+            <body>
+              <script src="foo" async={true} />
+              <script src="bar" async={true} onLoad={() => {}} />
+              <script src="baz" data-meaningful="" />
+              hello world
+            </body>
           </html>,
         );
+        pipe(writable);
+      });
+      // The plain async script is converted to a resource and emitted as part of the shell
+      // The async script with onLoad is preloaded in the shell but is expecting to be added
+      // during hydration. This is novel, the script is NOT a HostHoistable but it also will
+      // never hydrate
+      // The regular script is just a normal html that should hydrate with a HostComponent
+      expect(getMeaningfulChildren(document)).toEqual(
+        <html>
+          <head>
+            <script src="foo" async="" />
+            <link rel="preload" href="bar" as="script" />
+            <link rel="preload" href="baz" as="script" />
+          </head>
+          <body>
+            <script src="baz" data-meaningful="" />
+            hello world
+          </body>
+        </html>,
+      );
 
-        if (__DEV__) {
-          expect(mockError).toHaveBeenCalledTimes(4);
-          expect(mockError).toHaveBeenCalledWith(
-            'Warning: A link (rel="stylesheet") element with href "%s" has the precedence prop but also included the %s.' +
-              ' When using %s React will opt out of Resource behavior. If you meant for this' +
-              ' element to be treated as a Resource remove the %s. Otherwise remove the precedence prop.%s',
-            'foo',
-            'onLoad and onError props',
-            'onLoad, onError, or disabled',
-            'onLoad and onError props',
-            componentStack(['link', 'head', 'html']),
-          );
-          expect(mockError).toHaveBeenCalledWith(
-            'Warning: A link (rel="stylesheet") element with href "%s" has the precedence prop but also included the %s.' +
-              ' When using %s React will opt out of Resource behavior. If you meant for this' +
-              ' element to be treated as a Resource remove the %s. Otherwise remove the precedence prop.%s',
-            'bar',
-            'onLoad prop',
-            'onLoad, onError, or disabled',
-            'onLoad prop',
-            componentStack(['link', 'head', 'html']),
-          );
-          expect(mockError).toHaveBeenCalledWith(
-            'Warning: A link (rel="stylesheet") element with href "%s" has the precedence prop but also included the %s.' +
-              ' When using %s React will opt out of Resource behavior. If you meant for this' +
-              ' element to be treated as a Resource remove the %s. Otherwise remove the precedence prop.%s',
-            'baz',
-            'onError prop',
-            'onLoad, onError, or disabled',
-            'onError prop',
-            componentStack(['link', 'head', 'html']),
-          );
-          expect(mockError).toHaveBeenCalledWith(
-            'Warning: A link (rel="stylesheet") element with href "%s" has the precedence prop but also included the %s.' +
-              ' When using %s React will opt out of Resource behavior. If you meant for this' +
-              ' element to be treated as a Resource remove the %s. Otherwise remove the precedence prop.%s',
-            'qux',
-            'disabled prop',
-            'onLoad, onError, or disabled',
-            'disabled prop',
-            componentStack(['link', 'head', 'html']),
-          );
-        } else {
-          expect(mockError).not.toHaveBeenCalled();
-        }
-      } finally {
-        console.error = originalConsoleError;
-      }
+      ReactDOMClient.hydrateRoot(
+        document,
+        <html>
+          <head />
+          <body>
+            <script src="foo" async={true} />
+            <script src="bar" async={true} onLoad={() => {}} />
+            <script src="baz" data-meaningful="" />
+            hello world
+          </body>
+        </html>,
+      );
+      expect(Scheduler).toFlushWithoutYielding();
+      // The async script with onLoad is inserted in the right place but does not cause the hydration
+      // to fail.
+      expect(getMeaningfulChildren(document)).toEqual(
+        <html>
+          <head>
+            <script src="foo" async="" />
+            <link rel="preload" href="bar" as="script" />
+            <link rel="preload" href="baz" as="script" />
+          </head>
+          <body>
+            <script src="bar" async="" />
+            <script src="baz" data-meaningful="" />
+            hello world
+          </body>
+        </html>,
+      );
     });
 
     // @gate enableFloat
-    it('warns when script Resources have new or different values for props', async () => {
-      const originalConsoleError = console.error;
-      const mockError = jest.fn();
-      console.error = (...args) => {
-        mockError(...args.map(normalizeCodeLocInfo));
-      };
-      try {
-        await actIntoEmptyDocument(() => {
-          const {pipe} = renderToPipeableStream(
-            <html>
-              <head>
-                <script src="foo" async={true} data-foo="a current value" />
-                <script src="foo" async={true} data-foo="a new value" />
-              </head>
-            </html>,
-          );
-          pipe(writable);
-        });
-        expect(getMeaningfulChildren(document)).toEqual(
+    it('does not create script resources when inside an <svg> context', async () => {
+      await actIntoEmptyDocument(() => {
+        const {pipe} = renderToPipeableStream(
           <html>
-            <head>
-              <script src="foo" async="" data-foo="a current value" />
-            </head>
-            <body />
+            <body>
+              <svg>
+                <path>
+                  <script async={true} src="foo" />
+                </path>
+                <foreignObject>
+                  <script async={true} src="bar" />
+                </foreignObject>
+              </svg>
+            </body>
           </html>,
         );
+        pipe(writable);
+      });
+      expect(getMeaningfulChildren(document)).toEqual(
+        <html>
+          <head>
+            <script async="" src="bar" />
+          </head>
+          <body>
+            <svg>
+              <path>
+                <script async="" src="foo" />
+              </path>
+              <foreignobject />
+            </svg>
+          </body>
+        </html>,
+      );
 
-        if (__DEV__) {
-          expect(mockError).toHaveBeenCalledTimes(1);
-          expect(mockError).toHaveBeenCalledWith(
-            'Warning: A %s with %s "%s" has props that disagree with those found on %s. Resources always use the props' +
-              ' that were provided the first time they are encountered so any differences will be ignored. Please' +
-              ' update Resources that share an %s to have props that agree. The differences are described below.%s%s',
-            'script Resource',
-            'src',
-            'foo',
-            'an earlier instance of this Resource',
-            'src',
-            '\n  data-foo: "a new value" in latest props, "a current value" in original props',
-            componentStack(['script', 'head', 'html']),
-          );
-        } else {
-          expect(mockError).not.toHaveBeenCalled();
-        }
-      } finally {
-        console.error = originalConsoleError;
-      }
+      const root = ReactDOMClient.createRoot(document.body);
+      root.render(
+        <div>
+          <svg>
+            <path>
+              <script async={true} src="foo" />
+            </path>
+            <foreignObject>
+              <script async={true} src="bar" />
+            </foreignObject>
+          </svg>
+        </div>,
+      );
+      expect(Scheduler).toFlushWithoutYielding();
+      expect(getMeaningfulChildren(document.body)).toEqual(
+        <div>
+          <svg>
+            <path>
+              <script async="" src="foo" />
+            </path>
+            <foreignobject />
+          </svg>
+        </div>,
+      );
     });
 
     // @gate enableFloat
-    it('warns when preload Resources have new or different values for props', async () => {
-      const originalConsoleError = console.error;
-      const mockError = jest.fn();
-      console.error = (...args) => {
-        mockError(...args.map(normalizeCodeLocInfo));
-      };
-      try {
-        await actIntoEmptyDocument(() => {
-          const {pipe} = renderToPipeableStream(
-            <html>
-              <head>
-                <link
-                  rel="preload"
-                  as="style"
-                  href="foo"
-                  data-foo="a current value"
-                />
-                <link
-                  rel="preload"
-                  as="style"
-                  href="foo"
-                  data-foo="a new value"
-                />
-
-                <link
-                  rel="preload"
-                  as="style"
-                  href="bar"
-                  data-bar="a current value"
-                />
-                <link
-                  rel="preload"
-                  as="font"
-                  href="bar"
-                  data-bar="a current value"
-                  crossOrigin=""
-                />
-              </head>
-            </html>,
-          );
-          pipe(writable);
-        });
-        expect(getMeaningfulChildren(document)).toEqual(
+    it('does not create script resources when inside a <noscript> context', async () => {
+      await actIntoEmptyDocument(() => {
+        const {pipe} = renderToPipeableStream(
           <html>
-            <head>
-              <link
-                rel="preload"
-                as="style"
-                href="foo"
-                data-foo="a current value"
-              />
-              <link
-                rel="preload"
-                as="style"
-                href="bar"
-                data-bar="a current value"
-              />
-            </head>
-            <body />
+            <body>
+              <noscript>
+                <script async={true} src="foo" />
+              </noscript>
+            </body>
           </html>,
         );
+        pipe(writable);
+      });
+      expect(getMeaningfulChildren(document)).toEqual(
+        <html>
+          <head />
+          <body>
+            <noscript>
+              &lt;script async="" src="foo"&gt;&lt;/script&gt;
+            </noscript>
+          </body>
+        </html>,
+      );
 
-        if (__DEV__) {
-          expect(mockError).toHaveBeenCalledTimes(2);
-          expect(mockError).toHaveBeenCalledWith(
-            'Warning: A %s with %s "%s" has props that disagree with those found on %s. Resources always use the props' +
-              ' that were provided the first time they are encountered so any differences will be ignored. Please' +
-              ' update Resources that share an %s to have props that agree. The differences are described below.%s%s',
-            'preload Resource (as "style")',
-            'href',
-            'foo',
-            'an earlier instance of this Resource',
-            'href',
-            '\n  data-foo: "a new value" in latest props, "a current value" in original props',
-            componentStack(['link', 'head', 'html']),
-          );
-          expect(mockError).toHaveBeenCalledWith(
-            'Warning: A %s is using the same href "%s" as a %s. This is always an error and React will only keep the first preload' +
-              ' for any given href, discarding subsequent instances. To fix, find where you are using this href in link' +
-              ' tags or in calls to ReactDOM.preload() or ReactDOM.preinit() and either make the Resource types agree or' +
-              ' update the hrefs to be distinct for different Resource types.%s',
-            'preload Resource (as "font")',
-            'bar',
-            'preload Resource (as "style")',
-            componentStack(['link', 'head', 'html']),
-          );
-        } else {
-          expect(mockError).not.toHaveBeenCalled();
-        }
-      } finally {
-        console.error = originalConsoleError;
-      }
+      const root = ReactDOMClient.createRoot(document.body);
+      root.render(
+        <div>
+          <noscript>
+            <script async={true} src="foo" />
+          </noscript>
+        </div>,
+      );
+      expect(Scheduler).toFlushWithoutYielding();
+      expect(getMeaningfulChildren(document.body)).toEqual(
+        <div>
+          {/* On the client, <noscript> never renders children */}
+          <noscript />
+        </div>,
+      );
     });
 
     // @gate enableFloat
-    it('warns when an existing preload Resource has certain specific different props from a style Resource of the same href', async () => {
-      const originalConsoleError = console.error;
-      const mockError = jest.fn();
-      console.error = (...args) => {
-        mockError(...args.map(normalizeCodeLocInfo));
-      };
-      try {
-        await actIntoEmptyDocument(() => {
-          const {pipe} = renderToPipeableStream(
-            <html>
-              <head>
-                <link
-                  rel="preload"
-                  as="style"
-                  href="foo"
-                  crossOrigin="preload value"
-                />
-                <link
-                  rel="stylesheet"
-                  href="foo"
-                  precedence="foo"
-                  crossOrigin="style value"
-                />
-              </head>
-            </html>,
-          );
+    it('warns if you provide different props between <script async={true} .../> and ReactDOM.preinit(..., {as: "script"}) for the same `href`', async () => {
+      function App() {
+        ReactDOM.preinit('foo', {as: 'script', integrity: 'some hash'});
+        return (
+          <html>
+            <body>
+              <script
+                async={true}
+                src="foo"
+                integrity="different hash"
+                data-foo=""
+              />
+              hello
+            </body>
+          </html>
+        );
+      }
+      await expect(async () => {
+        await actIntoEmptyDocument(() => {
+          const {pipe} = renderToPipeableStream(<App />);
           pipe(writable);
         });
-        expect(getMeaningfulChildren(document)).toEqual(
+      }).toErrorDev([
+        'Warning: React encountered a <script async={true} src="foo" .../> with props that conflict with the options provided to `ReactDOM.preinit("foo", { as: "script", ... })`. React will use the first props or preinitialization options encountered when rendering a hoistable script with a particular `src` and will ignore any newer props or options. The first instance of this script resource was created using the `ReactDOM.preinit()` function. Please note, `ReactDOM.preinit()` is modeled off of module import assertions capabilities and does not support arbitrary props. If you need to have props not included with the preinit options you will need to rely on rendering <script> tags only.\n  "data-foo" prop value: an empty string, option not available with ReactDOM.preinit()\n  "integrity" prop value: "different hash", option value: "some hash"',
+      ]);
+    });
+
+    // @gate enableFloat
+    it('warns if you provide different props between two <script async={true} .../> that share the same `src`', async () => {
+      function App() {
+        return (
           <html>
-            <head>
-              <link
-                rel="stylesheet"
-                href="foo"
-                data-precedence="foo"
-                crossorigin="style value"
+            <body>
+              <script
+                async={true}
+                src="foo"
+                integrity="some hash"
+                data-foo=""
               />
-            </head>
-            <body />
-          </html>,
+              <script
+                async={true}
+                src="foo"
+                integrity="different hash"
+                data-bar=""
+              />
+              hello
+            </body>
+          </html>
         );
-
-        if (__DEV__) {
-          expect(mockError).toHaveBeenCalledTimes(1);
-          expect(mockError).toHaveBeenCalledWith(
-            'Warning: A %s with %s "%s" has props that disagree with those found on %s. Resources always use the props' +
-              ' that were provided the first time they are encountered so any differences will be ignored. Please' +
-              ' update Resources that share an %s to have props that agree. The differences are described below.%s%s',
-            'style Resource',
-            'href',
-            'foo',
-            'a preload Resource (as "style") with the same href',
-            'href',
-            '\n  crossOrigin: "style value" in latest props, "preload value" in original props',
-            componentStack(['link', 'head', 'html']),
-          );
-        } else {
-          expect(mockError).not.toHaveBeenCalled();
-        }
-      } finally {
-        console.error = originalConsoleError;
       }
+      await expect(async () => {
+        await actIntoEmptyDocument(() => {
+          const {pipe} = renderToPipeableStream(<App />);
+          pipe(writable);
+        });
+      }).toErrorDev([
+        'React encountered a <script async={true} src="foo" .../> that has props that conflict with another hoistable script with the same `src`. When rendering hoistable scripts (async scripts without any loading handlers) the props from the first encountered instance will be used and props from later instances will be ignored. Update the props on both <script async={true} .../> instance so they agree.\n  "data-foo" missing for props, original value: an empty string\n  "data-bar" prop value: an empty string, missing from original props\n  "integrity" prop value: "different hash", original value: "some hash"',
+      ]);
     });
   });
 
-  describe('escaping', () => {
+  describe('Hoistables', () => {
     // @gate enableFloat
-    it('escapes hrefs when selecting matching elements in the document when rendering Resources', async () => {
+    it('can hoist meta tags on the server and hydrate them on the client', async () => {
       await actIntoEmptyDocument(() => {
         const {pipe} = renderToPipeableStream(
           <html>
-            <head />
             <body>
-              <link rel="preload" href="preload" as="style" />
-              <link rel="stylesheet" href="style" precedence="style" />
-              <link rel="stylesheet" href="with\slashes" precedence="style" />
-              <link rel="preload" href={'with\nnewline'} as="style" />
-              <div id="container" />
+              <meta name="foo" data-foo="data" content="bar" />
             </body>
           </html>,
         );
         pipe(writable);
       });
 
-      container = document.getElementById('container');
-      const root = ReactDOMClient.createRoot(container);
-      root.render(
-        <div>
-          <link rel="preload" href={'preload"][rel="preload'} as="style" />
-          <link
-            rel="stylesheet"
-            href={'style"][rel="stylesheet'}
-            precedence="style"
-          />
-          <link rel="stylesheet" href={'with\\slashes'} precedence="style" />
-          <link rel="preload" href={'with\nnewline'} as="style" />
-          foo
-        </div>,
-      );
-      expect(Scheduler).toFlushWithoutYielding();
       expect(getMeaningfulChildren(document)).toEqual(
         <html>
           <head>
-            <link rel="stylesheet" href="style" data-precedence="style" />
-            <link
-              rel="stylesheet"
-              href="with\slashes"
-              data-precedence="style"
-            />
-            <link
-              rel="stylesheet"
-              href={'style"][rel="stylesheet'}
-              data-precedence="style"
-            />
-            <link rel="preload" as="style" href="preload" />
-            <link rel="preload" href={'with\nnewline'} as="style" />
-            <link rel="preload" href={'preload"][rel="preload'} as="style" />
-            <link rel="preload" href={'style"][rel="stylesheet'} as="style" />
+            <meta name="foo" data-foo="data" content="bar" />
           </head>
+          <body />
+        </html>,
+      );
+
+      const root = ReactDOMClient.hydrateRoot(
+        document,
+        <html>
           <body>
-            <div id="container">
-              <div>foo</div>
-            </div>
+            <meta name="foo" data-foo="data" content="bar" />
           </body>
         </html>,
       );
+      expect(Scheduler).toFlushWithoutYielding();
+      expect(getMeaningfulChildren(document)).toEqual(
+        <html>
+          <head>
+            <meta name="foo" data-foo="data" content="bar" />
+          </head>
+          <body />
+        </html>,
+      );
+
+      root.render(
+        <html>
+          <body />
+        </html>,
+      );
+      expect(Scheduler).toFlushWithoutYielding();
+      expect(getMeaningfulChildren(document)).toEqual(
+        <html>
+          <head />
+          <body />
+        </html>,
+      );
     });
 
     // @gate enableFloat
-    it('escapes hrefs when selecting matching elements in the document when using preload and preinit', async () => {
-      await actIntoEmptyDocument(() => {
-        const {pipe} = renderToPipeableStream(
-          <html>
-            <head />
-            <body>
-              <link rel="preload" href="preload" as="style" />
-              <link rel="stylesheet" href="style" precedence="style" />
-              <link rel="stylesheet" href="with\slashes" precedence="style" />
-              <link rel="preload" href={'with\nnewline'} as="style" />
-              <div id="container" />
-            </body>
-          </html>,
+    it('can hoist meta tags on the client', async () => {
+      const root = ReactDOMClient.createRoot(container);
+      await act(() => {
+        root.render(
+          <div>
+            <meta name="foo" data-foo="data" content="bar" />
+          </div>,
         );
-        pipe(writable);
       });
+      expect(Scheduler).toFlushWithoutYielding();
 
-      function App() {
-        ReactDOM.preload('preload"][rel="preload', {as: 'style'});
-        ReactDOM.preinit('style"][rel="stylesheet', {
-          as: 'style',
-          precedence: 'style',
-        });
-        ReactDOM.preinit('with\\slashes', {
-          as: 'style',
-          precedence: 'style',
-        });
-        ReactDOM.preload('with\nnewline', {as: 'style'});
-        return <div>foo</div>;
-      }
+      expect(getMeaningfulChildren(document.head)).toEqual(
+        <meta name="foo" data-foo="data" content="bar" />,
+      );
+      expect(getMeaningfulChildren(container)).toEqual(<div />);
 
-      container = document.getElementById('container');
-      const root = ReactDOMClient.createRoot(container);
-      root.render(<App />);
+      root.render(<div />);
       expect(Scheduler).toFlushWithoutYielding();
-      expect(getMeaningfulChildren(document)).toEqual(
-        <html>
-          <head>
-            <link rel="stylesheet" href="style" data-precedence="style" />
-            <link
-              rel="stylesheet"
-              href="with\slashes"
-              data-precedence="style"
-            />
-            <link
-              rel="stylesheet"
-              href={'style"][rel="stylesheet'}
-              data-precedence="style"
-            />
-            <link rel="preload" as="style" href="preload" />
-            <link rel="preload" href={'with\nnewline'} as="style" />
-            <link rel="preload" href={'preload"][rel="preload'} as="style" />
-          </head>
-          <body>
-            <div id="container">
-              <div>foo</div>
-            </div>
-          </body>
-        </html>,
-      );
+      expect(getMeaningfulChildren(document.head)).toEqual(undefined);
     });
-  });
 
-  describe('resource free contexts', () => {
     // @gate enableFloat
-    it('allows resources inside foreignobject within an svg context', async () => {
+    it('can hoist link (non-stylesheet) tags on the server and hydrate them on the client', async () => {
       await actIntoEmptyDocument(() => {
         const {pipe} = renderToPipeableStream(
           <html>
             <body>
-              <svg>
-                <foreignObject>
-                  <title>foo</title>
-                </foreignObject>
-              </svg>
+              <link rel="foo" data-foo="data" href="foo" />
             </body>
           </html>,
         );
         pipe(writable);
       });
+
       expect(getMeaningfulChildren(document)).toEqual(
         <html>
           <head>
-            <title>foo</title>
+            <link rel="foo" data-foo="data" href="foo" />
           </head>
-          <body>
-            <svg>
-              <foreignobject />
-            </svg>
-          </body>
+          <body />
         </html>,
       );
 
-      let root = ReactDOMClient.hydrateRoot(
+      const root = ReactDOMClient.hydrateRoot(
         document,
         <html>
           <body>
-            <svg>
-              <foreignObject>
-                <title>foo</title>
-              </foreignObject>
-            </svg>
+            <link rel="foo" data-foo="data" href="foo" />
           </body>
         </html>,
       );
       expect(Scheduler).toFlushWithoutYielding();
-      // @TODO the preload should not get inserted on hydration
       expect(getMeaningfulChildren(document)).toEqual(
         <html>
           <head>
-            <title>foo</title>
+            <link rel="foo" data-foo="data" href="foo" />
           </head>
-          <body>
-            <svg>
-              <foreignobject />
-            </svg>
-          </body>
+          <body />
         </html>,
       );
 
-      root.unmount();
-      root = ReactDOMClient.createRoot(document);
       root.render(
         <html>
-          <body>
-            <svg>
-              <foreignObject>
-                <title>foo</title>
-              </foreignObject>
-            </svg>
-          </body>
+          <body />
         </html>,
       );
       expect(Scheduler).toFlushWithoutYielding();
       expect(getMeaningfulChildren(document)).toEqual(
         <html>
-          <head>
-            <title>foo</title>
-          </head>
-          <body>
-            <svg>
-              <foreignobject />
-            </svg>
-          </body>
+          <head />
+          <body />
         </html>,
       );
     });
 
     // @gate enableFloat
-    it('warns if you render something that is almost a resource inside an svg tree', async () => {
+    it('can hoist link (non-stylesheet) tags on the client', async () => {
       const root = ReactDOMClient.createRoot(container);
-      root.render(
-        <svg>
-          <path>
-            <link rel="stylesheet" href="foo" />
-            <script src="foo" />
-            <script async={true} src="bar" onLoad={() => {}} />
-            <link rel="foo" href="bar" onLoad={() => {}} />
-          </path>
-        </svg>,
+      await act(() => {
+        root.render(
+          <div>
+            <link rel="foo" data-foo="data" href="foo" />
+          </div>,
+        );
+      });
+      expect(Scheduler).toFlushWithoutYielding();
+
+      expect(getMeaningfulChildren(document.head)).toEqual(
+        <link rel="foo" data-foo="data" href="foo" />,
       );
-      expect(() => {
-        expect(Scheduler).toFlushWithoutYielding();
-      }).toErrorDev([
-        'Warning: Cannot render a <link rel="stylesheet" /> as a descendent of an <svg> element without knowing its precedence. Consider adding precedence="default" or moving it above the <svg> ancestor.',
-        'Warning: Cannot render a sync or defer <script> as a descendent of an <svg> element. Try adding async="" or moving it above the ancestor <svg> element.',
-        'Warning: Cannot render a <script> with onLoad or onError listeners as a descendent of an <svg> element. Try removing onLoad={...} and onError={...} or moving it above the ancestor <svg> element.',
-        'Warning: Cannot render a <link> with onLoad or onError listeners as a descendent of <svg>. Try removing onLoad={...} and onError={...} or moving it above the <svg> ancestor.',
-      ]);
+      expect(getMeaningfulChildren(container)).toEqual(<div />);
+
+      root.render(<div />);
+      expect(Scheduler).toFlushWithoutYielding();
+      expect(getMeaningfulChildren(document.head)).toEqual(undefined);
     });
 
     // @gate enableFloat
-    it('should support non-title resources in svg context', async () => {
+    it('can hoist title tags on the server and hydrate them on the client', async () => {
       await actIntoEmptyDocument(() => {
         const {pipe} = renderToPipeableStream(
           <html>
             <body>
-              <svg>
-                <title>foo</title>
-                <link rel="foo" href="bar" />
-                <link rel="stylesheet" href="bar" precedence="default" />
-                <link rel="preload" href="bar" as="style" />
-                <path>
-                  <title>bar</title>
-                  <script src="baz" async={true} />
-                  <meta name="foo" content="bar" />
-                  <base href="foo" />
-                </path>
-              </svg>
-              <title>qux</title>
+              <title data-foo="foo">a title</title>
             </body>
           </html>,
         );
         pipe(writable);
       });
+
       expect(getMeaningfulChildren(document)).toEqual(
         <html>
           <head>
-            <base href="foo" />
-            <link rel="stylesheet" href="bar" data-precedence="default" />
-            <script src="baz" async="" />
-            <link rel="foo" href="bar" />
-            <meta name="foo" content="bar" />
-            <title>qux</title>
+            <title data-foo="foo">a title</title>
           </head>
-          <body>
-            <svg>
-              <title>foo</title>
-              <path>
-                <title>bar</title>
-              </path>
-            </svg>
-          </body>
+          <body />
         </html>,
       );
 
-      let root = ReactDOMClient.hydrateRoot(
+      const root = ReactDOMClient.hydrateRoot(
         document,
         <html>
           <body>
-            <svg>
-              <title>foo</title>
-              <link rel="foo" href="bar" />
-              <link rel="stylesheet" href="bar" precedence="default" />
-              <link rel="preload" href="bar" as="style" />
-              <path>
-                <title>bar</title>
-                <script src="baz" async={true} />
-                <meta name="foo" content="bar" />
-                <base href="foo" />
-              </path>
-            </svg>
-            <title>qux</title>
+            <title data-foo="foo">a title</title>
           </body>
         </html>,
       );
       expect(Scheduler).toFlushWithoutYielding();
-      // @TODO the preload should not get inserted on hydration
       expect(getMeaningfulChildren(document)).toEqual(
         <html>
           <head>
-            <base href="foo" />
-            <link rel="stylesheet" href="bar" data-precedence="default" />
-            <script src="baz" async="" />
-            <link rel="foo" href="bar" />
-            <meta name="foo" content="bar" />
-            <title>qux</title>
-            <link rel="preload" href="bar" as="style" />
+            <title data-foo="foo">a title</title>
           </head>
-          <body>
-            <svg>
-              <title>foo</title>
-              <path>
-                <title>bar</title>
-              </path>
-            </svg>
-          </body>
+          <body />
         </html>,
       );
 
-      root.unmount();
-      root = ReactDOMClient.createRoot(document);
       root.render(
         <html>
-          <body>
-            <svg>
-              <title>foo</title>
-              <link rel="foo" href="bar" />
-              <link rel="stylesheet" href="bar" precedence="default" />
-              <link rel="preload" href="bar" as="style" />
-              <path>
-                <title>bar</title>
-                <script src="baz" async={true} />
-                <meta name="foo" content="bar" />
-                <base href="foo" />
-              </path>
-            </svg>
-            <title>qux</title>
-          </body>
+          <body />
+        </html>,
+      );
+      expect(Scheduler).toFlushWithoutYielding();
+      expect(getMeaningfulChildren(document)).toEqual(
+        <html>
+          <head />
+          <body />
         </html>,
       );
+    });
+
+    // @gate enableFloat
+    it('can hoist title tags on the client', async () => {
+      const root = ReactDOMClient.createRoot(container);
+      await act(() => {
+        root.render(
+          <div>
+            <title data-foo="foo">a title</title>
+          </div>,
+        );
+      });
+      expect(Scheduler).toFlushWithoutYielding();
+
+      expect(getMeaningfulChildren(document.head)).toEqual(
+        <title data-foo="foo">a title</title>,
+      );
+      expect(getMeaningfulChildren(container)).toEqual(<div />);
+
+      root.render(<div />);
       expect(Scheduler).toFlushWithoutYielding();
+      expect(getMeaningfulChildren(document.head)).toEqual(undefined);
+    });
+
+    // @gate enableFloat
+    it('prioritizes ordering for certain hoistables over others when rendering on the server', async () => {
+      await actIntoEmptyDocument(() => {
+        const {pipe} = renderToPipeableStream(
+          <html>
+            <body>
+              <link rel="foo" href="foo" />
+              <meta name="bar" />
+              <title>a title</title>
+              <link rel="preload" href="foo" as="style" />
+              <link rel="preconnect" href="bar" />
+              <link rel="dns-prefetch" href="baz" />
+              <meta charSet="utf-8" />
+            </body>
+          </html>,
+        );
+        pipe(writable);
+      });
+
       expect(getMeaningfulChildren(document)).toEqual(
         <html>
           <head>
-            <link rel="stylesheet" href="bar" data-precedence="default" />
-            <link rel="foo" href="bar" />
-            <script src="baz" async="" />
-            <meta name="foo" content="bar" />
-            <base href="foo" />
-            <title>qux</title>
+            {/* charset first */}
+            <meta charset="utf-8" />
+            {/* preconnect links next */}
+            <link rel="preconnect" href="bar" />
+            <link rel="dns-prefetch" href="baz" />
+            {/* preloads next */}
+            <link rel="preload" href="foo" as="style" />
+            {/* Everything else last */}
+            <link rel="foo" href="foo" />
+            <meta name="bar" />
+            <title>a title</title>
           </head>
-          <body>
-            <svg>
-              <title>foo</title>
-              <path>
-                <title>bar</title>
-              </path>
-            </svg>
-          </body>
+          <body />
         </html>,
       );
     });
 
-    it('should not treat title descendants of svg into resources', async () => {
+    // @gate enableFloat
+    it('emits hoistables before other content when streaming in late', async () => {
+      let content = '';
+      writable.on('data', chunk => (content += chunk));
+
       await actIntoEmptyDocument(() => {
         const {pipe} = renderToPipeableStream(
           <html>
             <body>
-              <svg>
-                <title>foo</title>
-                <path>
-                  <title>bar</title>
-                </path>
-              </svg>
+              <meta name="early" />
+              <Suspense fallback={null}>
+                <BlockedOn value="foo">
+                  <div>foo</div>
+                  <meta name="late" />
+                </BlockedOn>
+              </Suspense>
             </body>
           </html>,
         );
         pipe(writable);
       });
-      expect(getMeaningfulChildren(document)).toEqual(
-        <html>
-          <head />
-          <body>
-            <svg>
-              <title>foo</title>
-              <path>
-                <title>bar</title>
-              </path>
-            </svg>
-          </body>
-        </html>,
-      );
 
-      let root = ReactDOMClient.hydrateRoot(
-        document,
-        <html>
-          <head />
-          <body>
-            <svg>
-              <title>foo</title>
-              <path>
-                <title>bar</title>
-              </path>
-            </svg>
-          </body>
-        </html>,
-      );
-      expect(Scheduler).toFlushWithoutYielding();
       expect(getMeaningfulChildren(document)).toEqual(
         <html>
-          <head />
-          <body>
-            <svg>
-              <title>foo</title>
-              <path>
-                <title>bar</title>
-              </path>
-            </svg>
-          </body>
+          <head>
+            <meta name="early" />
+          </head>
+          <body />
         </html>,
       );
+      content = '';
+
+      await act(() => {
+        resolveText('foo');
+      });
+
+      expect(content.slice(0, 30)).toEqual('<meta name="late"/><div hidden');
 
-      root.unmount();
-      root = ReactDOMClient.createRoot(document);
-      root.render(
-        <html>
-          <head />
-          <body>
-            <svg>
-              <title>foo</title>
-              <path>
-                <title>bar</title>
-              </path>
-            </svg>
-          </body>
-        </html>,
-      );
-      expect(Scheduler).toFlushWithoutYielding();
       expect(getMeaningfulChildren(document)).toEqual(
         <html>
-          <head />
+          <head>
+            <meta name="early" />
+          </head>
           <body>
-            <svg>
-              <title>foo</title>
-              <path>
-                <title>bar</title>
-              </path>
-            </svg>
+            <div>foo</div>
+            <meta name="late" />
           </body>
         </html>,
       );
     });
 
     // @gate enableFloat
-    it('should not turn children of noscript into resources', async () => {
-      function SomeResources() {
-        return (
+    it('supports rendering hoistables outside of <html> scope', async () => {
+      await actIntoEmptyDocument(() => {
+        const {pipe} = renderToPipeableStream(
           <>
-            <link rel="stylesheet" href="foo" precedence="foo" />
-            <title>foo</title>
-            <link rel="foobar" href="foobar" />
-            <meta charSet="utf-8" />
-            <meta property="og:image" content="foo" />
-            <script async={true} src="script" />
-          </>
-        );
-      }
-      function Indirection({level, children}) {
-        if (level > 0) {
-          return <Indirection level={level - 1}>{children}</Indirection>;
-        } else {
-          return children;
-        }
-      }
-      function App() {
-        return (
-          <html>
-            <head>
-              <SomeResources />
-              <noscript>
-                <SomeResources />
-                <Indirection level={3}>
-                  <SomeResources />
-                </Indirection>
-              </noscript>
-              <SomeResources />
-            </head>
-          </html>
+            <meta name="before" />
+            <html>
+              <body>foo</body>
+            </html>
+            <meta name="after" />
+          </>,
         );
-      }
-      await actIntoEmptyDocument(() => {
-        const {pipe} = renderToPipeableStream(<App />);
         pipe(writable);
       });
 
       expect(getMeaningfulChildren(document)).toEqual(
         <html>
           <head>
-            {/* the actual resources */}
-            <meta charset="utf-8" />
-            <link rel="stylesheet" href="foo" data-precedence="foo" />
-            <script async="" src="script" />
-            <title>foo</title>
-            <link rel="foobar" href="foobar" />
-            <meta property="og:image" content="foo" />
-            {/* the noscript children are encoded as a textNode when scripting is enabled */}
-            <noscript>
-              &lt;link rel="stylesheet"
-              href="foo"/&gt;&lt;title&gt;foo&lt;/title&gt;&lt;link rel="foobar"
-              href="foobar"/&gt;&lt;meta charSet="utf-8"/&gt;&lt;meta
-              property="og:image" content="foo"/&gt;&lt;script async=""
-              src="script"&gt;&lt;/script&gt;&lt;link rel="stylesheet"
-              href="foo"/&gt;&lt;title&gt;foo&lt;/title&gt;&lt;link rel="foobar"
-              href="foobar"/&gt;&lt;meta charSet="utf-8"/&gt;&lt;meta
-              property="og:image" content="foo"/&gt;&lt;script async=""
-              src="script"&gt;&lt;/script&gt;
-            </noscript>
+            <meta name="before" />
+            <meta name="after" />
           </head>
-          <body />
+          <body>foo</body>
         </html>,
       );
 
-      const root = ReactDOMClient.hydrateRoot(document, <App />);
+      const root = ReactDOMClient.hydrateRoot(
+        document,
+        <>
+          <meta name="before" />
+          <html>
+            <body>foo</body>
+          </html>
+          <meta name="after" />
+        </>,
+      );
       expect(Scheduler).toFlushWithoutYielding();
       expect(getMeaningfulChildren(document)).toEqual(
         <html>
           <head>
-            {/* the actual resources */}
-            <meta charset="utf-8" />
-            <link rel="stylesheet" href="foo" data-precedence="foo" />
-            <script async="" src="script" />
-            <title>foo</title>
-            <link rel="foobar" href="foobar" />
-            <meta property="og:image" content="foo" />
-            {/* the noscript children are encoded as a textNode when scripting is enabled */}
-            <noscript>
-              &lt;link rel="stylesheet"
-              href="foo"/&gt;&lt;title&gt;foo&lt;/title&gt;&lt;link rel="foobar"
-              href="foobar"/&gt;&lt;meta charSet="utf-8"/&gt;&lt;meta
-              property="og:image" content="foo"/&gt;&lt;script async=""
-              src="script"&gt;&lt;/script&gt;&lt;link rel="stylesheet"
-              href="foo"/&gt;&lt;title&gt;foo&lt;/title&gt;&lt;link rel="foobar"
-              href="foobar"/&gt;&lt;meta charSet="utf-8"/&gt;&lt;meta
-              property="og:image" content="foo"/&gt;&lt;script async=""
-              src="script"&gt;&lt;/script&gt;
-            </noscript>
+            <meta name="before" />
+            <meta name="after" />
           </head>
-          <body />
+          <body>foo</body>
         </html>,
       );
 
-      root.render(null);
+      root.render(
+        <>
+          {null}
+          <html>
+            <body>foo</body>
+          </html>
+          {null}
+        </>,
+      );
       expect(Scheduler).toFlushWithoutYielding();
-      // stylesheets and scripts currently don't unmount ever
-      // noscript is never hydrated so it also does not get cleared
       expect(getMeaningfulChildren(document)).toEqual(
         <html>
-          <head>
-            <link rel="stylesheet" href="foo" data-precedence="foo" />
-            <script async="" src="script" />
-          </head>
-          <body />
+          <head />
+          <body>foo</body>
         </html>,
       );
     });
 
-    it('noscript runs on the server but does not emit resources and does not run on the client', async () => {
-      function App() {
-        return (
+    // @gate enableFloat
+    it('does not hoist inside an <svg> context', async () => {
+      await actIntoEmptyDocument(() => {
+        const {pipe} = renderToPipeableStream(
           <html>
             <body>
-              <div>
-                foo
-                <noscript>
-                  <Foo />
-                </noscript>
-              </div>
+              <svg>
+                <title>svg title</title>
+                <link rel="svg link" href="a" />
+                <meta name="svg meta" />
+                <path>
+                  <title>deep svg title</title>
+                  <meta name="deep svg meta" />
+                  <link rel="deep svg link" href="a" />
+                </path>
+                <foreignObject>
+                  <title>hoistable title</title>
+                  <meta name="hoistable" />
+                  <link rel="hoistable" href="a" />
+                </foreignObject>
+              </svg>
             </body>
-          </html>
+          </html>,
         );
-      }
-      function Foo() {
-        Scheduler.unstable_yieldValue('Foo');
+        pipe(writable);
+      });
 
-        return <title>noscript title</title>;
-      }
+      expect(getMeaningfulChildren(document.head)).toEqual([
+        <title>hoistable title</title>,
+        <meta name="hoistable" />,
+        <link rel="hoistable" href="a" />,
+      ]);
+    });
 
+    // @gate enableFloat
+    it('does not hoist inside noscript context', async () => {
       await actIntoEmptyDocument(() => {
-        const {pipe} = renderToPipeableStream(<App />);
+        const {pipe} = renderToPipeableStream(
+          <html>
+            <body>
+              <title>title</title>
+              <link rel="link" href="a" />
+              <meta name="meta" />
+              <noscript>
+                <title>noscript title</title>
+                <link rel="noscript link" href="a" />
+                <meta name="noscript meta" />
+              </noscript>
+            </body>
+          </html>,
+        );
         pipe(writable);
       });
-      expect(getMeaningfulChildren(container)).toEqual(
-        <html>
-          <head />
-          <body>
-            <div>
-              foo<noscript>&lt;title&gt;noscript title&lt;/title&gt;</noscript>
-            </div>
-          </body>
-        </html>,
-      );
-      expect(Scheduler).toHaveYielded(['Foo']);
 
-      ReactDOMClient.hydrateRoot(document, <App />);
-      expect(Scheduler).toFlushWithoutYielding();
+      expect(getMeaningfulChildren(document.head)).toEqual([
+        <title>title</title>,
+        <link rel="link" href="a" />,
+        <meta name="meta" />,
+      ]);
+    });
+
+    // @gate enableFloat && enableHostSingletons && (enableClientRenderFallbackOnTextMismatch || !__DEV__)
+    it('can render a title before a singleton even if that singleton clears its contents', async () => {
+      await actIntoEmptyDocument(() => {
+        const {pipe} = renderToPipeableStream(
+          <>
+            <title>foo</title>
+            <html>
+              <head />
+              <body>
+                <div>server</div>
+              </body>
+            </html>
+          </>,
+        );
+        pipe(writable);
+      });
+
+      const errors = [];
+      ReactDOMClient.hydrateRoot(
+        document,
+        <>
+          <title>foo</title>
+          <html>
+            <head />
+            <body>
+              <div>client</div>
+            </body>
+          </html>
+        </>,
+        {
+          onRecoverableError(err) {
+            errors.push(err.message);
+          },
+        },
+      );
+      try {
+        expect(() => {
+          expect(Scheduler).toFlushWithoutYielding();
+        }).toErrorDev(
+          [
+            'Warning: Text content did not match. Server: "server" Client: "client"',
+            'Warning: An error occurred during hydration. The server HTML was replaced with client content in <#document>.',
+          ],
+          {withoutStack: 1},
+        );
+      } catch (e) {
+        // When gates are false this test fails on a DOMException if you don't clear the scheduler after catching.
+        // When gates are true this branch should not be hit
+        expect(Scheduler).toFlushWithoutYielding();
+        throw e;
+      }
       expect(getMeaningfulChildren(document)).toEqual(
         <html>
-          <head />
+          <head>
+            <title>foo</title>
+          </head>
           <body>
-            <div>
-              foo<noscript>&lt;title&gt;noscript title&lt;/title&gt;</noscript>
-            </div>
+            <div>client</div>
           </body>
         </html>,
       );
diff --git a/packages/react-dom/src/__tests__/ReactDOMRoot-test.js b/packages/react-dom/src/__tests__/ReactDOMRoot-test.js
index 62273e1133e76..9d51ba40c3796 100644
--- a/packages/react-dom/src/__tests__/ReactDOMRoot-test.js
+++ b/packages/react-dom/src/__tests__/ReactDOMRoot-test.js
@@ -342,16 +342,21 @@ describe('ReactDOMRoot', () => {
   });
 
   it('warns if creating a root on the document.body', async () => {
-    expect(() => {
+    if (gate(flags => flags.enableFloat)) {
+      // we no longer expect an error for this if float is enabled
       ReactDOMClient.createRoot(document.body);
-    }).toErrorDev(
-      'createRoot(): Creating roots directly with document.body is ' +
-        'discouraged, since its children are often manipulated by third-party ' +
-        'scripts and browser extensions. This may lead to subtle ' +
-        'reconciliation issues. Try using a container element created ' +
-        'for your app.',
-      {withoutStack: true},
-    );
+    } else {
+      expect(() => {
+        ReactDOMClient.createRoot(document.body);
+      }).toErrorDev(
+        'createRoot(): Creating roots directly with document.body is ' +
+          'discouraged, since its children are often manipulated by third-party ' +
+          'scripts and browser extensions. This may lead to subtle ' +
+          'reconciliation issues. Try using a container element created ' +
+          'for your app.',
+        {withoutStack: true},
+      );
+    }
   });
 
   it('warns if updating a root that has had its contents removed', async () => {
diff --git a/packages/react-dom/src/__tests__/ReactDOMSingletonComponents-test.js b/packages/react-dom/src/__tests__/ReactDOMSingletonComponents-test.js
index d74d7f287dd56..26d50204a619f 100644
--- a/packages/react-dom/src/__tests__/ReactDOMSingletonComponents-test.js
+++ b/packages/react-dom/src/__tests__/ReactDOMSingletonComponents-test.js
@@ -333,6 +333,7 @@ describe('ReactDOM HostSingleton', () => {
           <link rel="stylesheet" href="3rdparty" />
           <link rel="stylesheet" href="3rdparty2" />
           <title>a client title</title>
+          <meta />
         </head>
         <body data-client-baz="baz">
           <style>
@@ -828,14 +829,7 @@ describe('ReactDOM HostSingleton', () => {
     });
     container = document.body;
 
-    let root;
-    // Given our new capabilities to render "safely" into the body we should consider removing this warning
-    expect(() => {
-      root = ReactDOMClient.createRoot(container);
-    }).toErrorDev(
-      'Warning: createRoot(): Creating roots directly with document.body is discouraged, since its children are often manipulated by third-party scripts and browser extensions. This may lead to subtle reconciliation issues. Try using a container element created for your app.',
-      {withoutStack: true},
-    );
+    const root = ReactDOMClient.createRoot(container);
     root.render(<div>something new</div>);
     expect(Scheduler).toFlushWithoutYielding();
     expect(getVisibleChildren(document)).toEqual(
diff --git a/packages/react-dom/src/__tests__/react-dom-server-rendering-stub-test.js b/packages/react-dom/src/__tests__/react-dom-server-rendering-stub-test.js
index a5772f968ff6c..1a9aa2de636f6 100644
--- a/packages/react-dom/src/__tests__/react-dom-server-rendering-stub-test.js
+++ b/packages/react-dom/src/__tests__/react-dom-server-rendering-stub-test.js
@@ -49,7 +49,7 @@ describe('react-dom-server-rendering-stub', () => {
     }
     const html = ReactDOMFizzServer.renderToString(<App />);
     expect(html).toEqual(
-      '<link rel="stylesheet" href="bar" data-precedence="default"/><link href="foo" rel="preload" as="style"/><div>foo</div>',
+      '<link rel="stylesheet" href="bar" data-precedence="default"/><link rel="preload" as="style" href="foo"/><div>foo</div>',
     );
   });
 
diff --git a/packages/react-dom/src/client/ReactDOMRoot.js b/packages/react-dom/src/client/ReactDOMRoot.js
index 08b849f21fcce..2737a14cce418 100644
--- a/packages/react-dom/src/client/ReactDOMRoot.js
+++ b/packages/react-dom/src/client/ReactDOMRoot.js
@@ -385,6 +385,7 @@ export function isValidContainerLegacy(node: any): boolean {
 function warnIfReactDOMContainerInDEV(container: any) {
   if (__DEV__) {
     if (
+      !enableHostSingletons &&
       container.nodeType === ELEMENT_NODE &&
       ((container: any): Element).tagName &&
       ((container: any): Element).tagName.toUpperCase() === 'BODY'
diff --git a/packages/react-dom/src/test-utils/ReactTestUtils.js b/packages/react-dom/src/test-utils/ReactTestUtils.js
index 296ae292f8e51..c3cc82d831496 100644
--- a/packages/react-dom/src/test-utils/ReactTestUtils.js
+++ b/packages/react-dom/src/test-utils/ReactTestUtils.js
@@ -15,7 +15,7 @@ import {
   ClassComponent,
   FunctionComponent,
   HostComponent,
-  HostResource,
+  HostHoistable,
   HostSingleton,
   HostText,
 } from 'react-reconciler/src/ReactWorkTags';
@@ -65,7 +65,7 @@ function findAllInRenderedFiberTreeInternal(fiber, test) {
       node.tag === HostText ||
       node.tag === ClassComponent ||
       node.tag === FunctionComponent ||
-      (enableFloat ? node.tag === HostResource : false) ||
+      (enableFloat ? node.tag === HostHoistable : false) ||
       (enableHostSingletons ? node.tag === HostSingleton : false)
     ) {
       const publicInst = node.stateNode;
diff --git a/packages/react-native-renderer/src/server/ReactNativeServerFormatConfig.js b/packages/react-native-renderer/src/server/ReactNativeServerFormatConfig.js
index 99b09631002fa..ac27d1aee754c 100644
--- a/packages/react-native-renderer/src/server/ReactNativeServerFormatConfig.js
+++ b/packages/react-native-renderer/src/server/ReactNativeServerFormatConfig.js
@@ -140,9 +140,9 @@ export function pushTextInstance(
 
 export function pushStartInstance(
   target: Array<Chunk | PrecomputedChunk>,
-  preamble: Array<Chunk | PrecomputedChunk>,
   type: string,
   props: Object,
+  resources: Resources,
   responseState: ResponseState,
   formatContext: FormatContext,
   textEmbedded: boolean,
@@ -158,9 +158,10 @@ export function pushStartInstance(
 
 export function pushEndInstance(
   target: Array<Chunk | PrecomputedChunk>,
-  postamble: Array<Chunk | PrecomputedChunk>,
   type: string,
   props: Object,
+  responseState: ResponseState,
+  formatContext: FormatContext,
 ): void {
   target.push(END);
 }
@@ -315,22 +316,23 @@ export function writeClientRenderBoundaryInstruction(
   return writeChunkAndReturn(destination, formatID(boundaryID));
 }
 
-export function writeInitialResources(
+export function writePreamble(
   destination: Destination,
   resources: Resources,
   responseState: ResponseState,
   willFlushAllSegments: boolean,
-): boolean {
-  return true;
-}
+) {}
 
-export function writeImmediateResources(
+export function writeHoistables(
   destination: Destination,
   resources: Resources,
   responseState: ResponseState,
-): boolean {
-  return true;
-}
+) {}
+
+export function writePostamble(
+  destination: Destination,
+  responseState: ResponseState,
+) {}
 
 export function hoistResources(
   resources: Resources,
@@ -350,3 +352,10 @@ export function setCurrentlyRenderingBoundaryResourcesTarget(
   resources: Resources,
   boundaryResources: ?BoundaryResources,
 ) {}
+
+export function writeResourcesForBoundary(
+  destination: Destination,
+  boundaryResources: BoundaryResources,
+): boolean {
+  return true;
+}
diff --git a/packages/react-noop-renderer/src/ReactNoopServer.js b/packages/react-noop-renderer/src/ReactNoopServer.js
index 55d63ccf9f266..cd5edd94d29d6 100644
--- a/packages/react-noop-renderer/src/ReactNoopServer.js
+++ b/packages/react-noop-renderer/src/ReactNoopServer.js
@@ -116,7 +116,6 @@ const ReactNoopServer = ReactFizzServer({
   },
   pushStartInstance(
     target: Array<Uint8Array>,
-    preamble: Array<Uint8Array>,
     type: string,
     props: Object,
   ): ReactNodeList {
@@ -132,7 +131,6 @@ const ReactNoopServer = ReactFizzServer({
 
   pushEndInstance(
     target: Array<Uint8Array>,
-    postamble: Array<Uint8Array>,
     type: string,
     props: Object,
   ): void {
@@ -267,8 +265,9 @@ const ReactNoopServer = ReactFizzServer({
     boundary.status = 'client-render';
   },
 
-  writeInitialResources() {},
-  writeImmediateResources() {},
+  writePreamble() {},
+  writeHoistables() {},
+  writePostamble() {},
 
   createResources(): Resources {
     return null;
diff --git a/packages/react-reconciler/src/ReactFiber.js b/packages/react-reconciler/src/ReactFiber.js
index 188436ad1a3fb..b5c89a56df292 100644
--- a/packages/react-reconciler/src/ReactFiber.js
+++ b/packages/react-reconciler/src/ReactFiber.js
@@ -24,7 +24,7 @@ import type {TracingMarkerInstance} from './ReactFiberTracingMarkerComponent';
 import {
   supportsResources,
   supportsSingletons,
-  isHostResourceType,
+  isHostHoistableType,
   isHostSingletonType,
 } from './ReactFiberHostConfig';
 import {
@@ -49,7 +49,7 @@ import {
   HostComponent,
   HostText,
   HostPortal,
-  HostResource,
+  HostHoistable,
   HostSingleton,
   ForwardRef,
   Fragment,
@@ -511,15 +511,15 @@ export function createFiberFromTypeAndProps(
       supportsSingletons
     ) {
       const hostContext = getHostContext();
-      fiberTag = isHostResourceType(type, pendingProps, hostContext)
-        ? HostResource
+      fiberTag = isHostHoistableType(type, pendingProps, hostContext)
+        ? HostHoistable
         : isHostSingletonType(type)
         ? HostSingleton
         : HostComponent;
     } else if (enableFloat && supportsResources) {
       const hostContext = getHostContext();
-      fiberTag = isHostResourceType(type, pendingProps, hostContext)
-        ? HostResource
+      fiberTag = isHostHoistableType(type, pendingProps, hostContext)
+        ? HostHoistable
         : HostComponent;
     } else if (enableHostSingletons && supportsSingletons) {
       fiberTag = isHostSingletonType(type) ? HostSingleton : HostComponent;
diff --git a/packages/react-reconciler/src/ReactFiberBeginWork.js b/packages/react-reconciler/src/ReactFiberBeginWork.js
index fc71f3be6d764..e3b08fb1dcb01 100644
--- a/packages/react-reconciler/src/ReactFiberBeginWork.js
+++ b/packages/react-reconciler/src/ReactFiberBeginWork.js
@@ -51,7 +51,7 @@ import {
   ClassComponent,
   HostRoot,
   HostComponent,
-  HostResource,
+  HostHoistable,
   HostSingleton,
   HostText,
   HostPortal,
@@ -167,10 +167,15 @@ import {
   supportsSingletons,
   isPrimaryRenderer,
   getResource,
+  createHoistableInstance,
 } from './ReactFiberHostConfig';
 import type {SuspenseInstance} from './ReactFiberHostConfig';
 import {shouldError, shouldSuspend} from './ReactFiberReconciler';
-import {pushHostContext, pushHostContainer} from './ReactFiberHostContext';
+import {
+  pushHostContext,
+  pushHostContainer,
+  getRootHostContainer,
+} from './ReactFiberHostContext';
 import {
   suspenseStackCursor,
   pushSuspenseListContext,
@@ -1624,19 +1629,30 @@ function updateHostComponent(
   return workInProgress.child;
 }
 
-function updateHostResource(
+function updateHostHoistable(
   current: null | Fiber,
   workInProgress: Fiber,
   renderLanes: Lanes,
 ) {
-  pushHostContext(workInProgress);
   markRef(current, workInProgress);
   const currentProps = current === null ? null : current.memoizedProps;
-  workInProgress.memoizedState = getResource(
+  const resource = (workInProgress.memoizedState = getResource(
     workInProgress.type,
-    workInProgress.pendingProps,
     currentProps,
-  );
+    workInProgress.pendingProps,
+  ));
+  if (current === null) {
+    if (!getIsHydrating() && resource === null) {
+      // This is not a Resource Hoistable and we aren't hydrating so we construct the instance.
+      workInProgress.stateNode = createHoistableInstance(
+        workInProgress.type,
+        workInProgress.pendingProps,
+        getRootHostContainer(),
+        workInProgress,
+      );
+    }
+  }
+
   // Resources never have reconciler managed children. It is possible for
   // the host implementation of getResource to consider children in the
   // resource construction but they will otherwise be discarded. In practice
@@ -3742,7 +3758,6 @@ function attemptEarlyBailoutIfNoScheduledUpdate(
       }
       resetHydrationState();
       break;
-    case HostResource:
     case HostSingleton:
     case HostComponent:
       pushHostContext(workInProgress);
@@ -4078,9 +4093,9 @@ function beginWork(
     }
     case HostRoot:
       return updateHostRoot(current, workInProgress, renderLanes);
-    case HostResource:
+    case HostHoistable:
       if (enableFloat && supportsResources) {
-        return updateHostResource(current, workInProgress, renderLanes);
+        return updateHostHoistable(current, workInProgress, renderLanes);
       }
     // eslint-disable-next-line no-fallthrough
     case HostSingleton:
diff --git a/packages/react-reconciler/src/ReactFiberCommitWork.js b/packages/react-reconciler/src/ReactFiberCommitWork.js
index 81904c8b86d8e..26ef683e280cc 100644
--- a/packages/react-reconciler/src/ReactFiberCommitWork.js
+++ b/packages/react-reconciler/src/ReactFiberCommitWork.js
@@ -14,6 +14,7 @@ import type {
   Container,
   ChildSet,
   UpdatePayload,
+  HoistableRoot,
 } from './ReactFiberHostConfig';
 import type {Fiber, FiberRoot} from './ReactInternalTypes';
 import type {Lanes} from './ReactFiberLane';
@@ -60,7 +61,7 @@ import {
   ClassComponent,
   HostRoot,
   HostComponent,
-  HostResource,
+  HostHoistable,
   HostSingleton,
   HostText,
   HostPortal,
@@ -147,11 +148,15 @@ import {
   prepareForCommit,
   beforeActiveInstanceBlur,
   detachDeletedInstance,
-  acquireResource,
-  releaseResource,
   clearSingleton,
   acquireSingletonInstance,
   releaseSingletonInstance,
+  getHoistableRoot,
+  acquireResource,
+  releaseResource,
+  hydrateHoistable,
+  mountHoistable,
+  unmountHoistable,
 } from './ReactFiberHostConfig';
 import {
   captureCommitPhaseError,
@@ -536,7 +541,7 @@ function commitBeforeMutationEffectsOnFiber(finishedWork: Fiber) {
       break;
     }
     case HostComponent:
-    case HostResource:
+    case HostHoistable:
     case HostSingleton:
     case HostText:
     case HostPortal:
@@ -1109,7 +1114,7 @@ function commitLayoutEffectOnFiber(
       }
       break;
     }
-    case HostResource: {
+    case HostHoistable: {
       if (enableFloat && supportsResources) {
         recursivelyTraverseLayoutEffects(
           finishedRoot,
@@ -1515,7 +1520,7 @@ function hideOrUnhideAllChildren(finishedWork: Fiber, isHidden: boolean) {
       if (
         node.tag === HostComponent ||
         (enableFloat && supportsResources
-          ? node.tag === HostResource
+          ? node.tag === HostHoistable
           : false) ||
         (enableHostSingletons && supportsSingletons
           ? node.tag === HostSingleton
@@ -1592,7 +1597,7 @@ function commitAttachRef(finishedWork: Fiber) {
     const instance = finishedWork.stateNode;
     let instanceToUse;
     switch (finishedWork.tag) {
-      case HostResource:
+      case HostHoistable:
       case HostSingleton:
       case HostComponent:
         instanceToUse = getPublicInstance(instance);
@@ -1736,7 +1741,7 @@ function isHostParent(fiber: Fiber): boolean {
   return (
     fiber.tag === HostComponent ||
     fiber.tag === HostRoot ||
-    (enableFloat && supportsResources ? fiber.tag === HostResource : false) ||
+    (enableFloat && supportsResources ? fiber.tag === HostHoistable : false) ||
     (enableHostSingletons && supportsSingletons
       ? fiber.tag === HostSingleton
       : false) ||
@@ -2018,7 +2023,7 @@ function commitDeletionEffectsOnFiber(
   // into their subtree. There are simpler cases in the inner switch
   // that don't modify the stack.
   switch (deletedFiber.tag) {
-    case HostResource: {
+    case HostHoistable: {
       if (enableFloat && supportsResources) {
         if (!offscreenSubtreeWasHidden) {
           safelyDetachRef(deletedFiber, nearestMountedAncestor);
@@ -2030,6 +2035,8 @@ function commitDeletionEffectsOnFiber(
         );
         if (deletedFiber.memoizedState) {
           releaseResource(deletedFiber.memoizedState);
+        } else if (deletedFiber.stateNode) {
+          unmountHoistable(deletedFiber.stateNode);
         }
         return;
       }
@@ -2520,6 +2527,8 @@ function recursivelyTraverseMutationEffects(
   setCurrentDebugFiberInDEV(prevDebugFiber);
 }
 
+let currentHoistableRoot: HoistableRoot | null = null;
+
 function commitMutationEffectsOnFiber(
   finishedWork: Fiber,
   root: FiberRoot,
@@ -2603,8 +2612,11 @@ function commitMutationEffectsOnFiber(
       }
       return;
     }
-    case HostResource: {
+    case HostHoistable: {
       if (enableFloat && supportsResources) {
+        // We cast because we always set the root at the React root and so it cannot be
+        // null while we are processing mutation effects
+        const hoistableRoot: HoistableRoot = (currentHoistableRoot: any);
         recursivelyTraverseMutationEffects(root, finishedWork, lanes);
         commitReconciliationEffects(finishedWork);
 
@@ -2615,16 +2627,81 @@ function commitMutationEffectsOnFiber(
         }
 
         if (flags & Update) {
+          const currentResource =
+            current !== null ? current.memoizedState : null;
           const newResource = finishedWork.memoizedState;
-          if (current !== null) {
-            const currentResource = current.memoizedState;
-            if (currentResource !== newResource) {
+          if (current === null) {
+            // We are mounting a new HostHoistable Fiber. We fork the mount
+            // behavior based on whether this instance is a Hoistable Instance
+            // or a Hoistable Resource
+            if (newResource === null) {
+              if (finishedWork.stateNode === null) {
+                finishedWork.stateNode = hydrateHoistable(
+                  hoistableRoot,
+                  finishedWork.type,
+                  finishedWork.memoizedProps,
+                  finishedWork,
+                );
+              } else {
+                mountHoistable(
+                  hoistableRoot,
+                  finishedWork.type,
+                  finishedWork.stateNode,
+                );
+              }
+            } else {
+              finishedWork.stateNode = acquireResource(
+                hoistableRoot,
+                newResource,
+                finishedWork.memoizedProps,
+              );
+            }
+          } else if (currentResource !== newResource) {
+            // We are moving to or from Hoistable Resource, or between different Hoistable Resources
+            if (currentResource === null) {
+              if (current.stateNode !== null) {
+                unmountHoistable(current.stateNode);
+              }
+            } else {
               releaseResource(currentResource);
             }
+            if (newResource === null) {
+              mountHoistable(
+                hoistableRoot,
+                finishedWork.type,
+                finishedWork.stateNode,
+              );
+            } else {
+              acquireResource(
+                hoistableRoot,
+                newResource,
+                finishedWork.memoizedProps,
+              );
+            }
+          } else if (newResource === null && finishedWork.stateNode !== null) {
+            // We may have an update on a Hoistable element
+            const updatePayload: null | UpdatePayload =
+              (finishedWork.updateQueue: any);
+            finishedWork.updateQueue = null;
+            if (updatePayload !== null) {
+              try {
+                commitUpdate(
+                  finishedWork.stateNode,
+                  updatePayload,
+                  finishedWork.type,
+                  current.memoizedProps,
+                  finishedWork.memoizedProps,
+                  finishedWork,
+                );
+              } catch (error) {
+                captureCommitPhaseError(
+                  finishedWork,
+                  finishedWork.return,
+                  error,
+                );
+              }
+            }
           }
-          finishedWork.stateNode = newResource
-            ? acquireResource(newResource)
-            : null;
         }
         return;
       }
@@ -2744,8 +2821,18 @@ function commitMutationEffectsOnFiber(
       return;
     }
     case HostRoot: {
-      recursivelyTraverseMutationEffects(root, finishedWork, lanes);
-      commitReconciliationEffects(finishedWork);
+      if (enableFloat && supportsResources) {
+        const previousHoistableRoot = currentHoistableRoot;
+        currentHoistableRoot = getHoistableRoot(root.containerInfo);
+
+        recursivelyTraverseMutationEffects(root, finishedWork, lanes);
+        currentHoistableRoot = previousHoistableRoot;
+
+        commitReconciliationEffects(finishedWork);
+      } else {
+        recursivelyTraverseMutationEffects(root, finishedWork, lanes);
+        commitReconciliationEffects(finishedWork);
+      }
 
       if (flags & Update) {
         if (supportsMutation && supportsHydration) {
@@ -2777,8 +2864,18 @@ function commitMutationEffectsOnFiber(
       return;
     }
     case HostPortal: {
-      recursivelyTraverseMutationEffects(root, finishedWork, lanes);
-      commitReconciliationEffects(finishedWork);
+      if (enableFloat && supportsResources) {
+        const previousHoistableRoot = currentHoistableRoot;
+        currentHoistableRoot = getHoistableRoot(
+          finishedWork.stateNode.containerInfo,
+        );
+        recursivelyTraverseMutationEffects(root, finishedWork, lanes);
+        commitReconciliationEffects(finishedWork);
+        currentHoistableRoot = previousHoistableRoot;
+      } else {
+        recursivelyTraverseMutationEffects(root, finishedWork, lanes);
+        commitReconciliationEffects(finishedWork);
+      }
 
       if (flags & Update) {
         if (supportsPersistence) {
@@ -3059,7 +3156,7 @@ export function disappearLayoutEffects(finishedWork: Fiber) {
       recursivelyTraverseDisappearLayoutEffects(finishedWork);
       break;
     }
-    case HostResource:
+    case HostHoistable:
     case HostSingleton:
     case HostComponent: {
       // TODO (Offscreen) Check: flags & RefStatic
@@ -3161,7 +3258,7 @@ export function reappearLayoutEffects(
     // case HostRoot: {
     //  ...
     // }
-    case HostResource:
+    case HostHoistable:
     case HostSingleton:
     case HostComponent: {
       recursivelyTraverseReappearLayoutEffects(
diff --git a/packages/react-reconciler/src/ReactFiberCompleteWork.js b/packages/react-reconciler/src/ReactFiberCompleteWork.js
index 41039b5b65730..a7a97343e3049 100644
--- a/packages/react-reconciler/src/ReactFiberCompleteWork.js
+++ b/packages/react-reconciler/src/ReactFiberCompleteWork.js
@@ -51,7 +51,7 @@ import {
   ClassComponent,
   HostRoot,
   HostComponent,
-  HostResource,
+  HostHoistable,
   HostSingleton,
   HostText,
   HostPortal,
@@ -989,20 +989,31 @@ function completeWork(
       }
       return null;
     }
-    case HostResource: {
+    case HostHoistable: {
       if (enableFloat && supportsResources) {
-        popHostContext(workInProgress);
         const currentRef = current ? current.ref : null;
         if (currentRef !== workInProgress.ref) {
           markRef(workInProgress);
         }
+
         if (
+          // We are mounting and must Update this Hoistable in this commit
           current === null ||
+          // We are transitioning to, from, or between Hoistable Resources
+          // and require an update
           current.memoizedState !== workInProgress.memoizedState
         ) {
-          // The workInProgress resource is different than the current one or the current
-          // one does not exist
           markUpdate(workInProgress);
+        } else if (workInProgress.memoizedState === null) {
+          // We may have props to update on the Hoistable instance. We use the
+          // updateHostComponent path becuase it produces the update queue
+          // we need for Hoistables
+          updateHostComponent(
+            current,
+            workInProgress,
+            workInProgress.type,
+            workInProgress.pendingProps,
+          );
         }
         bubbleProperties(workInProgress);
         return null;
diff --git a/packages/react-reconciler/src/ReactFiberComponentStack.js b/packages/react-reconciler/src/ReactFiberComponentStack.js
index e0546164a97a0..b532840b8a364 100644
--- a/packages/react-reconciler/src/ReactFiberComponentStack.js
+++ b/packages/react-reconciler/src/ReactFiberComponentStack.js
@@ -11,7 +11,7 @@ import type {Fiber} from './ReactInternalTypes';
 
 import {
   HostComponent,
-  HostResource,
+  HostHoistable,
   HostSingleton,
   LazyComponent,
   SuspenseComponent,
@@ -36,7 +36,7 @@ function describeFiber(fiber: Fiber): string {
     : null;
   const source = __DEV__ ? fiber._debugSource : null;
   switch (fiber.tag) {
-    case HostResource:
+    case HostHoistable:
     case HostSingleton:
     case HostComponent:
       return describeBuiltInComponentFrame(fiber.type, source, owner);
diff --git a/packages/react-reconciler/src/ReactFiberHostConfigWithNoResources.js b/packages/react-reconciler/src/ReactFiberHostConfigWithNoResources.js
index f02ea13e6aad3..0cc7dc10f10ed 100644
--- a/packages/react-reconciler/src/ReactFiberHostConfigWithNoResources.js
+++ b/packages/react-reconciler/src/ReactFiberHostConfigWithNoResources.js
@@ -18,9 +18,16 @@ function shim(...args: any): empty {
   );
 }
 
+export type HoistableRoot = mixed;
+
 // Resources (when unsupported)
 export const supportsResources = false;
-export const isHostResourceType = shim;
+export const isHostHoistableType = shim;
+export const getHoistableRoot = shim;
 export const getResource = shim;
 export const acquireResource = shim;
 export const releaseResource = shim;
+export const hydrateHoistable = shim;
+export const mountHoistable = shim;
+export const unmountHoistable = shim;
+export const createHoistableInstance = shim;
diff --git a/packages/react-reconciler/src/ReactFiberHotReloading.js b/packages/react-reconciler/src/ReactFiberHotReloading.js
index 10d6bf6fa547a..e4b1561896c31 100644
--- a/packages/react-reconciler/src/ReactFiberHotReloading.js
+++ b/packages/react-reconciler/src/ReactFiberHotReloading.js
@@ -29,7 +29,7 @@ import {
   FunctionComponent,
   ForwardRef,
   HostComponent,
-  HostResource,
+  HostHoistable,
   HostSingleton,
   HostPortal,
   HostRoot,
@@ -468,7 +468,7 @@ function findChildHostInstancesForFiberShallowly(
     while (true) {
       if (
         node.tag === HostComponent ||
-        (enableFloat ? node.tag === HostResource : false) ||
+        (enableFloat ? node.tag === HostHoistable : false) ||
         (enableHostSingletons && supportsSingletons
           ? node.tag === HostSingleton
           : false)
diff --git a/packages/react-reconciler/src/ReactFiberTreeReflection.js b/packages/react-reconciler/src/ReactFiberTreeReflection.js
index d03bccc6a3047..6be4e0b2c0807 100644
--- a/packages/react-reconciler/src/ReactFiberTreeReflection.js
+++ b/packages/react-reconciler/src/ReactFiberTreeReflection.js
@@ -17,7 +17,7 @@ import getComponentNameFromFiber from 'react-reconciler/src/getComponentNameFrom
 import {
   ClassComponent,
   HostComponent,
-  HostResource,
+  HostHoistable,
   HostSingleton,
   HostRoot,
   HostPortal,
@@ -280,7 +280,7 @@ function findCurrentHostFiberImpl(node: Fiber): Fiber | null {
   const tag = node.tag;
   if (
     tag === HostComponent ||
-    (enableFloat ? tag === HostResource : false) ||
+    (enableFloat ? tag === HostHoistable : false) ||
     (enableHostSingletons ? tag === HostSingleton : false) ||
     tag === HostText
   ) {
@@ -311,7 +311,7 @@ function findCurrentHostFiberWithNoPortalsImpl(node: Fiber): Fiber | null {
   const tag = node.tag;
   if (
     tag === HostComponent ||
-    (enableFloat ? tag === HostResource : false) ||
+    (enableFloat ? tag === HostHoistable : false) ||
     (enableHostSingletons ? tag === HostSingleton : false) ||
     tag === HostText
   ) {
diff --git a/packages/react-reconciler/src/ReactFiberUnwindWork.js b/packages/react-reconciler/src/ReactFiberUnwindWork.js
index d6e7e500b5293..592596e5ec764 100644
--- a/packages/react-reconciler/src/ReactFiberUnwindWork.js
+++ b/packages/react-reconciler/src/ReactFiberUnwindWork.js
@@ -19,7 +19,7 @@ import {
   ClassComponent,
   HostRoot,
   HostComponent,
-  HostResource,
+  HostHoistable,
   HostSingleton,
   HostPortal,
   ContextProvider,
@@ -117,7 +117,7 @@ function unwindWork(
       // We unwound to the root without completing it. Exit.
       return null;
     }
-    case HostResource:
+    case HostHoistable:
     case HostSingleton:
     case HostComponent: {
       // TODO: popHydrationState
@@ -237,7 +237,7 @@ function unwindInterruptedWork(
       resetMutableSourceWorkInProgressVersions();
       break;
     }
-    case HostResource:
+    case HostHoistable:
     case HostSingleton:
     case HostComponent: {
       popHostContext(interruptedWork);
diff --git a/packages/react-reconciler/src/ReactTestSelectors.js b/packages/react-reconciler/src/ReactTestSelectors.js
index 25eb272f3b537..0e83c65eb1dbc 100644
--- a/packages/react-reconciler/src/ReactTestSelectors.js
+++ b/packages/react-reconciler/src/ReactTestSelectors.js
@@ -12,7 +12,7 @@ import type {Instance} from './ReactFiberHostConfig';
 
 import {
   HostComponent,
-  HostResource,
+  HostHoistable,
   HostSingleton,
   HostText,
 } from 'react-reconciler/src/ReactWorkTags';
@@ -158,7 +158,7 @@ function matchSelector(fiber: Fiber, selector: Selector): boolean {
     case ROLE_TYPE:
       if (
         tag === HostComponent ||
-        tag === HostResource ||
+        tag === HostHoistable ||
         tag === HostSingleton
       ) {
         const node = fiber.stateNode;
@@ -173,7 +173,7 @@ function matchSelector(fiber: Fiber, selector: Selector): boolean {
       if (
         tag === HostComponent ||
         tag === HostText ||
-        tag === HostResource ||
+        tag === HostHoistable ||
         tag === HostSingleton
       ) {
         const textContent = getTextContent(fiber);
@@ -188,7 +188,7 @@ function matchSelector(fiber: Fiber, selector: Selector): boolean {
     case TEST_NAME_TYPE:
       if (
         tag === HostComponent ||
-        tag === HostResource ||
+        tag === HostHoistable ||
         tag === HostSingleton
       ) {
         const dataTestID = fiber.memoizedProps['data-testname'];
@@ -239,7 +239,7 @@ function findPaths(root: Fiber, selectors: Array<Selector>): Array<Fiber> {
 
     if (
       (tag === HostComponent ||
-        tag === HostResource ||
+        tag === HostHoistable ||
         tag === HostSingleton) &&
       isHiddenSubtree(fiber)
     ) {
@@ -277,7 +277,7 @@ function hasMatchingPaths(root: Fiber, selectors: Array<Selector>): boolean {
 
     if (
       (tag === HostComponent ||
-        tag === HostResource ||
+        tag === HostHoistable ||
         tag === HostSingleton) &&
       isHiddenSubtree(fiber)
     ) {
@@ -323,7 +323,7 @@ export function findAllNodes(
     const tag = node.tag;
     if (
       tag === HostComponent ||
-      tag === HostResource ||
+      tag === HostHoistable ||
       tag === HostSingleton
     ) {
       if (isHiddenSubtree(node)) {
@@ -366,7 +366,7 @@ export function getFindAllNodesFailureDescription(
 
     if (
       (tag === HostComponent ||
-        tag === HostResource ||
+        tag === HostHoistable ||
         tag === HostSingleton) &&
       isHiddenSubtree(fiber)
     ) {
@@ -524,7 +524,7 @@ export function focusWithin(
     }
     if (
       tag === HostComponent ||
-      tag === HostResource ||
+      tag === HostHoistable ||
       tag === HostSingleton
     ) {
       const node = fiber.stateNode;
diff --git a/packages/react-reconciler/src/ReactWorkTags.js b/packages/react-reconciler/src/ReactWorkTags.js
index 9a88cc72b2036..8e928d671dc87 100644
--- a/packages/react-reconciler/src/ReactWorkTags.js
+++ b/packages/react-reconciler/src/ReactWorkTags.js
@@ -62,5 +62,5 @@ export const OffscreenComponent = 22;
 export const LegacyHiddenComponent = 23;
 export const CacheComponent = 24;
 export const TracingMarkerComponent = 25;
-export const HostResource = 26;
+export const HostHoistable = 26;
 export const HostSingleton = 27;
diff --git a/packages/react-reconciler/src/forks/ReactFiberHostConfig.custom.js b/packages/react-reconciler/src/forks/ReactFiberHostConfig.custom.js
index fdc9d4ac287c2..e42a8bb2841f8 100644
--- a/packages/react-reconciler/src/forks/ReactFiberHostConfig.custom.js
+++ b/packages/react-reconciler/src/forks/ReactFiberHostConfig.custom.js
@@ -196,10 +196,16 @@ export const errorHydratingContainer = $$$hostConfig.errorHydratingContainer;
 //     (optional)
 // -------------------
 export const supportsResources = $$$hostConfig.supportsResources;
-export const isHostResourceType = $$$hostConfig.isHostResourceType;
+export const isHostHoistableType = $$$hostConfig.isHostHoistableType;
+export const getHoistableRoot = $$$hostConfig.getHoistableRoot;
 export const getResource = $$$hostConfig.getResource;
 export const acquireResource = $$$hostConfig.acquireResource;
 export const releaseResource = $$$hostConfig.releaseResource;
+export const hydrateHoistable = $$$hostConfig.hydrateHoistable;
+export const mountHoistable = $$$hostConfig.mountHoistable;
+export const unmountHoistable = $$$hostConfig.unmountHoistable;
+export const createHoistableInstance = $$$hostConfig.createHoistableInstance;
+export type HoistableRoot = mixed;
 
 // -------------------
 //     Singletons
diff --git a/packages/react-reconciler/src/getComponentNameFromFiber.js b/packages/react-reconciler/src/getComponentNameFromFiber.js
index 5611664d10e5d..f8b2388da9073 100644
--- a/packages/react-reconciler/src/getComponentNameFromFiber.js
+++ b/packages/react-reconciler/src/getComponentNameFromFiber.js
@@ -19,7 +19,7 @@ import {
   HostRoot,
   HostPortal,
   HostComponent,
-  HostResource,
+  HostHoistable,
   HostSingleton,
   HostText,
   Fragment,
@@ -79,7 +79,7 @@ export default function getComponentNameFromFiber(fiber: Fiber): string | null {
       return getWrappedName(type, type.render, 'ForwardRef');
     case Fragment:
       return 'Fragment';
-    case HostResource:
+    case HostHoistable:
     case HostSingleton:
     case HostComponent:
       // Host component type is the display name (e.g. "div", "View")
diff --git a/packages/react-server/src/ReactFizzServer.js b/packages/react-server/src/ReactFizzServer.js
index 775bf3cacecac..6ab832295a3c2 100644
--- a/packages/react-server/src/ReactFizzServer.js
+++ b/packages/react-server/src/ReactFizzServer.js
@@ -65,8 +65,10 @@ import {
   UNINITIALIZED_SUSPENSE_BOUNDARY_ID,
   assignSuspenseBoundaryID,
   getChildFormatContext,
-  writeInitialResources,
-  writeImmediateResources,
+  writeResourcesForBoundary,
+  writePreamble,
+  writeHoistables,
+  writePostamble,
   hoistResources,
   hoistResourcesToRoot,
   prepareToRender,
@@ -221,8 +223,6 @@ export opaque type Request = {
   clientRenderedBoundaries: Array<SuspenseBoundary>, // Errored or client rendered but not yet flushed.
   completedBoundaries: Array<SuspenseBoundary>, // Completed but not yet fully flushed boundaries to show.
   partialBoundaries: Array<SuspenseBoundary>, // Partially completed boundaries that can flush its segments early.
-  +preamble: Array<Chunk | PrecomputedChunk>, // Chunks that need to be emitted before any segment chunks.
-  +postamble: Array<Chunk | PrecomputedChunk>, // Chunks that need to be emitted after segments, waiting for all pending root tasks to finish
   // onError is called when an error happens anywhere in the tree. It might recover.
   // The return string is used in production  primarily to avoid leaking internals, secondarily to save bytes.
   // Returning null/undefined will cause a defualt error message in production
@@ -294,11 +294,9 @@ export function createRequest(
     completedRootSegment: null,
     abortableTasks: abortSet,
     pingedTasks: pingedTasks,
-    clientRenderedBoundaries: [],
-    completedBoundaries: [],
-    partialBoundaries: [],
-    preamble: [],
-    postamble: [],
+    clientRenderedBoundaries: ([]: Array<SuspenseBoundary>),
+    completedBoundaries: ([]: Array<SuspenseBoundary>),
+    partialBoundaries: ([]: Array<SuspenseBoundary>),
     onError: onError === undefined ? defaultErrorHandler : onError,
     onAllReady: onAllReady === undefined ? noop : onAllReady,
     onShellReady: onShellReady === undefined ? noop : onShellReady,
@@ -695,9 +693,9 @@ function renderHostElement(
 
   const children = pushStartInstance(
     segment.chunks,
-    request.preamble,
     type,
     props,
+    request.resources,
     request.responseState,
     segment.formatContext,
     segment.lastPushedText,
@@ -713,7 +711,13 @@ function renderHostElement(
   // We expect that errors will fatal the whole task and that we don't need
   // the correct context. Therefore this is not in a finally.
   segment.formatContext = prevContext;
-  pushEndInstance(segment.chunks, request.postamble, type, props);
+  pushEndInstance(
+    segment.chunks,
+    type,
+    props,
+    request.responseState,
+    prevContext,
+  );
   segment.lastPushedText = false;
   popComponentStackInDEV(task);
 }
@@ -2123,31 +2127,6 @@ function flushSegment(
   }
 }
 
-function flushInitialResources(
-  destination: Destination,
-  resources: Resources,
-  responseState: ResponseState,
-  willFlushAllSegments: boolean,
-): void {
-  writeInitialResources(
-    destination,
-    resources,
-    responseState,
-    willFlushAllSegments,
-  );
-}
-
-function flushImmediateResources(
-  destination: Destination,
-  request: Request,
-): void {
-  writeImmediateResources(
-    destination,
-    request.resources,
-    request.responseState,
-  );
-}
-
 function flushClientRenderedBoundary(
   request: Request,
   destination: Destination,
@@ -2197,6 +2176,10 @@ function flushCompletedBoundary(
   }
   completedSegments.length = 0;
 
+  if (enableFloat) {
+    writeResourcesForBoundary(destination, boundary.resources);
+  }
+
   return writeCompletedBoundaryInstruction(
     destination,
     request.responseState,
@@ -2232,7 +2215,16 @@ function flushPartialBoundary(
     }
   }
   completedSegments.splice(0, i);
-  return true;
+
+  if (enableFloat) {
+    // The way this is structured we only write resources for partial boundaries
+    // if there is no backpressure. Later before we complete the boundary we
+    // will write resources regardless of backpressure before we emit the
+    // completion instruction
+    return writeResourcesForBoundary(destination, boundary.resources);
+  } else {
+    return true;
+  }
 }
 
 function flushPartiallyCompletedSegment(
@@ -2285,13 +2277,7 @@ function flushCompletedQueues(
     if (completedRootSegment !== null) {
       if (request.pendingRootTasks === 0) {
         if (enableFloat) {
-          const preamble = request.preamble;
-          for (i = 0; i < preamble.length; i++) {
-            // we expect the preamble to be tiny and will ignore backpressure
-            writeChunk(destination, preamble[i]);
-          }
-
-          flushInitialResources(
+          writePreamble(
             destination,
             request.resources,
             request.responseState,
@@ -2307,7 +2293,7 @@ function flushCompletedQueues(
         return;
       }
     } else if (enableFloat) {
-      flushImmediateResources(destination, request);
+      writeHoistables(destination, request.resources, request.responseState);
     }
 
     // We emit client rendering instructions for already emitted boundaries first.
@@ -2385,10 +2371,7 @@ function flushCompletedQueues(
       // either they have pending task or they're complete.
     ) {
       if (enableFloat) {
-        const postamble = request.postamble;
-        for (let i = 0; i < postamble.length; i++) {
-          writeChunk(destination, postamble[i]);
-        }
+        writePostamble(destination, request.responseState);
       }
       completeWriting(destination);
       flushBuffered(destination);
diff --git a/packages/react-server/src/forks/ReactServerFormatConfig.custom.js b/packages/react-server/src/forks/ReactServerFormatConfig.custom.js
index 26455b9ee493c..9d1927ce72a54 100644
--- a/packages/react-server/src/forks/ReactServerFormatConfig.custom.js
+++ b/packages/react-server/src/forks/ReactServerFormatConfig.custom.js
@@ -74,11 +74,14 @@ export const cleanupAfterRender = $$$hostConfig.cleanupAfterRender;
 // -------------------------
 //     Resources
 // -------------------------
-export const writeInitialResources = $$$hostConfig.writeInitialResources;
-export const writeImmediateResources = $$$hostConfig.writeImmediateResources;
+export const writePreamble = $$$hostConfig.writePreamble;
+export const writeHoistables = $$$hostConfig.writeHoistables;
+export const writePostamble = $$$hostConfig.writePostamble;
 export const hoistResources = $$$hostConfig.hoistResources;
 export const hoistResourcesToRoot = $$$hostConfig.hoistResourcesToRoot;
 export const createResources = $$$hostConfig.createResources;
 export const createBoundaryResources = $$$hostConfig.createBoundaryResources;
 export const setCurrentlyRenderingBoundaryResourcesTarget =
   $$$hostConfig.setCurrentlyRenderingBoundaryResourcesTarget;
+export const writeResourcesForBoundary =
+  $$$hostConfig.writeResourcesForBoundary;
diff --git a/packages/react-test-renderer/src/ReactTestRenderer.js b/packages/react-test-renderer/src/ReactTestRenderer.js
index e267df329f81c..2080c287a86f5 100644
--- a/packages/react-test-renderer/src/ReactTestRenderer.js
+++ b/packages/react-test-renderer/src/ReactTestRenderer.js
@@ -30,7 +30,7 @@ import {
   FunctionComponent,
   ClassComponent,
   HostComponent,
-  HostResource,
+  HostHoistable,
   HostSingleton,
   HostPortal,
   HostText,
@@ -203,7 +203,7 @@ function toTree(node: null | Fiber): $FlowFixMe {
         instance: null,
         rendered: childrenToTree(node.child),
       };
-    case HostResource:
+    case HostHoistable:
     case HostSingleton:
     case HostComponent: {
       return {
@@ -314,7 +314,7 @@ class ReactTestInstance {
     const tag = this._fiber.tag;
     if (
       tag === HostComponent ||
-      tag === HostResource ||
+      tag === HostHoistable ||
       tag === HostSingleton
     ) {
       return getPublicInstance(this._fiber.stateNode);
diff --git a/scripts/error-codes/codes.json b/scripts/error-codes/codes.json
index 34db8b08e37ca..cc822f2e0abbd 100644
--- a/scripts/error-codes/codes.json
+++ b/scripts/error-codes/codes.json
@@ -429,7 +429,7 @@
   "441": "An error occurred in the Server Components render. The specific message is omitted in production builds to avoid leaking sensitive details. A digest property is included on this error instance which may provide additional details about the nature of the error.",
   "442": "The current renderer does not support Resources. This error is likely caused by a bug in React. Please file an issue.",
   "443": "acquireResource encountered a resource type it did not expect: \"%s\". this is a bug in React.",
-  "444": "getResource encountered a resource type it did not expect: \"%s\". this is a bug in React.",
+  "444": "getResource encountered a type it did not expect: \"%s\". this is a bug in React.",
   "445": "\"currentResources\" was expected to exist. This is a bug in React.",
   "446": "\"resourceRoot\" was expected to exist. This is a bug in React.",
   "447": "While attempting to insert a Resource, React expected the Document to contain a head element but it was not found.",
diff --git a/scripts/rollup/generate-inline-fizz-runtime.js b/scripts/rollup/generate-inline-fizz-runtime.js
index 226c844561be8..b7563a4cca4e2 100644
--- a/scripts/rollup/generate-inline-fizz-runtime.js
+++ b/scripts/rollup/generate-inline-fizz-runtime.js
@@ -77,7 +77,7 @@ async function main() {
   // Fizz runtime, and should break immediately if there were a mistake, so I'm
   // not too worried about it.
   outputCode = outputCode.replace(
-    /window\.(\$[A-z0-9_]*)/g,
+    /window\.(\$[A-z0-9_]*|matchMedia)/g,
     (_, variableName) => variableName
   );