diff --git a/package.json b/package.json
index d59f01a4e97..1a066f92235 100644
--- a/package.json
+++ b/package.json
@@ -192,10 +192,12 @@
       "@ember/-internals/routing/route-managers/api.js": "ember-source/@ember/-internals/routing/route-managers/api.js",
       "@ember/-internals/routing/route-managers/classic/bucket.js": "ember-source/@ember/-internals/routing/route-managers/classic/bucket.js",
       "@ember/-internals/routing/route-managers/classic/manager.js": "ember-source/@ember/-internals/routing/route-managers/classic/manager.js",
+      "@ember/-internals/routing/route-managers/classic/outlet.js": "ember-source/@ember/-internals/routing/route-managers/classic/outlet.js",
       "@ember/-internals/routing/route-managers/classic/query-params.js": "ember-source/@ember/-internals/routing/route-managers/classic/query-params.js",
       "@ember/-internals/routing/route-managers/classic/substates.js": "ember-source/@ember/-internals/routing/route-managers/classic/substates.js",
       "@ember/-internals/routing/route-managers/classic/wrapper.js": "ember-source/@ember/-internals/routing/route-managers/classic/wrapper.js",
       "@ember/-internals/routing/route-managers/registry.js": "ember-source/@ember/-internals/routing/route-managers/registry.js",
+      "@ember/-internals/routing/route-managers/root-outlet.js": "ember-source/@ember/-internals/routing/route-managers/root-outlet.js",
       "@ember/-internals/runtime/index.js": "ember-source/@ember/-internals/runtime/index.js",
       "@ember/-internals/runtime/lib/ext/rsvp.js": "ember-source/@ember/-internals/runtime/lib/ext/rsvp.js",
       "@ember/-internals/runtime/lib/mixins/-proxy.js": "ember-source/@ember/-internals/runtime/lib/mixins/-proxy.js",
diff --git a/packages/@ember/-internals/glimmer/index.ts b/packages/@ember/-internals/glimmer/index.ts
index abb5506b78f..d588d081dd6 100644
--- a/packages/@ember/-internals/glimmer/index.ts
+++ b/packages/@ember/-internals/glimmer/index.ts
@@ -17,7 +17,7 @@
   The documentation for `@ember/component` still refers to the older authoring format. To read about
   the new authoring format, see the
   [Glimmer Component API documentation](/ember/release/modules/@glimmer%2Fcomponent).
-    
+
   ### Showing a property
 
   Templates manage the flow of an application's UI, and display state (through
@@ -117,7 +117,7 @@
 
   ```app/templates/application.gjs
   import LabeledTextField from '../components/labeled-textfield';
-    
+
   <template>
     <LabeledTextField @value={{@model.name}}>
       First name:
@@ -127,7 +127,7 @@
 
   ```app/components/labeled-textfield.gjs
   import { Input } from '@ember/component';
-    
+
   <template>
     <label>
       {{yield}} <Input @value={{@value}} />
@@ -148,12 +148,12 @@
   ```app/templates/application.gjs
   import Component from '@glimmer/component';
   import LabeledTextField from '../components/labeled-textfield';
-    
+
   export default class Application extends Component {
     firstNameValidator = (value) => {
       // validates
     }
-    
+
     <template>
       <LabeledTextField @value={{@model.validation}} @validator={{this.firstNameValidator}} as |validationError|>
         {{#if validationError}}
@@ -167,7 +167,7 @@
 
   ```app/components/labeled-textfield.gjs
   import { Input } from '@ember/component';
-    
+
   <template>
     <label>
       {{yield this.validationError}} <Input @value={{@value}} />
@@ -188,7 +188,7 @@
 
   ```app/templates/application.gjs
   import DateRanges from '../components/date-ranges';
-    
+
   <template>
     <DateRanges @value={{@model.date}} as |range|>
       Start date: {{range.start}}
@@ -215,10 +215,10 @@
   ```
 
   Multiple values can be yielded as block params:
-    
+
   ```app/templates/application.gjs
   import Banner from '../components/banner';
-    
+
   <template>
     <Banner @value={{@model}} as |title subtitle body|>
       <h1>{{title}}</h1>
@@ -271,7 +271,7 @@
     Title = Title;
     Subtitle = Subtitle;
     Body = Body;
-    
+
     <template>
       <div>
         {{yield (hash
@@ -408,7 +408,7 @@
   `{{(has-block-params)}}` indicates if the component was invoked with block params.
 
   This component is invoked with block params:
-    
+
   ```handlebars
   <MyComponent as |favoriteFlavor|>
   Hi Jen!
@@ -516,6 +516,7 @@ export {
   _resetRenderers,
   renderSettled,
   renderComponent,
+  setRenderer,
   type View,
 } from './lib/renderer';
 export {
@@ -533,7 +534,7 @@ export { DOMChanges, NodeDOMTreeConstruction, DOMTreeConstruction } from './lib/
 // TODO just test these through public API
 // a lot of these are testing how a problem was solved
 // rather than the problem was solved
-export { default as OutletView, type BootEnvironment } from './lib/views/outlet';
+export type { BootEnvironment } from '@ember/engine/instance';
 export type { OutletState, RenderState } from './lib/utils/outlet';
 export {
   componentCapabilities,
diff --git a/packages/@ember/-internals/glimmer/lib/base-renderer.ts b/packages/@ember/-internals/glimmer/lib/base-renderer.ts
index 955511c4389..ab9c459b72c 100644
--- a/packages/@ember/-internals/glimmer/lib/base-renderer.ts
+++ b/packages/@ember/-internals/glimmer/lib/base-renderer.ts
@@ -462,12 +462,18 @@ export function renderComponent(
     env,
     into,
     args,
+    appendIntoTarget = false,
   }: {
     /**
      * The element to render the component in to.
      */
     into: IntoTarget;
 
+    /**
+     * Appends `into` without clearing the target first. Mimics the `appendTo` behavior for classic components.
+     */
+    appendIntoTarget?: boolean;
+
     /**
      * Optional owner. Defaults to `{}`, can be any object, but will need to implement the [Owner](https://api.emberjs.com/ember/release/classes/Owner) API for components within this render tree to access services.
      */
@@ -534,7 +540,7 @@ export function renderComponent(
    * Because destruction is async, it won't be safe to
    * do this again, and we'll have to rely on the above destroy.
    */
-  if (!existing && into instanceof Element) {
+  if (!(appendIntoTarget || existing) && into instanceof Element) {
     into.innerHTML = '';
   }
 
@@ -562,6 +568,11 @@ export function renderComponent(
 
   if (innerResult) {
     associateDestroyableChild(owner, innerResult);
+    registerDestructor(innerResult, () => {
+      if (RENDER_CACHE.get(into)?.glimmerResult === innerResult) {
+        RENDER_CACHE.delete(into);
+      }
+    });
   }
 
   let result: RenderResult = {
@@ -580,6 +591,14 @@ export function renderComponent(
 const RENDER_CACHE = new WeakMap<IntoTarget, RenderCacheEntry>();
 const RENDERER_CACHE = new WeakMap<object, BaseRenderer>();
 
+/**
+ * The application seeds its `renderer:-dom` service which allows for
+ * router-aware resolver to resolve {{mount}}
+ */
+export function setRenderer(owner: object, renderer: BaseRenderer): void {
+  RENDERER_CACHE.set(owner, renderer);
+}
+
 export class BaseRenderer {
   static strict(
     owner: object,
diff --git a/packages/@ember/-internals/glimmer/lib/component-managers/outlet.ts b/packages/@ember/-internals/glimmer/lib/component-managers/outlet.ts
index f3825d3f60c..20ad1a1639a 100644
--- a/packages/@ember/-internals/glimmer/lib/component-managers/outlet.ts
+++ b/packages/@ember/-internals/glimmer/lib/component-managers/outlet.ts
@@ -3,7 +3,6 @@ import type { Nullable } from '@ember/-internals/utility-types';
 import { assert } from '@ember/debug';
 import type EngineInstance from '@ember/engine/instance';
 import { _instrumentStart } from '@ember/instrumentation';
-import { precompileTemplate } from '@ember/template-compilation';
 import type {
   CompilableProgram,
   ComponentDefinition,
@@ -11,6 +10,7 @@ import type {
   Destroyable,
   Environment,
   InternalComponentCapabilities,
+  TemplateFactory,
   VMArguments,
   WithCreateInstance,
   WithCustomDebugRenderTree,
@@ -23,7 +23,6 @@ import { unwrapTemplate } from './unwrap-template';
 
 import type { DynamicScope } from '../renderer';
 import type { OutletState } from '../utils/outlet';
-import type OutletView from '../views/outlet';
 
 function instrumentationPayload(def: OutletDefinitionState) {
   // "main" used to be the outlet name, keeping it around for compatibility
@@ -43,10 +42,9 @@ export interface OutletDefinitionState {
   name: string;
 
   /**
-   * What this outlet renders. The root `OutletView` provides the upgraded
-   * root template as `invokable`; per-outlet states built by the `{{outlet}}`
-   * helper carry the manager's `wrapper` (when present) plus `invokable` and
-   * `controller`, which the helper's stability check keys on.
+   * What this outlet renders. States built by the `{{outlet}}` helper carry
+   * the manager's `wrapper` (when present) plus `invokable` and `controller`,
+   * which the helper's stability check keys on.
    */
   controller?: unknown;
   wrapper?: object;
@@ -180,16 +178,6 @@ class OutletComponentManager
 
 const OUTLET_MANAGER = /*@__PURE__*/ new OutletComponentManager();
 
-// The one outlet layout. `@Component` is always a value that already
-// carries everything it needs — the outlet helper curries the args (the
-// invokable/bucket/live context for wrapped renders, the live context for
-// wrapper-less ones) onto the render target before handing it over, and the
-// root outlet's invokable takes no args at all. Keeping the layout arg-less
-// also keeps stray named args out of the debug render tree.
-const OUTLET_COMPONENT_TEMPLATE = precompileTemplate('<@Component />', {
-  strictMode: true,
-});
-
 export class OutletComponent implements ComponentDefinition<
   OutletDefinitionState,
   OutletInstanceState,
@@ -204,12 +192,9 @@ export class OutletComponent implements ComponentDefinition<
 
   constructor(
     owner: InternalOwner,
-    public state: OutletDefinitionState
+    public state: OutletDefinitionState,
+    template: TemplateFactory
   ) {
-    this.compilable = unwrapTemplate(OUTLET_COMPONENT_TEMPLATE(owner)).asLayout();
+    this.compilable = unwrapTemplate(template(owner)).asLayout();
   }
 }
-
-export function createRootOutlet(outletView: OutletView): OutletComponent {
-  return new OutletComponent(outletView.owner, outletView.state);
-}
diff --git a/packages/@ember/-internals/glimmer/lib/renderer.ts b/packages/@ember/-internals/glimmer/lib/renderer.ts
index 90334f6d5aa..fc4f2baa35b 100644
--- a/packages/@ember/-internals/glimmer/lib/renderer.ts
+++ b/packages/@ember/-internals/glimmer/lib/renderer.ts
@@ -1,7 +1,6 @@
 import { privatize as P } from '@ember/-internals/container/lib/registry';
 import type { InternalOwner } from '@ember/-internals/owner';
 import { getOwner } from '@ember/-internals/owner';
-import { guidFor } from '@ember/-internals/utils/lib/guid';
 import { getViewElement, getViewId } from '@ember/-internals/views/lib/system/utils';
 import { assert } from '@ember/debug';
 import {
@@ -26,21 +25,17 @@ import type { Reference } from '@glimmer/reference/lib/reference';
 import { createConstRef, UNDEFINED_REFERENCE, valueForRef } from '@glimmer/reference/lib/reference';
 import type { CurriedValue } from '@glimmer/runtime/lib/curried-value';
 import { clientBuilder } from '@glimmer/runtime/lib/vm/element-builder';
-import { createCapturedArgs, EMPTY_POSITIONAL } from '@glimmer/runtime/lib/vm/arguments';
 import { curry } from '@glimmer/runtime/lib/curried-value';
 import { inTransaction } from '@glimmer/runtime/lib/environment';
 import { renderMain } from '@glimmer/runtime/lib/render';
-import { dict } from '@glimmer/util/lib/collections';
 import { unwrapTemplate } from './component-managers/unwrap-template';
 import type { SimpleDocument, SimpleElement, SimpleNode } from '@simple-dom/interface';
 import type Component from './component';
 import type ClassicComponent from './component';
 import { BOUNDS } from './component-managers/curly';
-import { createRootOutlet } from './component-managers/outlet';
 import { RootComponentDefinition } from './component-managers/root';
 import RouterResolver from './router-resolver';
 import type { OutletState } from './utils/outlet';
-import OutletView from './views/outlet';
 import type { IBuilder, RendererRoot } from './base-renderer';
 import { BaseRenderer, errorLoopTransaction } from './base-renderer';
 
@@ -53,6 +48,7 @@ export {
   errorLoopTransaction,
   renderComponent,
   renderSettled,
+  setRenderer,
   _resetRenderers,
 } from './base-renderer';
 
@@ -103,7 +99,7 @@ class ClassicRootState implements RendererRoot {
   readonly env: Environment;
 
   constructor(
-    public root: Component | OutletView,
+    public root: Component,
     context: EvaluationContext,
     owner: object,
     template: Template,
@@ -117,7 +113,7 @@ class ClassicRootState implements RendererRoot {
       template !== undefined
     );
 
-    this.id = root instanceof OutletView ? guidFor(root) : getViewId(root);
+    this.id = getViewId(root);
     this.result = undefined;
     this.destroyed = false;
     this.env = context.env;
@@ -216,36 +212,6 @@ export class Renderer extends BaseRenderer {
 
   // renderer HOOKS
 
-  appendOutletView(view: OutletView, target: SimpleElement): void {
-    // The append is scheduled into the `render` queue, so a teardown that
-    // starts in the same run loop (e.g. a deferred incremental outlet pass
-    // racing test cleanup) can destroy this renderer before the queue
-    // flushes. Rendering into a destroying renderer would assert deep in
-    // the destroyable graph; skip instead.
-    if (isDestroying(this) || isDestroyed(this)) {
-      return;
-    }
-
-    // TODO: This bypasses the {{outlet}} syntax so logically duplicates
-    // some of the set up code. Since this is all internal (or is it?),
-    // we can refactor this to do something more direct/less convoluted
-    // and with less setup, but get it working first
-    let outlet = createRootOutlet(view);
-    let { invokable } = view.state;
-    assert('[BUG] OutletView state is unexpectedly missing its root invokable', invokable);
-
-    let named = dict<Reference>();
-    named['Component'] = createConstRef(invokable, '@Component');
-
-    let args = createCapturedArgs(named, EMPTY_POSITIONAL);
-
-    this._appendDefinition(
-      view,
-      curry(0 as CurriedComponent, outlet, view.owner, args, true),
-      target
-    );
-  }
-
   appendTo(view: ClassicComponent, target: SimpleElement): void {
     let definition = new RootComponentDefinition(view);
     this._appendDefinition(
@@ -255,11 +221,7 @@ export class Renderer extends BaseRenderer {
     );
   }
 
-  _appendDefinition(
-    root: OutletView | ClassicComponent,
-    definition: CurriedValue,
-    target: SimpleElement
-  ): void {
+  _appendDefinition(root: ClassicComponent, definition: CurriedValue, target: SimpleElement): void {
     let self = createConstRef(definition, 'this');
     let dynamicScope = new DynamicScope(null, UNDEFINED_REFERENCE);
     let rootState = new ClassicRootState(
diff --git a/packages/@ember/-internals/glimmer/lib/router-resolver.ts b/packages/@ember/-internals/glimmer/lib/router-resolver.ts
index acc2c8230ef..e555bee3da6 100644
--- a/packages/@ember/-internals/glimmer/lib/router-resolver.ts
+++ b/packages/@ember/-internals/glimmer/lib/router-resolver.ts
@@ -3,11 +3,8 @@ import type { InternalOwner } from '@ember/-internals/owner';
 import type { Nullable } from '@ember/-internals/utility-types';
 import ResolverImpl from './resolver';
 import { mountHelper } from './syntax/mount';
-import { outletHelper } from './syntax/outlet';
-
 const ROUTER_KEYWORD_HELPERS: Record<string, object> = {
   '-mount': mountHelper,
-  '-outlet': outletHelper,
 };
 
 /**
diff --git a/packages/@ember/-internals/glimmer/lib/setup-registry.ts b/packages/@ember/-internals/glimmer/lib/setup-registry.ts
index 75fb2760855..19e6ac676ef 100644
--- a/packages/@ember/-internals/glimmer/lib/setup-registry.ts
+++ b/packages/@ember/-internals/glimmer/lib/setup-registry.ts
@@ -7,9 +7,7 @@ import LinkTo from './components/link-to';
 import Textarea from './components/textarea';
 import { clientBuilder, rehydrationBuilder, serializeBuilder } from './dom';
 import { Renderer } from './renderer';
-import OutletTemplate from './templates/outlet';
 import RootTemplate from './templates/root';
-import OutletView from './views/outlet';
 
 export function setupApplicationRegistry(registry: Registry): void {
   // because we are using injections we can't use instantiate false
@@ -42,9 +40,6 @@ export function setupApplicationRegistry(registry: Registry): void {
 export function setupEngineRegistry(registry: Registry): void {
   registry.optionsForType('template', { instantiate: false });
 
-  registry.register('view:-outlet', OutletView);
-  registry.register('template:-outlet', OutletTemplate as any);
-
   registry.optionsForType('helper', { instantiate: false });
 
   registry.register('component:input', Input);
diff --git a/packages/@ember/-internals/glimmer/lib/templates/outlet.ts b/packages/@ember/-internals/glimmer/lib/templates/outlet.ts
index 803be28628f..6c8cf27386e 100644
--- a/packages/@ember/-internals/glimmer/lib/templates/outlet.ts
+++ b/packages/@ember/-internals/glimmer/lib/templates/outlet.ts
@@ -1,5 +1,5 @@
 import { precompileTemplate } from '@ember/template-compilation';
-import { outletHelper } from '../syntax/outlet';
+import { outletHelper } from '../../../routing/route-managers/classic/outlet';
 
 export default precompileTemplate(`{{component (outletHelper)}}`, {
   moduleName: 'packages/@ember/-internals/glimmer/lib/templates/outlet.hbs',
diff --git a/packages/@ember/-internals/glimmer/lib/utils/outlet.ts b/packages/@ember/-internals/glimmer/lib/utils/outlet.ts
index d017f4a2489..e7c18ee77e5 100644
--- a/packages/@ember/-internals/glimmer/lib/utils/outlet.ts
+++ b/packages/@ember/-internals/glimmer/lib/utils/outlet.ts
@@ -52,13 +52,6 @@ export interface RenderState {
    * wrapper as `@bucket`.
    */
   bucket?: object;
-
-  /**
-   * Legacy template used by `setOutletState` callers (older test-helpers,
-   * liquid-fire-style addons). Usually a `Template`, but a pre-built
-   * component definition is also accepted (see `OutletView`).
-   */
-  template?: object;
 }
 
 export interface OutletState {
diff --git a/packages/@ember/-internals/glimmer/lib/views/outlet.ts b/packages/@ember/-internals/glimmer/lib/views/outlet.ts
deleted file mode 100644
index 7895bed3fd2..00000000000
--- a/packages/@ember/-internals/glimmer/lib/views/outlet.ts
+++ /dev/null
@@ -1,198 +0,0 @@
-// We use the `InternalOwner` notion here because we actually need all of its
-// API for using with renderers (normally, it will be `EngineInstance`).
-// We use `getOwner` from our internal home for it rather than the narrower
-// public API for the same reason.
-import { type InternalOwner, getOwner } from '@ember/-internals/owner';
-import type { BootOptions } from '@ember/engine/instance';
-import { assert } from '@ember/debug';
-import { schedule } from '@ember/runloop';
-import { DEBUG } from '@glimmer/env';
-import type { Template, TemplateFactory } from '@glimmer/interfaces';
-import { hasInternalComponentManager } from '@glimmer/manager/lib/internal/api';
-import type { Reference } from '@glimmer/reference/lib/reference';
-import { createComputeRef, createConstRef, updateRef } from '@glimmer/reference/lib/reference';
-import { consumeTag } from '@glimmer/validator/lib/tracking';
-import { createTag, DIRTY_TAG as dirtyTag } from '@glimmer/validator/lib/validators';
-import type { SimpleElement } from '@simple-dom/interface';
-import type { OutletDefinitionState } from '../component-managers/outlet';
-import type { Renderer } from '../renderer';
-import type { OutletState } from '../utils/outlet';
-import { makeRouteTemplate } from '../component-managers/route-template';
-
-export interface BootEnvironment {
-  hasDOM: boolean;
-  isInteractive: boolean;
-  _renderMode?: string;
-  options: BootOptions;
-}
-
-const TOP_LEVEL_NAME = '-top-level';
-
-function isTemplate(value: unknown): value is Template {
-  if (value === null || typeof value !== 'object') {
-    return false;
-  }
-
-  let template = value as Partial<Template>;
-  return template.result === 'ok' || template.result === 'error';
-}
-
-export default class OutletView {
-  static extend(injections: any): typeof OutletView {
-    return class extends OutletView {
-      static create(options: any) {
-        if (options) {
-          return super.create(Object.assign({}, injections, options));
-        } else {
-          return super.create(injections);
-        }
-      }
-    };
-  }
-
-  static reopenClass(injections: any): void {
-    Object.assign(this, injections);
-  }
-
-  static create(options: {
-    environment: BootEnvironment;
-    application: InternalOwner;
-    template: TemplateFactory;
-  }): OutletView {
-    let { environment: _environment, application: namespace, template: templateFactory } = options;
-    let owner = getOwner(options);
-    assert('OutletView is unexpectedly missing an owner', owner);
-    let template = templateFactory(owner);
-    return new OutletView(_environment, owner, template, namespace);
-  }
-
-  private ref: Reference;
-  public state: OutletDefinitionState;
-
-  constructor(
-    private _environment: BootEnvironment,
-    public owner: InternalOwner,
-    public template: Template,
-    public namespace: any
-  ) {
-    let outletStateTag = createTag();
-    let outletState: OutletState = {
-      outlets: { main: undefined },
-      render: {
-        owner: owner,
-        name: TOP_LEVEL_NAME,
-        controller: undefined,
-        model: undefined,
-        wrapper: undefined,
-        invokable: undefined,
-      },
-    };
-
-    let ref = (this.ref = createComputeRef(
-      () => {
-        consumeTag(outletStateTag);
-        return outletState;
-      },
-      (state: OutletState) => {
-        dirtyTag(outletStateTag);
-        outletState.outlets['main'] = state;
-      }
-    ));
-
-    this.state = {
-      ref,
-      name: TOP_LEVEL_NAME,
-      // The root template renders with no `self`; all template→invokable
-      // upgrading (root and legacy alike) lives in this module. The template
-      // is only absent when unit tests construct a bare OutletView — those
-      // never render, so the missing invokable is caught by the renderer's
-      // assertion if one ever tries.
-      invokable:
-        template !== undefined ? makeRouteTemplate(owner, TOP_LEVEL_NAME, template) : undefined,
-    };
-  }
-
-  appendTo(selector: string | SimpleElement): void {
-    let target;
-
-    if (this._environment.hasDOM) {
-      target = typeof selector === 'string' ? document.querySelector(selector) : selector;
-    } else {
-      target = selector;
-    }
-
-    let renderer = this.owner.lookup('renderer:-dom') as Renderer;
-
-    // SAFETY: It's not clear that this cast is safe.
-    // The types for appendOutletView may be incorrect or this is a potential bug.
-    schedule('render', renderer, 'appendOutletView', this, target as SimpleElement);
-  }
-
-  rerender(): void {
-    /**/
-  }
-
-  // Legacy `setOutletState` callers (the rendering test-helpers and
-  // liquid-fire-style addons) provide a raw `template` with no `invokable`.
-  // The outlet helper only knows how to render an invokable, so we upgrade any
-  // raw template into a route template here, mutating the renders in place.
-  // Walk the whole outlet chain so nested legacy states are normalized too.
-  // We skip renders that already have an invokable (the manager-driven router
-  // path), which keeps the invokable identity stable when the same render
-  // object is set again.
-  private upgradeLegacyTemplates(state: OutletState): void {
-    let current: OutletState | undefined = state;
-
-    while (current !== undefined) {
-      let render = current.render;
-
-      if (render !== undefined && render.invokable === undefined && render.template) {
-        render.invokable = this.invokableForTemplate(
-          render.name,
-          render.template,
-          render.controller
-        );
-      }
-
-      current = current.outlets.main;
-    }
-  }
-
-  // Turn a legacy raw `template` into something the outlet can render. A
-  // caller may also hand us a pre-built component definition instead of a
-  // template (an intimate API older addons may rely on), in which case we
-  // use it directly rather than trying to wrap it.
-  private invokableForTemplate(name: string, template: object, controller: unknown): object {
-    if (hasInternalComponentManager(template)) {
-      return template;
-    }
-
-    if (DEBUG && !isTemplate(template)) {
-      let label: string;
-      try {
-        label = `\`${String(template)}\``;
-      } catch {
-        label = 'an unknown object';
-      }
-
-      assert(
-        `Failed to render the \`${name}\` route: expected a component or Template object, but got ${label}.`
-      );
-    }
-
-    // The route template renders with the controller as its `self` (`this`).
-    // This path is for legacy `setOutletState` callers that provide a raw `template`
-    // We know they use controllers, so we can safely reach for the controller here.
-    let self = createConstRef(controller, 'this');
-    return makeRouteTemplate(this.owner, name, template as Template, self);
-  }
-
-  setOutletState(state: OutletState): void {
-    this.upgradeLegacyTemplates(state);
-    updateRef(this.ref, state);
-  }
-
-  destroy(): void {
-    /**/
-  }
-}
diff --git a/packages/@ember/-internals/glimmer/tests/integration/application/debug-render-tree-test.ts b/packages/@ember/-internals/glimmer/tests/integration/application/debug-render-tree-test.ts
index 53650ae7f08..ea72a5e6702 100644
--- a/packages/@ember/-internals/glimmer/tests/integration/application/debug-render-tree-test.ts
+++ b/packages/@ember/-internals/glimmer/tests/integration/application/debug-render-tree-test.ts
@@ -100,7 +100,7 @@ if (ENV._DEBUG_RENDER_TREE) {
             name: 'index',
             args: {
               positional: [],
-              named: { controller: this.controllerFor('index'), model: undefined },
+              named: { controller: this.controllerFor('index'), model: undefined, outlet: null },
             },
             instance: this.controllerFor('index'),
             bounds: this.elementBounds(this.element!),
@@ -1643,7 +1643,28 @@ if (ENV._DEBUG_RENDER_TREE) {
       }
 
       assertNamedArgs<T>(actual: T, expected: T, path: string) {
-        this.assert.deepEqual(actual, expected, path);
+        const allKeys = new Set([
+          ...Object.keys(actual as object),
+          ...Object.keys(expected as object),
+        ]);
+
+        for (let key of allKeys) {
+          let inExpected = key in (expected as object);
+          let inActual = key in (actual as object);
+
+          // @TODO revisit if the skip is needed once currying is removed from the outletHelper
+          if (key !== 'outlet') {
+            this.assert.ok(inExpected, `expected is missing key ${key}`);
+            this.assert.ok(inActual, `actual is missing key ${key}`);
+          }
+
+          if (inExpected && inActual) {
+            // TODO we should probably not rely on qunit's version of deepEqual here but at least now we're not
+            // trying to print full render trees (32MB of string) to the browser unless the key exists in both
+            // places and is different
+            this.assert.deepEqual((actual as any)[key], (expected as any)[key], `${path}.${key}`);
+          }
+        }
       }
 
       assertPositionalArgs<T>(actual: T, expected: T, path: string) {
diff --git a/packages/@ember/-internals/glimmer/tests/integration/outlet-test.js b/packages/@ember/-internals/glimmer/tests/integration/outlet-test.js
deleted file mode 100644
index 0f860bd401e..00000000000
--- a/packages/@ember/-internals/glimmer/tests/integration/outlet-test.js
+++ /dev/null
@@ -1,184 +0,0 @@
-import { RenderingTestCase, moduleFor, runAppend, runTask } from 'internal-test-helpers';
-
-moduleFor(
-  'outlet view',
-  class extends RenderingTestCase {
-    constructor() {
-      super(...arguments);
-
-      let CoreOutlet = this.owner.factoryFor('view:-outlet');
-      let outletTemplateFactory = this.owner.lookup('template:-outlet');
-      let environment = this.owner.lookup('-environment:main');
-      this.component = CoreOutlet.create({ environment, template: outletTemplateFactory });
-    }
-
-    ['@test should not error when initial rendered template is undefined']() {
-      let outletState = {
-        render: {
-          owner: this.owner,
-          name: 'application',
-          controller: undefined,
-          template: undefined,
-        },
-
-        outlets: Object.create(null),
-      };
-
-      runTask(() => this.component.setOutletState(outletState));
-
-      runAppend(this.component);
-
-      this.assertText('');
-    }
-
-    ['@test should render the outlet when set after DOM insertion']() {
-      let outletState = {
-        render: {
-          owner: this.owner,
-          name: 'application',
-          controller: undefined,
-          template: undefined,
-        },
-
-        outlets: Object.create(null),
-      };
-
-      runTask(() => this.component.setOutletState(outletState));
-
-      runAppend(this.component);
-
-      this.assertText('');
-
-      this.registerTemplate('application', 'HI{{outlet}}');
-      outletState = {
-        render: {
-          owner: this.owner,
-          name: 'application',
-          controller: {},
-          template: this.owner.lookup('template:application')(this.owner),
-        },
-        outlets: Object.create(null),
-      };
-
-      runTask(() => this.component.setOutletState(outletState));
-
-      this.assertText('HI');
-
-      this.assertStableRerender();
-
-      this.registerTemplate('index', '<p>BYE</p>');
-      outletState.outlets.main = {
-        render: {
-          owner: this.owner,
-          name: 'index',
-          controller: {},
-          template: this.owner.lookup('template:index')(this.owner),
-        },
-        outlets: Object.create(null),
-      };
-
-      runTask(() => this.component.setOutletState(outletState));
-
-      this.assertText('HIBYE');
-    }
-
-    ['@test should render the outlet when set before DOM insertion']() {
-      this.registerTemplate('application', 'HI{{outlet}}');
-      let outletState = {
-        render: {
-          owner: this.owner,
-          name: 'application',
-          controller: {},
-          template: this.owner.lookup('template:application')(this.owner),
-        },
-        outlets: Object.create(null),
-      };
-
-      runTask(() => this.component.setOutletState(outletState));
-
-      runAppend(this.component);
-
-      this.assertText('HI');
-
-      this.assertStableRerender();
-
-      this.registerTemplate('index', '<p>BYE</p>');
-      outletState.outlets.main = {
-        render: {
-          owner: this.owner,
-          name: 'index',
-          controller: {},
-          template: this.owner.lookup('template:index')(this.owner),
-        },
-        outlets: Object.create(null),
-      };
-
-      runTask(() => this.component.setOutletState(outletState));
-
-      this.assertText('HIBYE');
-    }
-
-    ['@test outletState can pass through user code (liquid-fire initimate API) ']() {
-      this.registerTemplate(
-        'outer',
-        'A{{#-with-dynamic-vars outletState=(identity (-get-dynamic-var "outletState"))}}B{{outlet}}D{{/-with-dynamic-vars}}E'
-      );
-      this.registerTemplate('inner', 'C');
-
-      // This looks like it doesn't do anything, but its presence
-      // guarantees that the outletState gets converted from a reference
-      // to a value and then back to a reference. That is what we're
-      // testing here.
-      this.registerHelper('identity', ([a]) => a);
-
-      let outletState = {
-        render: {
-          owner: this.owner,
-          name: 'outer',
-          controller: {},
-          template: this.owner.lookup('template:outer')(this.owner),
-        },
-        outlets: {
-          main: {
-            render: {
-              owner: this.owner,
-              name: 'inner',
-              controller: {},
-              template: this.owner.lookup('template:inner')(this.owner),
-            },
-            outlets: Object.create(null),
-          },
-        },
-      };
-
-      runTask(() => this.component.setOutletState(outletState));
-
-      runAppend(this.component);
-
-      this.assertText('ABCDE');
-
-      this.assertStableRerender();
-    }
-
-    ['@test renders the controller as the template `this` (legacy setOutletState)']() {
-      this.registerTemplate('application', 'Hello {{this.message}}!');
-      let outletState = {
-        render: {
-          owner: this.owner,
-          name: 'application',
-          controller: { message: 'world' },
-          template: this.owner.lookup('template:application')(this.owner),
-        },
-        outlets: Object.create(null),
-      };
-
-      runTask(() => this.component.setOutletState(outletState));
-
-      runAppend(this.component);
-
-      this.assertText('Hello world!');
-
-      this.assertStableRerender();
-    }
-  }
-);
diff --git a/packages/@ember/-internals/glimmer/tests/unit/outlet-test.js b/packages/@ember/-internals/glimmer/tests/unit/outlet-test.js
deleted file mode 100644
index f694df1c07a..00000000000
--- a/packages/@ember/-internals/glimmer/tests/unit/outlet-test.js
+++ /dev/null
@@ -1,56 +0,0 @@
-import { moduleFor, AbstractTestCase } from 'internal-test-helpers';
-
-import { OutletView } from '@ember/-internals/glimmer';
-import { run, schedule } from '@ember/runloop';
-
-moduleFor(
-  'Glimmer OutletView',
-  class extends AbstractTestCase {
-    ['@test render in the render queue'](assert) {
-      let didAppendOutletView = 0;
-      let expectedOutlet = '#foo.bar';
-
-      let renderer = {
-        appendOutletView(view, target) {
-          didAppendOutletView++;
-          assert.equal(view, outletView);
-          assert.equal(target, expectedOutlet);
-        },
-      };
-
-      let outletView = new OutletView(
-        {},
-        {
-          lookup() {
-            return renderer;
-          },
-        }
-      );
-
-      run(() => {
-        assert.equal(
-          didAppendOutletView,
-          0,
-          'appendOutletView should not yet have been called (before appendTo)'
-        );
-        outletView.appendTo(expectedOutlet);
-        assert.equal(
-          didAppendOutletView,
-          0,
-          'appendOutletView should not yet have been called (sync after appendTo)'
-        );
-
-        schedule('actions', () =>
-          assert.equal(
-            didAppendOutletView,
-            0,
-            'appendOutletView should not yet have been called (in actions)'
-          )
-        );
-        schedule('render', () =>
-          assert.equal(didAppendOutletView, 1, 'appendOutletView should be invoked in render')
-        );
-      });
-    }
-  }
-);
diff --git a/packages/@ember/-internals/glimmer/tests/utils/debug-stack.js b/packages/@ember/-internals/glimmer/tests/utils/debug-stack.js
index 44bc82c43e7..9168f6c7030 100644
--- a/packages/@ember/-internals/glimmer/tests/utils/debug-stack.js
+++ b/packages/@ember/-internals/glimmer/tests/utils/debug-stack.js
@@ -2,7 +2,9 @@ function debugStackMessage(message, renderTree, includeTopLevel) {
   let topLevel = '';
 
   if (includeTopLevel === 'outlet') {
-    topLevel = '{{outlet}} for -top-level\n {4}-top-level\n {6}';
+    // The application root renders through `renderComponent`, whose root
+    // component (the root outlet) is labeled `{ROOT}` in the render stack.
+    topLevel = '{ROOT}\n {4}';
   } else if (includeTopLevel) {
     topLevel = '-top-level\n {4}';
   }
diff --git a/packages/@ember/-internals/routing/route-managers/classic/manager.ts b/packages/@ember/-internals/routing/route-managers/classic/manager.ts
index 917bdd4a8d1..fa7a1766b6f 100644
--- a/packages/@ember/-internals/routing/route-managers/classic/manager.ts
+++ b/packages/@ember/-internals/routing/route-managers/classic/manager.ts
@@ -12,6 +12,7 @@ import type { default as Owner } from '@ember/-internals/owner';
 import { get } from '@ember/-internals/metal/lib/property_get';
 import { makeRouteTemplate } from '@ember/-internals/glimmer/lib/component-managers/route-template';
 import type { OutletDefinitionState } from '@ember/-internals/glimmer/lib/component-managers/outlet';
+import OutletTemplate from '@ember/-internals/glimmer/lib/templates/outlet';
 import type { Reference } from '@glimmer/reference/lib/reference';
 import {
   childRefFromParts,
@@ -447,7 +448,7 @@ function buildClassicInvokable(bucket: ClassicRouteBucket): object {
         });
       }
     }
-    const template = route._topLevelViewTemplate(owner);
+    const template = OutletTemplate(owner);
     invokable = makeRouteTemplate(owner, name, template as Template, self);
   }
   // Cache here (rather than in getInvokable) so every caller shares one
diff --git a/packages/@ember/-internals/glimmer/lib/syntax/outlet.ts b/packages/@ember/-internals/routing/route-managers/classic/outlet.ts
similarity index 83%
rename from packages/@ember/-internals/glimmer/lib/syntax/outlet.ts
rename to packages/@ember/-internals/routing/route-managers/classic/outlet.ts
index dc4d5f1c556..e0a3050ca2f 100644
--- a/packages/@ember/-internals/glimmer/lib/syntax/outlet.ts
+++ b/packages/@ember/-internals/routing/route-managers/classic/outlet.ts
@@ -13,9 +13,20 @@ import type { CurriedValue } from '@glimmer/runtime/lib/curried-value';
 import { createCapturedArgs, EMPTY_POSITIONAL } from '@glimmer/runtime/lib/vm/arguments';
 import { curry } from '@glimmer/runtime/lib/curried-value';
 import { dict } from '@glimmer/util/lib/collections';
-import { OutletComponent, type OutletDefinitionState } from '../component-managers/outlet';
-import { internalHelper } from '../helpers/internal-helper';
-import type { OutletState } from '../utils/outlet';
+import { precompileTemplate } from '@ember/template-compilation';
+import {
+  OutletComponent,
+  type OutletDefinitionState,
+} from '../../../glimmer/lib/component-managers/outlet';
+import { internalHelper } from '../../../glimmer/lib/helpers/internal-helper';
+import type { OutletState } from '../../../glimmer/lib/utils/outlet';
+
+const OUTLET_COMPONENT_TEMPLATE = precompileTemplate('<@Component @outlet={{(outlet)}} />', {
+  strictMode: true,
+  scope() {
+    return { outlet: outletHelper };
+  },
+});
 
 /**
   The `{{outlet}}` helper lets you specify where a child route will render in
@@ -58,6 +69,7 @@ export const outletHelper = /*@__PURE__*/ internalHelper(
 
     let outletRef = createComputeRef(() => {
       let state = valueForRef(scope.get('outletState') as Reference<OutletState | undefined>);
+
       return state?.outlets?.main;
     });
 
@@ -106,11 +118,13 @@ export const outletHelper = /*@__PURE__*/ internalHelper(
       assert('Expected outlet state to have an invokable to render', state.invokable !== undefined);
 
       // Args are delivered by currying them onto the render target — the
-      // outlet's layout is arg-less. Currying (rather than writing the args
-      // into the layout) keeps the target from showing up as an opaque
-      // `@Component` frame in the debug render tree and
+      // outlet's layout is otherwise arg-less. Currying (rather than writing
+      // the args into the layout) keeps the target from showing up as an
+      // opaque `@Component` frame in the debug render tree and
       // backtracking-assertion messages. Curried refs stay live, so the
       // `@context` compute ref keeps updating across renders of the mount.
+      // (`@outlet` — the child `{{outlet}}` — is supplied by the outlet layout
+      // itself; see `OUTLET_COMPONENT_TEMPLATE`.)
       let targetArgs = dict<Reference>();
       let target;
 
@@ -122,13 +136,9 @@ export const outletHelper = /*@__PURE__*/ internalHelper(
         targetArgs['bucket'] = createConstRef(state.bucket, '@bucket');
         target = state.wrapper;
       } else {
-        // Wrapper-less render (a manager that opted out, or a legacy
-        // `setOutletState` caller): the invokable itself is the target and
-        // receives only the live `@context`. No `@bucket`: unlike the
-        // module-stable wrapper, the invokable is per-bucket and built by
-        // the manager, so anything bucket-shaped it needs the manager can
-        // attach itself — the live context ref is the one thing only the
-        // outlet can supply. (Legacy renders have no bucket at all.)
+        // Wrapper-less render (a manager that opted out of
+        // `getRouteWrapper`): the invokable itself is the target and receives
+        // only the live `@context` (plus the layout's `@outlet`).
         target = state.invokable;
       }
 
@@ -148,7 +158,7 @@ export const outletHelper = /*@__PURE__*/ internalHelper(
 
       outlet = curry(
         0 as CurriedComponent,
-        new OutletComponent(owner, state),
+        new OutletComponent(owner, state, OUTLET_COMPONENT_TEMPLATE),
         outletOwner,
         createCapturedArgs(named, EMPTY_POSITIONAL),
         true
@@ -167,9 +177,7 @@ function stateFor(
   let render = outlet.render;
   if (render === undefined) return null;
 
-  // There is nothing to render until we have an invokable. This is either the
-  // manager-driven invokable or a route template that `OutletView` upgraded
-  // from a legacy raw `template`.
+  // There is nothing to render until the manager provides an invokable.
   if (render.invokable === undefined) return null;
 
   return {
@@ -199,7 +207,6 @@ function isStable(
     return state.wrapper === lastState.wrapper && state.invokable === lastState.invokable;
   }
 
-  // Legacy `setOutletState` callers have no wrapper; key on the upgraded
-  // invokable and controller.
+  // Wrapper-less renders key on the invokable and controller.
   return state.invokable === lastState.invokable && state.controller === lastState.controller;
 }
diff --git a/packages/@ember/-internals/routing/route-managers/classic/wrapper.ts b/packages/@ember/-internals/routing/route-managers/classic/wrapper.ts
index f816d97d627..1e1b6aa04f7 100644
--- a/packages/@ember/-internals/routing/route-managers/classic/wrapper.ts
+++ b/packages/@ember/-internals/routing/route-managers/classic/wrapper.ts
@@ -18,14 +18,20 @@ import { setInternalComponentManager } from '@glimmer/manager/lib/internal/api';
 import { setComponentTemplate } from '@glimmer/manager/lib/public/template';
 import { NULL_REFERENCE } from '@glimmer/reference/lib/reference';
 import { precompileTemplate } from '@ember/template-compilation';
+import { outletHelper } from './outlet';
 
 // Renders the invokable passed in as `@Component` and forwards
 // `@model` / `@controller` onto it.
 const CLASSIC_WRAPPER_TEMPLATE = precompileTemplate(
-  `<@Component @model={{@context}} @controller={{@bucket.controller}} />`,
+  `<@Component @model={{@context}} @controller={{@bucket.controller}} @outlet={{(outlet)}}/>`,
   {
     moduleName: 'packages/@ember/-internals/routing/route-managers/classic/wrapper.hbs',
     strictMode: true,
+    scope() {
+      return {
+        outlet: outletHelper,
+      };
+    },
   }
 );
 
@@ -35,8 +41,6 @@ class ClassicRouteWrapperManager
     WithCustomDebugRenderTree<null, ClassicRouteWrapperDefinition>
 {
   getCapabilities(): InternalComponentCapabilities {
-    // Match templateOnlyComponent's capabilities: no element, no args capture,
-    // no instance state.
     return {
       dynamicLayout: false,
       dynamicTag: false,
@@ -45,7 +49,7 @@ class ClassicRouteWrapperManager
       attributeHook: false,
       elementHook: false,
       createCaller: false,
-      dynamicScope: false,
+      dynamicScope: true,
       updateHook: false,
       createInstance: false,
       wrapped: false,
diff --git a/packages/@ember/-internals/routing/route-managers/root-outlet.ts b/packages/@ember/-internals/routing/route-managers/root-outlet.ts
new file mode 100644
index 00000000000..3770e1f9bbe
--- /dev/null
+++ b/packages/@ember/-internals/routing/route-managers/root-outlet.ts
@@ -0,0 +1,203 @@
+/**
+  The component rendered at the very top of the application by
+  `Router#_setOutlets` (via `ApplicationInstance#renderRootComponent`).
+  Provides `outletState` via `dynamicScope` for child outlets.
+*/
+
+import type {
+  CustomRenderNode,
+  DynamicScope,
+  InternalComponentCapabilities,
+  InternalComponentManager,
+  WithCreateInstance,
+  WithCustomDebugRenderTree,
+} from '@glimmer/interfaces';
+import type { InternalOwner } from '@ember/-internals/owner';
+import type { Reference } from '@glimmer/reference/lib/reference';
+import { createConstRef, NULL_REFERENCE } from '@glimmer/reference/lib/reference';
+import { setInternalComponentManager } from '@glimmer/manager/lib/internal/api';
+import { setComponentTemplate } from '@glimmer/manager/lib/public/template';
+import { precompileTemplate } from '@ember/template-compilation';
+import { assert } from '@ember/debug';
+import type { OutletState } from '../../glimmer/lib/utils/outlet';
+import { outletHelper } from './classic/outlet';
+import { consumeTag } from '@glimmer/validator/lib/tracking';
+import { createTag, DIRTY_TAG as dirtyTag } from '@glimmer/validator/lib/validators';
+import { EMPTY_ARGS } from '@glimmer/runtime/lib/vm/arguments';
+
+const ROOT_OUTLET_TEMPLATE = precompileTemplate('{{component (outlet)}}', {
+  moduleName: 'packages/@ember/-internals/routing/route-managers/root-outlet.hbs',
+  strictMode: true,
+  scope() {
+    return {
+      outlet: outletHelper,
+    };
+  },
+});
+
+const CAPABILITIES: InternalComponentCapabilities = {
+  dynamicLayout: false,
+  dynamicTag: false,
+  prepareArgs: false,
+  createArgs: false,
+  attributeHook: false,
+  elementHook: false,
+  createCaller: false,
+  dynamicScope: true,
+  updateHook: false,
+  createInstance: true,
+  wrapped: false,
+  willDestroy: false,
+  hasSubOwner: false,
+};
+
+/**
+ * Classic components track their `parentView` through a `view` on `scope`
+ */
+interface ViewCarryingScope extends DynamicScope {
+  view?: unknown;
+  child(): ViewCarryingScope;
+}
+
+function carryParentView(scope: ViewCarryingScope): ViewCarryingScope {
+  if (!('view' in scope)) {
+    scope.view = null;
+  }
+
+  let child = scope.child.bind(scope);
+  scope.child = () => {
+    let next = child();
+    next.view = scope.view;
+    return carryParentView(next);
+  };
+
+  return scope;
+}
+
+/**
+ * The buckets identify the two synthetic debug-render-tree nodes the root
+ * outlet contributes (the top-level `{{outlet}}` and its `-top-level`
+ * route-template). They must be stable across the create/didRender passes, so
+ * they live on the component instance state.
+ */
+interface RootOutletState {
+  outletBucket: object;
+  routeTemplateBucket: object;
+}
+
+class RootOutletManager
+  implements
+    InternalComponentManager<RootOutletState, RootOutlet>,
+    WithCreateInstance<RootOutletState, RootOutlet>,
+    WithCustomDebugRenderTree<RootOutletState, RootOutlet>
+{
+  getCapabilities(): InternalComponentCapabilities {
+    return CAPABILITIES;
+  }
+
+  create(
+    _owner: object,
+    definition: RootOutlet,
+    _args: unknown,
+    _env: unknown,
+    dynamicScope: DynamicScope | null
+  ): RootOutletState {
+    assert('Expected the root outlet to be created with a dynamic scope', dynamicScope !== null);
+
+    carryParentView(dynamicScope as ViewCarryingScope);
+    dynamicScope.set('outletState', definition.stateRef);
+
+    return { outletBucket: {}, routeTemplateBucket: {} };
+  }
+
+  getDebugName(): string {
+    return '-top-level-outlet';
+  }
+
+  /**
+   * Emit the top-level frame the classic `OutletView` used to provide: an
+   * `{{outlet}}` node wrapping the `-top-level` route-template. These nest (so
+   * the application's own outlet renders beneath them) and both inherit the
+   * root outlet's bounds — matching the render tree Ember Inspector expects.
+   */
+  getDebugCustomRenderTree(_definition: RootOutlet, state: RootOutletState): CustomRenderNode[] {
+    return [
+      {
+        bucket: state.outletBucket,
+        type: 'outlet',
+        name: 'main',
+        args: EMPTY_ARGS,
+        instance: undefined,
+      },
+      {
+        bucket: state.routeTemplateBucket,
+        type: 'route-template',
+        name: '-top-level',
+        args: EMPTY_ARGS,
+        instance: undefined,
+      },
+    ];
+  }
+
+  getSelf(): Reference {
+    return NULL_REFERENCE;
+  }
+
+  didCreate() {}
+  didUpdate() {}
+  didRenderLayout() {}
+  didUpdateLayout() {}
+
+  getDestroyable(): null {
+    return null;
+  }
+}
+
+export class RootOutlet {
+  readonly stateRef: Reference<OutletState>;
+
+  constructor(state: UpdatableOutletRootState) {
+    this.stateRef = createConstRef(state.state, '-top-level');
+  }
+}
+
+export interface UpdatableOutletRootState {
+  state: OutletState;
+  set(root: OutletState): void;
+}
+
+export function createRootOutletState(
+  owner: InternalOwner,
+  initial: OutletState
+): UpdatableOutletRootState {
+  let tag = createTag();
+  let current = initial;
+
+  let state: OutletState = {
+    render: {
+      owner,
+      name: '-top-level',
+      controller: undefined,
+      model: undefined,
+      wrapper: undefined,
+      invokable: undefined,
+    },
+    outlets: {
+      get main(): OutletState {
+        consumeTag(tag);
+        return current;
+      },
+    },
+  };
+
+  return {
+    state,
+    set(root: OutletState) {
+      current = root;
+      dirtyTag(tag);
+    },
+  };
+}
+
+setInternalComponentManager(new RootOutletManager(), RootOutlet.prototype);
+setComponentTemplate(ROOT_OUTLET_TEMPLATE, RootOutlet.prototype);
diff --git a/packages/@ember/-internals/views/lib/system/event_dispatcher.ts b/packages/@ember/-internals/views/lib/system/event_dispatcher.ts
index afe9debd56e..1c1357cc3bd 100644
--- a/packages/@ember/-internals/views/lib/system/event_dispatcher.ts
+++ b/packages/@ember/-internals/views/lib/system/event_dispatcher.ts
@@ -4,7 +4,7 @@ import { get } from '@ember/-internals/metal/lib/property_get';
 import { set } from '@ember/-internals/metal/lib/property_set';
 import EmberObject from '@ember/object';
 import { getElementView } from './utils';
-import type { BootEnvironment } from '@ember/-internals/glimmer/lib/views/outlet';
+import type { BootEnvironment } from '@ember/engine/instance';
 import type Component from '@ember/-internals/glimmer/lib/component';
 
 /**
diff --git a/packages/@ember/application/index.ts b/packages/@ember/application/index.ts
index e4ac76f8de3..83e6f610979 100644
--- a/packages/@ember/application/index.ts
+++ b/packages/@ember/application/index.ts
@@ -252,7 +252,7 @@ class Application extends Engine {
     @default 'body'
     @public
   */
-  declare rootElement: SimpleElement | Element | string;
+  declare rootElement: SimpleElement | Element;
 
   /**
 
@@ -359,7 +359,7 @@ class Application extends Engine {
   init(properties: object | undefined) {
     super.init(properties);
 
-    this.rootElement ??= 'body';
+    this.rootElement ??= document.querySelector('body')!;
     this._document ??= null;
     this.eventDispatcher ??= null;
     this.customEvents ??= null;
diff --git a/packages/@ember/application/instance.ts b/packages/@ember/application/instance.ts
index 1bc600c172c..0f2ba49486a 100644
--- a/packages/@ember/application/instance.ts
+++ b/packages/@ember/application/instance.ts
@@ -7,11 +7,14 @@ import { set } from '@ember/-internals/metal/lib/property_set';
 // eslint-disable-next-line ember-local/no-barrel-imports
 import * as environment from '@ember/-internals/browser-environment';
 import EngineInstance from '@ember/engine/instance';
-import type { BootOptions } from '@ember/engine/instance';
+import type { BootEnvironment, BootOptions } from '@ember/engine/instance';
 import type Application from '@ember/application';
-import { renderSettled } from '@ember/-internals/glimmer/lib/renderer';
-import type { BootEnvironment } from '@ember/-internals/glimmer/lib/views/outlet';
-import type Component from '@ember/-internals/glimmer/lib/component';
+import {
+  renderComponent,
+  renderSettled,
+  setRenderer,
+} from '@ember/-internals/glimmer/lib/renderer';
+import type { BaseRenderer } from '@ember/-internals/glimmer/lib/renderer';
 import { assert } from '@ember/debug';
 import Router from '@ember/routing/router';
 import EventDispatcher from '@ember/-internals/views/lib/system/event_dispatcher';
@@ -59,7 +62,7 @@ class ApplicationInstance extends EngineInstance {
     @private
     @property {String|DOMElement} rootElement
   */
-  rootElement: string | Element | SimpleElement | null = null;
+  rootElement: Element | SimpleElement | null = null;
 
   declare customEvents: Record<string, string | null> | null;
 
@@ -101,10 +104,11 @@ class ApplicationInstance extends EngineInstance {
 
     this.setupRegistry(options);
 
-    if (options.rootElement) {
-      this.rootElement = options.rootElement;
+    let rootElement = options.rootElement ?? this.application.rootElement;
+    if (typeof rootElement === 'string') {
+      this.rootElement = document.querySelector(rootElement);
     } else {
-      this.rootElement = this.application.rootElement;
+      this.rootElement = rootElement;
     }
 
     if (options.location) {
@@ -138,21 +142,9 @@ class ApplicationInstance extends EngineInstance {
     return this._router;
   }
 
-  /**
-    This hook is called by the root-most Route (a.k.a. the ApplicationRoute)
-    when it has finished creating the root View. By default, we simply take the
-    view and append it to the `rootElement` specified on the Application.
-
-    In cases like FastBoot and testing, we can override this hook and implement
-    custom behavior, such as serializing to a string and sending over an HTTP
-    socket rather than appending to DOM.
-
-    @param view {Ember.View} the root-most view
-    @deprecated
-    @private
-  */
-  didCreateRootView(view: Component) {
-    view.appendTo(this.rootElement!);
+  renderRootComponent(component: object) {
+    setRenderer(this, this.lookup('renderer:-dom') as BaseRenderer);
+    renderComponent(component, { into: this.rootElement!, owner: this, appendIntoTarget: true });
   }
 
   /**
diff --git a/packages/@ember/application/tests/application_test.js b/packages/@ember/application/tests/application_test.js
index 6f7768df1b1..99863a037f4 100644
--- a/packages/@ember/application/tests/application_test.js
+++ b/packages/@ember/application/tests/application_test.js
@@ -142,9 +142,7 @@ moduleFor(
       verifyRegistration(assert, application, 'resolver-for-debugging:main');
       verifyRegistration(assert, application, 'container-debug-adapter:main');
 
-      verifyRegistration(assert, application, 'view:-outlet');
       verifyRegistration(assert, application, 'renderer:-dom');
-      verifyRegistration(assert, application, 'template:-outlet');
 
       assert.deepEqual(
         application.registeredOptionsForType('helper'),
diff --git a/packages/@ember/application/type-tests/index.test.ts b/packages/@ember/application/type-tests/index.test.ts
index ac786852da8..70878155e56 100644
--- a/packages/@ember/application/type-tests/index.test.ts
+++ b/packages/@ember/application/type-tests/index.test.ts
@@ -8,7 +8,7 @@ import { expectTypeOf } from 'expect-type';
 declare let owner: Owner;
 
 class App extends Application {
-  rootElement = '#ember-application';
+  rootElement = document.querySelector('#ember-application')!;
   customEvents = {
     mouseenter: null,
     paste: 'paste',
diff --git a/packages/@ember/engine/instance.ts b/packages/@ember/engine/instance.ts
index 050d27eb3b8..b49d1280121 100644
--- a/packages/@ember/engine/instance.ts
+++ b/packages/@ember/engine/instance.ts
@@ -15,7 +15,6 @@ import type Owner from '@ember/-internals/owner';
 import { type FullName, isFactory } from '@ember/-internals/owner';
 import type Engine from '@ember/engine';
 import type Application from '@ember/application';
-import type { BootEnvironment } from '@ember/-internals/glimmer/lib/views/outlet';
 import type { SimpleElement } from '@simple-dom/interface';
 
 export interface BootOptions {
@@ -29,6 +28,13 @@ export interface BootOptions {
   _renderMode?: string;
 }
 
+export interface BootEnvironment {
+  hasDOM: boolean;
+  isInteractive: boolean;
+  _renderMode?: string;
+  options: BootOptions;
+}
+
 export interface EngineInstanceOptions {
   mountPoint?: string;
   routable?: boolean;
diff --git a/packages/@ember/engine/tests/engine_test.js b/packages/@ember/engine/tests/engine_test.js
index 68c3039bbbe..142849f38fb 100644
--- a/packages/@ember/engine/tests/engine_test.js
+++ b/packages/@ember/engine/tests/engine_test.js
@@ -70,8 +70,6 @@ moduleFor(
       verifyRegistration(assert, engine, 'resolver-for-debugging:main');
       verifyRegistration(assert, engine, 'container-debug-adapter:main');
 
-      verifyRegistration(assert, engine, 'view:-outlet');
-      verifyRegistration(assert, engine, 'template:-outlet');
       assert.deepEqual(
         engine.registeredOptionsForType('helper'),
         { instantiate: false },
diff --git a/packages/@ember/engine/tests/resolver/registry_test.ts b/packages/@ember/engine/tests/resolver/registry_test.ts
index a2631ade345..ed61fde0d95 100644
--- a/packages/@ember/engine/tests/resolver/registry_test.ts
+++ b/packages/@ember/engine/tests/resolver/registry_test.ts
@@ -29,7 +29,7 @@ module('strict-resolver | Application with modules', function (hooks) {
 
     app = Application.create({
       modules: {},
-      rootElement: '#qunit-fixture',
+      rootElement: document.querySelector('#qunit-fixture')!,
       autoboot: false,
     });
 
@@ -51,7 +51,7 @@ module('strict-resolver | Application with modules', function (hooks) {
       modules: {
         './services/my-thing': { default: MyService },
       },
-      rootElement: '#qunit-fixture',
+      rootElement: document.querySelector('#qunit-fixture')!,
       autoboot: false,
     });
 
diff --git a/packages/@ember/routing/route.ts b/packages/@ember/routing/route.ts
index cd9751378fd..1d2497145df 100644
--- a/packages/@ember/routing/route.ts
+++ b/packages/@ember/routing/route.ts
@@ -295,7 +295,6 @@ class Route<Model = unknown> extends EmberObject.extend(ActionHandler, Evented)
   private _names: unknown;
 
   _router!: EmberRouter;
-  declare _topLevelViewTemplate: any;
 
   constructor(owner?: Owner) {
     super(owner);
@@ -305,7 +304,6 @@ class Route<Model = unknown> extends EmberObject.extend(ActionHandler, Evented)
       let bucketCache = owner.lookup(P`-bucket-cache:main`);
       this._router = router as EmberRouter;
       this._bucketCache = bucketCache as BucketCache;
-      this._topLevelViewTemplate = owner.lookup('template:-outlet');
     }
   }
 
diff --git a/packages/@ember/routing/router.ts b/packages/@ember/routing/router.ts
index 23a2e0f30aa..22d45b89ad6 100644
--- a/packages/@ember/routing/router.ts
+++ b/packages/@ember/routing/router.ts
@@ -1,13 +1,9 @@
 import { privatize as P } from '@ember/-internals/container/lib/registry';
-import type {
-  BootEnvironment,
-  default as OutletView,
-} from '@ember/-internals/glimmer/lib/views/outlet';
+import type { BootEnvironment } from '@ember/engine/instance';
 import type { OutletState } from '@ember/-internals/glimmer/lib/utils/outlet';
 import computed from '@ember/-internals/metal/lib/computed';
 import { get } from '@ember/-internals/metal/lib/property_get';
 import { set } from '@ember/-internals/metal/lib/property_set';
-import type { FactoryManager } from '@ember/-internals/owner';
 import type Owner from '@ember/owner';
 import { getOwner } from '@ember/owner';
 import { getRouteManager } from '@ember/-internals/routing/route-managers/registry';
@@ -65,8 +61,12 @@ import Router, {
 import EngineInstance from '@ember/engine/instance';
 import type { QueryParams } from 'route-recognizer';
 import type { AnyFn, MethodNamesOf, OmitFirst } from '@ember/-internals/utility-types';
-import type { Template } from '@glimmer/interfaces';
 import type ApplicationInstance from '@ember/application/instance';
+import {
+  RootOutlet,
+  type UpdatableOutletRootState,
+  createRootOutletState,
+} from '@ember/-internals/routing/route-managers/root-outlet';
 
 /**
 @module @ember/routing/router
@@ -187,7 +187,7 @@ class EmberRouter extends EmberObject.extend(Evented) implements Evented {
   _queuedQPChanges: Record<string, unknown> = {};
 
   _bucketCache: BucketCache;
-  _toplevelView: OutletView | null = null;
+  _updatableRootOutletState: UpdatableOutletRootState | null = null;
   _handledErrors = new Set();
   _engineInstances: Record<string, Record<string, EngineInstance>> = Object.create(null);
   _engineInfoByRoute = Object.create(null);
@@ -722,7 +722,7 @@ class EmberRouter extends EmberObject.extend(Evented) implements Evented {
   _setOutlets() {
     // This is triggered async during Route#willDestroy.
     // If the router is also being destroyed we do not want to
-    // to create another this._toplevelView (and leak the renderer)
+    // render another root outlet (and leak the renderer)
     if (this.isDestroying || this.isDestroyed) {
       return;
     }
@@ -775,38 +775,22 @@ class EmberRouter extends EmberObject.extend(Evented) implements Evented {
       return;
     }
 
-    if (!this._toplevelView) {
+    if (this._updatableRootOutletState) {
+      this._updatableRootOutletState.set(root);
+    } else {
       let owner = getOwner(this);
       assert('Router is unexpectedly missing an owner', owner);
 
-      // SAFETY: we don't presently have any type registries internally to make
-      // this safe, so in each of these cases we assume that nothing *else* is
-      // registered at this `FullName`, and simply check to make sure that
-      // *something* is.
-      let OutletView = owner.factoryFor('view:-outlet') as FactoryManager<OutletView> | undefined;
-      assert('[BUG] unexpectedly missing `view:-outlet`', OutletView !== undefined);
-
       let application = owner.lookup('application:main') as Owner | undefined;
       assert('[BUG] unexpectedly missing `application:-main`', application !== undefined);
 
       assert('[BUG] unexpectedly missing `-environment:main`', environment !== undefined);
 
-      let template = owner.lookup('template:-outlet') as Template | undefined;
-      assert('[BUG] unexpectedly missing `template:-outlet`', template !== undefined);
-
-      this._toplevelView = OutletView.create({ environment, template, application });
-      this._toplevelView.setOutletState(root);
-
-      // `Router Service - non application test:  RouterService#transitionTo with basic route`
       let instance = owner.lookup('-application-instance:main') as ApplicationInstance;
       assert('[BUG] unexpectedly missing `-application-instance:main`', instance !== undefined);
 
-      // SAFETY: LOL. This is calling a deprecated API with a type that we
-      // cannot actually confirm at a type level *is* a `ViewMixin`. Seems:
-      // not great on multiple fronts!
-      instance.didCreateRootView(this._toplevelView as any);
-    } else {
-      this._toplevelView.setOutletState(root);
+      this._updatableRootOutletState = createRootOutletState(owner, root);
+      instance.renderRootComponent(new RootOutlet(this._updatableRootOutletState));
     }
   }
 
@@ -965,10 +949,7 @@ class EmberRouter extends EmberObject.extend(Evented) implements Evented {
     // renderer.
     (this._routerMicrolib as { cancelPendingOutletUpdate?(): void })?.cancelPendingOutletUpdate?.();
 
-    if (this._toplevelView) {
-      this._toplevelView.destroy();
-      this._toplevelView = null;
-    }
+    this._updatableRootOutletState = null;
 
     super.willDestroy();
 
diff --git a/packages/@ember/template-compiler/lib/plugins/transform-wrap-mount-and-outlet.ts b/packages/@ember/template-compiler/lib/plugins/transform-wrap-mount-and-outlet.ts
index ac9bf4bd17a..513a7a3cec4 100644
--- a/packages/@ember/template-compiler/lib/plugins/transform-wrap-mount-and-outlet.ts
+++ b/packages/@ember/template-compiler/lib/plugins/transform-wrap-mount-and-outlet.ts
@@ -29,11 +29,11 @@ import { isPath, trackLocals } from './utils';
   with
 
   ```handlebars
-  {{component (-outlet)}}
+  <@outlet />
   ```
 
   @private
-  @class TransformHasBlockSyntax
+  @class TransformWrapMountAndOutlet
 */
 export default function transformWrapMountAndOutlet(env: EmberASTPluginEnvironment): ASTPlugin {
   let { builders: b } = env.syntax;
@@ -47,20 +47,22 @@ export default function transformWrapMountAndOutlet(env: EmberASTPluginEnvironme
       ...visitor,
 
       MustacheStatement(node: AST.MustacheStatement): AST.Node | void {
-        if (
-          isPath(node.path) &&
-          (node.path.original === 'mount' || node.path.original === 'outlet') &&
-          !hasLocal(node.path.original)
-        ) {
-          let subexpression = b.sexpr(
-            b.path(`-${node.path.original}`),
-            node.params,
-            node.hash,
-            node.loc
-          );
+        if (!isPath(node.path) || hasLocal(node.path.original)) {
+          return;
+        }
+
+        if (node.path.original === 'mount') {
+          let subexpression = b.sexpr(b.path('-mount'), node.params, node.hash, node.loc);
 
           return b.mustache(b.path('component'), [subexpression], b.hash(), undefined, node.loc);
         }
+
+        if (node.path.original === 'outlet') {
+          return b.element(
+            { path: b.fullPath(b.at('@outlet')), selfClosing: true },
+            { loc: node.loc }
+          );
+        }
       },
     },
   };
diff --git a/packages/ember/tests/application_lifecycle_test.js b/packages/ember/tests/application_lifecycle_test.js
index a13133e51a1..bd2698ab7df 100644
--- a/packages/ember/tests/application_lifecycle_test.js
+++ b/packages/ember/tests/application_lifecycle_test.js
@@ -101,9 +101,7 @@ moduleFor(
       return application;
     }
 
-    [`@test Destroying a route after the router does create an undestroyed 'toplevelView'`](
-      assert
-    ) {
+    [`@test Destroying a route after the router does not re-render the root outlet`](assert) {
       runTask(() => {
         this.createApplication();
         this.add('template:index', precompileTemplate(`Index!`));
@@ -114,13 +112,13 @@ moduleFor(
       let route = this.applicationInstance.lookup('route:index');
 
       runTask(() => router.destroy());
-      assert.equal(router._toplevelView, null, 'the toplevelView was cleared');
+      assert.equal(router._updatableRootOutletState, null, 'the root outlet state was cleared');
 
       runTask(() => route.destroy());
-      assert.equal(router._toplevelView, null, 'the toplevelView was not reinitialized');
+      assert.equal(router._updatableRootOutletState, null, 'the root outlet was not re-rendered');
 
       runTask(() => this.application.destroy());
-      assert.equal(router._toplevelView, null, 'the toplevelView was not reinitialized');
+      assert.equal(router._updatableRootOutletState, null, 'the root outlet was not re-rendered');
     }
 
     [`@test initializers can augment an applications customEvents hash`](assert) {
diff --git a/packages/ember/tests/ember-test-helpers-test.js b/packages/ember/tests/ember-test-helpers-test.js
deleted file mode 100644
index 567bae2dcca..00000000000
--- a/packages/ember/tests/ember-test-helpers-test.js
+++ /dev/null
@@ -1,137 +0,0 @@
-import { Promise } from 'rsvp';
-import Application from '@ember/application';
-import { run, _hasScheduledTimers, _getCurrentRunLoop } from '@ember/runloop';
-import { precompileTemplate } from '@ember/template-compilation';
-import { ModuleBasedTestResolver } from 'internal-test-helpers';
-
-const { module, test } = QUnit;
-
-/*
-  This test file is intended to emulate what @ember/test-helpers does, and
-  should be considered a "smoke test" of when a given change will break
-  existing versions of @ember/test-helpers.
-
-  This generally means that we will have to represent multiple versions of
-  `@ember/test-helpers` here (will make a nested module for each significant
-  revision).
-*/
-module('@ember/test-helpers emulation test', function () {
-  module('v1.6.1', function () {
-    let EMPTY_TEMPLATE = precompileTemplate('');
-
-    function lookupTemplate(owner, templateFullName) {
-      let template = owner.lookup(templateFullName);
-      if (typeof template === 'function') return template(owner);
-      return template;
-    }
-
-    function settled() {
-      return new Promise(function (resolve) {
-        let watcher = setInterval(() => {
-          if (_getCurrentRunLoop() || _hasScheduledTimers()) {
-            return;
-          }
-
-          // Stop polling
-          clearInterval(watcher);
-
-          // Synchronously resolve the promise
-          run(null, resolve);
-        }, 10);
-      });
-    }
-
-    async function setupContext(context) {
-      // condensed version of https://github.com/emberjs/ember-test-helpers/blob/v1.6.0/addon-test-support/%40ember/test-helpers/build-owner.ts#L38
-      // without support for "custom resolver"
-      await context.application.boot();
-
-      context.owner = await context.application.buildInstance().boot();
-    }
-
-    function setupRenderingContext(context) {
-      let { owner } = context;
-      let OutletView = owner.factoryFor('view:-outlet');
-      let environment = owner.lookup('-environment:main');
-      let outletTemplateFactory = owner.lookup('template:-outlet');
-      let toplevelView = OutletView.create({ environment, template: outletTemplateFactory });
-
-      owner.register('-top-level-view:main', {
-        create() {
-          return toplevelView;
-        },
-      });
-
-      // initially render a simple empty template
-      return render(EMPTY_TEMPLATE, context).then(() => {
-        let rootElement = document.querySelector(owner.rootElement);
-        run(toplevelView, 'appendTo', rootElement);
-
-        context.element = rootElement;
-
-        return settled();
-      });
-    }
-
-    let templateId = 0;
-    function render(template, context) {
-      let { owner } = context;
-      let toplevelView = owner.lookup('-top-level-view:main');
-      let OutletTemplate = lookupTemplate(owner, 'template:-outlet');
-      templateId += 1;
-      let templateFullName = `template:-undertest-${templateId}`;
-      owner.register(templateFullName, template);
-
-      let outletState = {
-        render: {
-          owner,
-          name: 'application',
-          controller: undefined,
-          ViewClass: undefined,
-          template: OutletTemplate,
-        },
-
-        outlets: {
-          main: {
-            render: {
-              owner,
-              name: 'index',
-              controller: context,
-              ViewClass: undefined,
-              template: lookupTemplate(owner, templateFullName),
-              outlets: {},
-            },
-            outlets: {},
-          },
-        },
-      };
-      toplevelView.setOutletState(outletState);
-
-      return settled();
-    }
-
-    module('setupRenderingContext', function (hooks) {
-      hooks.beforeEach(async function () {
-        this.application = Application.create({
-          rootElement: '#qunit-fixture',
-          autoboot: false,
-          Resolver: ModuleBasedTestResolver,
-        });
-
-        await setupContext(this);
-        await setupRenderingContext(this);
-      });
-
-      hooks.afterEach(function () {
-        run(this.owner, 'destroy');
-        run(this.application, 'destroy');
-      });
-
-      test('it basically works', async function (assert) {
-        await render(precompileTemplate('Hi!'), this);
-
-        assert.equal(this.element.textContent, 'Hi!');
-      });
-    });
-  });
-});
diff --git a/packages/ember/tests/routing/decoupled_basic_test.js b/packages/ember/tests/routing/decoupled_basic_test.js
index 0b81cb807ed..8870b502ef1 100644
--- a/packages/ember/tests/routing/decoupled_basic_test.js
+++ b/packages/ember/tests/routing/decoupled_basic_test.js
@@ -1559,13 +1559,21 @@ moduleFor(
           let router = this.applicationInstance.lookup('router:main');
 
           run(router, 'destroy');
-          assert.equal(router._toplevelView, null, 'the toplevelView was cleared');
+          assert.equal(router._updatableRootOutletState, null, 'the root outlet state was cleared');
 
           run(route, 'destroy');
-          assert.equal(router._toplevelView, null, 'the toplevelView was not reinitialized');
+          assert.equal(
+            router._updatableRootOutletState,
+            null,
+            'the root outlet was not re-rendered'
+          );
 
           run(this.applicationInstance, 'destroy');
-          assert.equal(router._toplevelView, null, 'the toplevelView was not reinitialized');
+          assert.equal(
+            router._updatableRootOutletState,
+            null,
+            'the root outlet was not re-rendered'
+          );
         });
     }
 
diff --git a/packages/internal-test-helpers/lib/test-cases/abstract-application.ts b/packages/internal-test-helpers/lib/test-cases/abstract-application.ts
index 22aab84ef10..9431f3ad940 100644
--- a/packages/internal-test-helpers/lib/test-cases/abstract-application.ts
+++ b/packages/internal-test-helpers/lib/test-cases/abstract-application.ts
@@ -65,7 +65,7 @@ export default abstract class AbstractApplicationTestCase extends AbstractTestCa
 
   get applicationOptions() {
     return {
-      rootElement: '#qunit-fixture',
+      rootElement: document.querySelector('#qunit-fixture')!,
     };
   }
 
diff --git a/packages/internal-test-helpers/lib/test-cases/router-non-application.ts b/packages/internal-test-helpers/lib/test-cases/router-non-application.ts
index 16e882935c7..0a96b41b6fd 100644
--- a/packages/internal-test-helpers/lib/test-cases/router-non-application.ts
+++ b/packages/internal-test-helpers/lib/test-cases/router-non-application.ts
@@ -3,7 +3,7 @@ import compile from '../compile';
 import { EventDispatcher } from '@ember/-internals/views';
 import type { Renderer } from '@ember/-internals/glimmer';
 import Component from '@ember/component';
-import { _resetRenderers } from '@ember/-internals/glimmer';
+import { _resetRenderers, renderComponent, setRenderer } from '@ember/-internals/glimmer';
 import type Resolver from '../test-resolver';
 import { ModuleBasedResolver } from '../test-resolver';
 
@@ -37,9 +37,13 @@ export default class RouterNonApplicationTestCase extends AbstractTestCase {
     // This is a bit of a hack, but we need to register an application instance
     // so that the router can look it up. In the future, we should probably
     // make this a real application instance, or at least a real engine instance.
+    // `_setOutlets` renders the root outlet through `renderRootComponent`, so we
+    // mirror `ApplicationInstance#renderRootComponent` (seed `renderer:-dom` as
+    // the owner's renderer, then render into the fixture element).
     let appInstance = {
-      didCreateRootView: (view: any) => {
-        view.appendTo(this.element);
+      renderRootComponent: (component: object) => {
+        setRenderer(owner, this.renderer);
+        renderComponent(component, { into: this.element, owner, appendIntoTarget: true });
       },
     };
     owner.register('-application-instance:main', appInstance, { instantiate: false });
diff --git a/type-tests/@ember/application-test/application.ts b/type-tests/@ember/application-test/application.ts
index eaf28975645..ffc69691505 100755
--- a/type-tests/@ember/application-test/application.ts
+++ b/type-tests/@ember/application-test/application.ts
@@ -26,14 +26,14 @@ BaseApp.instanceInitializer({
 });
 
 const App1 = BaseApp.create({
-  rootElement: '#app-one',
+  rootElement: document.querySelector('#app-one')!,
   customEvents: {
     paste: 'paste',
   },
 });
 
 const App2 = BaseApp.create({
-  rootElement: '#app-two',
+  rootElement: document.querySelector('#app-two')!,
   customEvents: {
     mouseenter: null,
     mouseleave: null,
diff --git a/type-tests/ember/application.ts b/type-tests/ember/application.ts
index b4f408e5254..72db1db8073 100755
--- a/type-tests/ember/application.ts
+++ b/type-tests/ember/application.ts
@@ -22,14 +22,14 @@ BaseApp.instanceInitializer({
 });
 
 const App1 = BaseApp.create({
-  rootElement: '#app-one',
+  rootElement: document.querySelector('#app-one')!,
   customEvents: {
     paste: 'paste',
   },
 });
 
 const App2 = BaseApp.create({
-  rootElement: '#app-two',
+  rootElement: document.querySelector('#app-two')!,
   customEvents: {
     mouseenter: null,
     mouseleave: null,
diff --git a/type-tests/ember/ember-tests.ts b/type-tests/ember/ember-tests.ts
index 0bc0f08b4f5..b3731f1aab0 100755
--- a/type-tests/ember/ember-tests.ts
+++ b/type-tests/ember/ember-tests.ts
@@ -91,7 +91,7 @@ todos.pushObject(todo);
 App.todosController.get('remaining');
 
 const NormalApp = Application.create({
-  rootElement: '#sidebar',
+  rootElement: document.querySelector('#sidebar')!,
 });
 
 class Person2 extends EmberObject {