diff --git a/packages/@ember/-internals/glimmer/lib/renderer.ts b/packages/@ember/-internals/glimmer/lib/renderer.ts
index f2a216bd8a5..895f5580425 100644
--- a/packages/@ember/-internals/glimmer/lib/renderer.ts
+++ b/packages/@ember/-internals/glimmer/lib/renderer.ts
@@ -6,20 +6,26 @@ import { guidFor } from '@ember/-internals/utils';
 import { getViewElement, getViewId } from '@ember/-internals/views';
 import { assert } from '@ember/debug';
 import { _backburner, _getCurrentRunLoop } from '@ember/runloop';
-import { destroy } from '@glimmer/destroyable';
+import {
+  associateDestroyableChild,
+  destroy,
+  isDestroyed,
+  registerDestructor,
+} from '@glimmer/destroyable';
 import { DEBUG } from '@glimmer/env';
 import type {
   Bounds,
   Cursor,
   DebugRenderTree,
-  DynamicScope as GlimmerDynamicScope,
   Environment,
-  RenderResult,
+  DynamicScope as GlimmerDynamicScope,
+  RenderResult as GlimmerRenderResult,
   Template,
   TemplateFactory,
   EvaluationContext,
   CurriedComponent,
   TreeBuilder,
+  ClassicResolver,
 } from '@glimmer/interfaces';
 
 import type { Nullable } from '@ember/-internals/utility-types';
@@ -33,6 +39,7 @@ import {
   curry,
   EMPTY_POSITIONAL,
   inTransaction,
+  renderComponent as glimmerRenderComponent,
   renderMain,
   runtimeOptions,
 } from '@glimmer/runtime';
@@ -42,10 +49,13 @@ import { CURRENT_TAG, validateTag, valueForTag } from '@glimmer/validator';
 import type { SimpleDocument, SimpleElement, SimpleNode } from '@simple-dom/interface';
 import RSVP from 'rsvp';
 import type Component from './component';
+import { hasDOM } from '../../browser-environment';
+import type ClassicComponent from './component';
 import { BOUNDS } from './component-managers/curly';
 import { createRootOutlet } from './component-managers/outlet';
 import { RootComponentDefinition } from './component-managers/root';
 import { EmberEnvironmentDelegate } from './environment';
+import { StrictResolver } from './renderer/strict-resolver';
 import ResolverImpl from './resolver';
 import type { OutletState } from './utils/outlet';
 import OutletView from './views/outlet';
@@ -123,9 +133,62 @@ function errorLoopTransaction(fn: () => void) {
   }
 }
 
-class RootState {
+type RootState = ClassicRootState | ComponentRootState;
+
+class ComponentRootState {
+  readonly type = 'component';
+
+  #result: GlimmerRenderResult | undefined;
+  #render: () => void;
+
+  constructor(
+    state: RendererState,
+    definition: object,
+    options: { into: Cursor; args?: Record<string, unknown> }
+  ) {
+    this.#render = errorLoopTransaction(() => {
+      let iterator = glimmerRenderComponent(
+        state.context,
+        state.builder(state.env, options.into),
+        state.owner,
+        definition,
+        options?.args
+      );
+
+      let result = (this.#result = iterator.sync());
+
+      associateDestroyableChild(this, this.#result);
+
+      // override .render function after initial render
+      this.#render = errorLoopTransaction(() => result.rerender({ alwaysRevalidate: false }));
+    });
+  }
+
+  isFor(_component: ClassicComponent): boolean {
+    return false;
+  }
+
+  render(): void {
+    this.#render();
+  }
+
+  destroy(): void {
+    destroy(this);
+  }
+
+  get destroyed(): boolean {
+    return isDestroyed(this);
+  }
+
+  get result(): GlimmerRenderResult | undefined {
+    return this.#result;
+  }
+}
+
+class ClassicRootState {
+  readonly type = 'classic';
   public id: string;
-  public result: RenderResult | undefined;
+  public result: GlimmerRenderResult | undefined;
   public destroyed: boolean;
   public render: () => void;
   readonly env: Environment;
@@ -133,7 +196,7 @@ class RootState {
   constructor(
     public root: Component | OutletView,
     context: EvaluationContext,
-    owner: InternalOwner,
+    owner: object,
     template: Template,
     self: Reference<unknown>,
     parentElement: SimpleElement,
@@ -199,18 +262,18 @@ class RootState {
   }
 }
 
-const renderers: Renderer[] = [];
+const renderers: BaseRenderer[] = [];
 
 export function _resetRenderers() {
   renderers.length = 0;
 }
 
-function register(renderer: Renderer): void {
+function register(renderer: BaseRenderer): void {
   assert('Cannot register the same renderer twice', renderers.indexOf(renderer) === -1);
   renderers.push(renderer);
 }
 
-function deregister(renderer: Renderer): void {
+function deregister(renderer: BaseRenderer): void {
   let index = renderers.indexOf(renderer);
   assert('Cannot deregister unknown unregistered renderer', index !== -1);
   renderers.splice(index, 1);
@@ -218,7 +281,7 @@ function deregister(renderer: Renderer): void {
 
 function loopBegin(): void {
   for (let renderer of renderers) {
-    renderer._scheduleRevalidate();
+    renderer.rerender();
   }
 }
 
@@ -258,7 +321,7 @@ function resolveRenderPromise() {
 let loops = 0;
 function loopEnd() {
   for (let renderer of renderers) {
-    if (!renderer._isValid()) {
+    if (!renderer.isValid()) {
       if (loops > ENV._RERENDER_LOOP_LIMIT) {
         loops = 0;
         // TODO: do something better
@@ -280,73 +343,379 @@ interface ViewRegistry {
   [viewId: string]: unknown;
 }
 
-export class Renderer {
-  private _rootTemplate: Template;
-  private _viewRegistry: ViewRegistry;
-  private _roots: RootState[];
-  private _removedRoots: RootState[];
-  private _builder: IBuilder;
-  private _inRenderTransaction = false;
+type Resolver = ClassicResolver | StrictResolver;
 
-  private _owner: InternalOwner;
-  private _context: EvaluationContext;
+interface RendererData {
+  owner: object;
+  context: EvaluationContext;
+  builder: IBuilder;
+}
 
-  private _lastRevision = -1;
-  private _destroyed = false;
+export class RendererState {
+  static create(data: RendererData, renderer: BaseRenderer): RendererState {
+    const state = new RendererState(data, renderer);
+    associateDestroyableChild(renderer, state);
+    return state;
+  }
 
-  /** @internal */
-  _isInteractive: boolean;
+  readonly #data: RendererData;
+  #lastRevision = -1;
+  #inRenderTransaction = false;
+  #destroyed = false;
+  #roots: RootState[] = [];
+  #removedRoots: RootState[] = [];
 
-  readonly _runtimeResolver: ResolverImpl;
-  readonly env: Environment;
+  private constructor(data: RendererData, renderer: BaseRenderer) {
+    this.#data = data;
 
-  static create(props: { _viewRegistry: any }): Renderer {
-    let { _viewRegistry } = props;
-    let owner = getOwner(props);
-    assert('Renderer is unexpectedly missing an owner', owner);
-    let document = owner.lookup('service:-document') as SimpleDocument;
-    let env = owner.lookup('-environment:main') as {
-      isInteractive: boolean;
-      hasDOM: boolean;
+    registerDestructor(this, () => {
+      this.clearAllRoots(renderer);
+    });
+  }
+
+  get debug() {
+    return {
+      roots: this.#roots,
+      inRenderTransaction: this.#inRenderTransaction,
+      isInteractive: this.isInteractive,
     };
-    let rootTemplate = owner.lookup(P`template:-root`) as TemplateFactory;
-    let builder = owner.lookup('service:-dom-builder') as IBuilder;
-    return new this(owner, document, env, rootTemplate, _viewRegistry, builder);
   }
 
+  get roots() {
+    return this.#roots;
+  }
+
+  get owner(): object {
+    return this.#data.owner;
+  }
+
+  get builder(): IBuilder {
+    return this.#data.builder;
+  }
+
+  get context(): EvaluationContext {
+    return this.#data.context;
+  }
+
+  get env(): Environment {
+    return this.context.env;
+  }
+
+  get isInteractive(): boolean {
+    return this.#data.context.env.isInteractive;
+  }
+
+  renderRoot(root: RootState, renderer: BaseRenderer): RootState {
+    let roots = this.#roots;
+
+    roots.push(root);
+    associateDestroyableChild(this, root);
+
+    if (roots.length === 1) {
+      register(renderer);
+    }
+
+    this.#renderRootsTransaction(renderer);
+
+    return root;
+  }
+
+  #renderRootsTransaction(renderer: BaseRenderer): void {
+    if (this.#inRenderTransaction) {
+      // currently rendering roots, a new root was added and will
+      // be processed by the existing _renderRoots invocation
+      return;
+    }
+
+    // used to prevent calling _renderRoots again (see above)
+    // while we are actively rendering roots
+    this.#inRenderTransaction = true;
+
+    let completedWithoutError = false;
+    try {
+      this.renderRoots(renderer);
+      completedWithoutError = true;
+    } finally {
+      if (!completedWithoutError) {
+        this.#lastRevision = valueForTag(CURRENT_TAG);
+      }
+      this.#inRenderTransaction = false;
+    }
+  }
+
+  renderRoots(renderer: BaseRenderer): void {
+    let roots = this.#roots;
+    let removedRoots = this.#removedRoots;
+    let initialRootsLength: number;
+
+    do {
+      initialRootsLength = roots.length;
+
+      inTransaction(this.context.env, () => {
+        // ensure that for the first iteration of the loop
+        // each root is processed
+        for (let i = 0; i < roots.length; i++) {
+          let root = roots[i];
+          assert('has root', root);
+
+          if (root.destroyed) {
+            // add to the list of roots to be removed
+            // they will be removed from `this._roots` later
+            removedRoots.push(root);
+
+            // skip over roots that have been marked as destroyed
+            continue;
+          }
+
+          // when processing non-initial reflush loops,
+          // do not process more roots than needed
+          if (i >= initialRootsLength) {
+            continue;
+          }
+
+          root.render();
+        }
+
+        this.#lastRevision = valueForTag(CURRENT_TAG);
+      });
+    } while (roots.length > initialRootsLength);
+
+    // remove any roots that were destroyed during this transaction
+    while (removedRoots.length) {
+      let root = removedRoots.pop();
+
+      let rootIndex = roots.indexOf(root!);
+      roots.splice(rootIndex, 1);
+    }
+
+    if (this.#roots.length === 0) {
+      deregister(renderer);
+    }
+  }
+
+  scheduleRevalidate(renderer: BaseRenderer): void {
+    _backburner.scheduleOnce('render', this, this.revalidate, renderer);
+  }
+
+  isValid(): boolean {
+    return (
+      this.#destroyed || this.#roots.length === 0 || validateTag(CURRENT_TAG, this.#lastRevision)
+    );
+  }
+
+  revalidate(renderer: BaseRenderer): void {
+    if (this.isValid()) {
+      return;
+    }
+    this.#renderRootsTransaction(renderer);
+  }
+
+  clearAllRoots(renderer: BaseRenderer): void {
+    let roots = this.#roots;
+    for (let root of roots) {
+      destroy(root);
+    }
+
+    this.#removedRoots.length = 0;
+    this.#roots = [];
+
+    // if roots were present before destroying
+    // deregister this renderer instance
+    if (roots.length) {
+      deregister(renderer);
+    }
+  }
+}
+
+type IntoTarget = Cursor | Element | SimpleElement;
+
+/**
+ * The returned object from `renderComponent`
+ * @public
+ * @module @ember/renderer
+ */
+export interface RenderResult {
+  /**
+   * Destroys the render tree and removes all rendered content from the element rendered into
+   */
+  destroy(): void;
+}
+
+function intoTarget(into: IntoTarget): Cursor {
+  if ('element' in into) {
+    return into;
+  } else {
+    return { element: into as SimpleElement, nextSibling: null };
+  }
+}
+
+/**
+ * Render a component into DOM element.
+ *
+ * @method renderComponent
+ * @static
+ * @for @ember/renderer
+ * @param {Object} component The component to render.
+ * @param {Object} options
+ * @param {Element} options.into Where to render the component in to.
+ * @param {Object} [options.owner] Optionally specify the owner to use. This will be used for injections, and overall cleanup.
+ * @param {Object} [options.env] Optional renderer configuration
+ * @param {Object} [options.args] Optionally pass args in to the component. These may be reactive as long as it is an object or object-like
+ * @public
+ */
+export function renderComponent(
+  /**
+   * The component definition to render.
+   *
+   * Any component that has had its manager registered is valid.
+   * For the component-types that ship with ember, manager registration
+   * does not need to be worried about.
+   */
+  component: object,
+  {
+    owner = {},
+    env,
+    into,
+    args,
+  }: {
+    /**
+     * The element to render the component in to.
+     */
+    into: IntoTarget;
+
+    /**
+     * 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.
+     */
+    owner?: object;
+    /**
+     * Optionally configure the rendering environment
+     */
+    env?: {
+      /**
+       * When false, modifiers will not run.
+       */
+      isInteractive?: boolean;
+      /**
+       * All other options are forwarded to the underlying renderer.
+       * (its API is currently private and out of scope for this RFC,
+       *  so passing additional things here is also considered private API)
+       */
+      [rendererOption: string]: unknown;
+    };
+
+    /**
+     * These args get passed to the rendered component
+     *
+     * If your args are reactive, re-rendering will happen automatically.
+     *
+     */
+    args?: Record<string, unknown>;
+  }
+): RenderResult {
+  /**
+   * SAFETY: we should figure out what we need out of a `document` and narrow the API.
+   *         this exercise should also end up beginning to define what we need for CLI rendering (or to other outputs)
+   */
+  let document =
+    env && 'document' in env
+      ? (env?.['document'] as SimpleDocument | Document)
+      : globalThis.document;
+  let renderer = BaseRenderer.strict(owner, document, {
+    ...env,
+    isInteractive: env?.isInteractive ?? true,
+    hasDOM: env && 'hasDOM' in env ? Boolean(env?.['hasDOM']) : true,
+  });
+
+  /**
+   * Replace all contents, if we've rendered multiple times.
+   *
+   * https://github.com/emberjs/rfcs/pull/1099/files#diff-2b962105b9083ca84579cdc957f27f49407440f3c5078083fa369ec18cc46da8R365
+   *
+   * We could later add an option to not do this behavior
+   *
+   * NOTE: destruction is async
+   */
+  let existing = RENDER_CACHE.get(into);
+  existing?.destroy();
+  /**
+   * We can only replace the inner HTML the first time.
+   * 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) {
+    into.innerHTML = '';
+  }
+
+  let innerResult = renderer.render(component, { into, args }).result;
+
+  let result = {
+    destroy() {
+      if (innerResult) {
+        destroy(innerResult);
+      }
+    },
+  };
+
+  RENDER_CACHE.set(into, result);
+
+  return result;
+}
+
+const RENDER_CACHE = new WeakMap<IntoTarget, RenderResult>();
+
+export class BaseRenderer {
+  static strict(
+    owner: object,
+    document: SimpleDocument | Document,
+    options: { isInteractive: boolean; hasDOM?: boolean }
+  ) {
+    return new BaseRenderer(
+      owner,
+      { hasDOM: hasDOM, ...options },
+      document as SimpleDocument,
+      new StrictResolver(),
+      clientBuilder
+    );
+  }
+
+  readonly state: RendererState;
+
   constructor(
-    owner: InternalOwner,
-    document: SimpleDocument,
+    owner: object,
     envOptions: { isInteractive: boolean; hasDOM: boolean },
-    rootTemplate: TemplateFactory,
-    viewRegistry: ViewRegistry,
-    builder = clientBuilder
+    document: SimpleDocument,
+    resolver: Resolver,
+    builder: IBuilder
   ) {
-    this._owner = owner;
-    this._rootTemplate = rootTemplate(owner);
-    this._viewRegistry = viewRegistry || owner.lookup('-view-registry:main');
-    this._roots = [];
-    this._removedRoots = [];
-    this._builder = builder;
-    this._isInteractive = envOptions.isInteractive;
-
     let sharedArtifacts = artifacts();
 
-    // resolver is exposed for tests
-    let resolver = (this._runtimeResolver = new ResolverImpl());
-    let env = new EmberEnvironmentDelegate(owner, envOptions.isInteractive);
+    /**
+     * SAFETY: are there consequences for being looser with *this* owner?
+     *         the public API for `owner` is kinda `Partial<InternalOwner>`
+     *         aka: implement only what you need.
+     *         But for actual ember apps, you *need* to implement everything
+     *         an app needs (which will actually change and become less over time)
+     */
+    let env = new EmberEnvironmentDelegate(owner as InternalOwner, envOptions.isInteractive);
     let options = runtimeOptions({ document }, env, sharedArtifacts, resolver);
-
-    this._context = new EvaluationContextImpl(
+    let context = new EvaluationContextImpl(
       sharedArtifacts,
       (heap) => new RuntimeOpImpl(heap),
       options
     );
-    this.env = this._context.env;
+
+    this.state = RendererState.create(
+      {
+        owner,
+        context,
+        builder,
+      },
+      this
+    );
   }
 
   get debugRenderTree(): DebugRenderTree {
-    let { debugRenderTree } = this.env;
+    let { debugRenderTree } = this.state.env;
 
     assert(
       'Attempted to access the DebugRenderTree, but it did not exist. Is the Ember Inspector open?',
@@ -356,6 +725,80 @@ export class Renderer {
     return debugRenderTree;
   }
 
+  isValid(): boolean {
+    return this.state.isValid();
+  }
+
+  destroy() {
+    destroy(this);
+  }
+
+  render(
+    component: object,
+    options: { into: IntoTarget; args?: Record<string, unknown> }
+  ): RootState {
+    const root = new ComponentRootState(this.state, component, {
+      args: options.args,
+      into: intoTarget(options.into),
+    });
+    return this.state.renderRoot(root, this);
+  }
+
+  rerender(): void {
+    this.state.scheduleRevalidate(this);
+  }
+
+  // render(component: Component, options: { into: Cursor; args?: Record<string, unknown> }): void {
+  //   this.state.renderRoot(component);
+  // }
+}
+
+export class Renderer extends BaseRenderer {
+  static strict(
+    owner: object,
+    document: SimpleDocument | Document,
+    options: { isInteractive: boolean; hasDOM?: boolean }
+  ): BaseRenderer {
+    return new BaseRenderer(
+      owner,
+      { hasDOM: hasDOM, ...options },
+      document as SimpleDocument,
+      new StrictResolver(),
+      clientBuilder
+    );
+  }
+
+  private _rootTemplate: Template;
+  private _viewRegistry: ViewRegistry;
+
+  static create(props: { _viewRegistry: any }): Renderer {
+    let { _viewRegistry } = props;
+    let owner = getOwner(props);
+    assert('Renderer is unexpectedly missing an owner', owner);
+    let document = owner.lookup('service:-document') as SimpleDocument;
+    let env = owner.lookup('-environment:main') as {
+      isInteractive: boolean;
+      hasDOM: boolean;
+    };
+    let rootTemplate = owner.lookup(P`template:-root`) as TemplateFactory;
+    let builder = owner.lookup('service:-dom-builder') as IBuilder;
+    return new this(owner, document, env, rootTemplate, _viewRegistry, builder);
+  }
+
+  constructor(
+    owner: InternalOwner,
+    document: SimpleDocument,
+    env: { isInteractive: boolean; hasDOM: boolean },
+    rootTemplate: TemplateFactory,
+    viewRegistry: ViewRegistry,
+    builder = clientBuilder,
+    resolver = new ResolverImpl()
+  ) {
+    super(owner, env, document, resolver, builder);
+    this._rootTemplate = rootTemplate(owner);
+    this._viewRegistry = viewRegistry || owner.lookup('-view-registry:main');
+  }
+
   // renderer HOOKS
 
   appendOutletView(view: OutletView, target: SimpleElement): void {
@@ -394,94 +837,98 @@ export class Renderer {
     );
   }
 
-  appendTo(view: Component, target: SimpleElement): void {
+  appendTo(view: ClassicComponent, target: SimpleElement): void {
     let definition = new RootComponentDefinition(view);
     this._appendDefinition(
       view,
-      curry(0 as CurriedComponent, definition, this._owner, null, true),
+      curry(0 as CurriedComponent, definition, this.state.owner, null, true),
       target
     );
   }
 
   _appendDefinition(
-    root: OutletView | Component,
+    root: OutletView | ClassicComponent,
     definition: CurriedValue,
     target: SimpleElement
   ): void {
     let self = createConstRef(definition, 'this');
     let dynamicScope = new DynamicScope(null, UNDEFINED_REFERENCE);
-    let rootState = new RootState(
+    let rootState = new ClassicRootState(
       root,
-      this._context,
-      this._owner,
+      this.state.context,
+      this.state.owner,
       this._rootTemplate,
       self,
       target,
       dynamicScope,
-      this._builder
+      this.state.builder
     );
-    this._renderRoot(rootState);
+    this.state.renderRoot(rootState, this);
   }
 
-  rerender(): void {
-    this._scheduleRevalidate();
-  }
-
-  register(view: any): void {
-    let id = getViewId(view);
-    assert(
-      'Attempted to register a view with an id already in use: ' + id,
-      !this._viewRegistry[id]
-    );
-    this._viewRegistry[id] = view;
-  }
-
-  unregister(view: any): void {
-    delete this._viewRegistry[getViewId(view)];
-  }
-
-  remove(view: Component): void {
-    view._transitionTo('destroying');
-
-    this.cleanupRootFor(view);
-
-    if (this._isInteractive) {
-      view.trigger('didDestroyElement');
-    }
-  }
-
-  cleanupRootFor(view: unknown): void {
+  cleanupRootFor(component: ClassicComponent): void {
     // no need to cleanup roots if we have already been destroyed
-    if (this._destroyed) {
+    if (isDestroyed(this)) {
       return;
     }
 
-    let roots = this._roots;
+    let roots = this.state.roots;
 
     // traverse in reverse so we can remove items
     // without mucking up the index
-    let i = this._roots.length;
+    let i = roots.length;
     while (i--) {
       let root = roots[i];
       assert('has root', root);
-      if (root.isFor(view)) {
+      if (root.type === 'classic' && root.isFor(component)) {
         root.destroy();
         roots.splice(i, 1);
       }
     }
   }
 
-  destroy() {
-    if (this._destroyed) {
-      return;
+  remove(view: ClassicComponent): void {
+    view._transitionTo('destroying');
+
+    this.cleanupRootFor(view);
+
+    if (this.state.isInteractive) {
+      view.trigger('didDestroyElement');
     }
-    this._destroyed = true;
-    this._clearAllRoots();
   }
 
-  getElement(view: View): Nullable<Element> {
+  get _roots() {
+    return this.state.debug.roots;
+  }
+
+  get _inRenderTransaction() {
+    return this.state.debug.inRenderTransaction;
+  }
+
+  get _isInteractive() {
+    return this.state.debug.isInteractive;
+  }
+
+  get _context() {
+    return this.state.context;
+  }
+
+  register(view: any): void {
+    let id = getViewId(view);
+    assert(
+      'Attempted to register a view with an id already in use: ' + id,
+      !this._viewRegistry[id]
+    );
+    this._viewRegistry[id] = view;
+  }
+
+  unregister(view: any): void {
+    delete this._viewRegistry[getViewId(view)];
+  }
+
+  getElement(component: View): Nullable<Element> {
     if (this._isInteractive) {
-      return getViewElement(view);
+      return getViewElement(component);
     } else {
       throw new Error(
         'Accessing `this.element` is not allowed in non-interactive environments (such as FastBoot).'
@@ -489,12 +936,12 @@ export class Renderer {
     }
   }
 
-  getBounds(view: View): {
+  getBounds(component: View): {
     parentElement: SimpleElement;
     firstNode: SimpleNode;
     lastNode: SimpleNode;
   } {
-    let bounds: Bounds | null = view[BOUNDS];
+    let bounds: Bounds | null = component[BOUNDS];
 
     assert('object passed to getBounds must have the BOUNDS symbol as a property', bounds);
 
@@ -504,125 +951,4 @@ export class Renderer {
 
     return { parentElement, firstNode, lastNode };
   }
-
-  createElement(tagName: string): SimpleElement {
-    return this.env.getAppendOperations().createElement(tagName);
-  }
-
-  _renderRoot(root: RootState): void {
-    let { _roots: roots } = this;
-
-    roots.push(root);
-
-    if (roots.length === 1) {
-      register(this);
-    }
-
-    this._renderRootsTransaction();
-  }
-
-  _renderRoots(): void {
-    let { _roots: roots, _removedRoots: removedRoots } = this;
-    let initialRootsLength: number;
-
-    do {
-      initialRootsLength = roots.length;
-
-      inTransaction(this.env, () => {
-        // ensure that for the first iteration of the loop
-        // each root is processed
-        for (let i = 0; i < roots.length; i++) {
-          let root = roots[i];
-          assert('has root', root);
-
-          if (root.destroyed) {
-            // add to the list of roots to be removed
-            // they will be removed from `this._roots` later
-            removedRoots.push(root);
-
-            // skip over roots that have been marked as destroyed
-            continue;
-          }
-
-          // when processing non-initial reflush loops,
-          // do not process more roots than needed
-          if (i >= initialRootsLength) {
-            continue;
-          }
-
-          root.render();
-        }
-
-        this._lastRevision = valueForTag(CURRENT_TAG);
-      });
-    } while (roots.length > initialRootsLength);
-
-    // remove any roots that were destroyed during this transaction
-    while (removedRoots.length) {
-      let root = removedRoots.pop();
-
-      let rootIndex = roots.indexOf(root!);
-      roots.splice(rootIndex, 1);
-    }
-
-    if (this._roots.length === 0) {
-      deregister(this);
-    }
-  }
-
-  _renderRootsTransaction(): void {
-    if (this._inRenderTransaction) {
-      // currently rendering roots, a new root was added and will
-      // be processed by the existing _renderRoots invocation
-      return;
-    }
-
-    // used to prevent calling _renderRoots again (see above)
-    // while we are actively rendering roots
-    this._inRenderTransaction = true;
-
-    let completedWithoutError = false;
-    try {
-      this._renderRoots();
-      completedWithoutError = true;
-    } finally {
-      if (!completedWithoutError) {
-        this._lastRevision = valueForTag(CURRENT_TAG);
-      }
-      this._inRenderTransaction = false;
-    }
-  }
-
-  _clearAllRoots(): void {
-    let roots = this._roots;
-    for (let root of roots) {
-      root.destroy();
-    }
-
-    this._removedRoots.length = 0;
-    this._roots = [];
-
-    // if roots were present before destroying
-    // deregister this renderer instance
-    if (roots.length) {
-      deregister(this);
-    }
-  }
-
-  _scheduleRevalidate(): void {
-    _backburner.scheduleOnce('render', this, this._revalidate);
-  }
-
-  _isValid(): boolean {
-    return (
-      this._destroyed || this._roots.length === 0 || validateTag(CURRENT_TAG, this._lastRevision)
-    );
-  }
-
-  _revalidate(): void {
-    if (this._isValid()) {
-      return;
-    }
-    this._renderRootsTransaction();
-  }
 }
diff --git a/packages/@ember/-internals/glimmer/lib/renderer/strict-resolver.ts b/packages/@ember/-internals/glimmer/lib/renderer/strict-resolver.ts
new file mode 100644
index 00000000000..a7a80b8022d
--- /dev/null
+++ b/packages/@ember/-internals/glimmer/lib/renderer/strict-resolver.ts
@@ -0,0 +1,38 @@
+import type {
+  InternalComponentManager,
+  Nullable,
+  ResolvedComponentDefinition,
+} from '@glimmer/interfaces';
+import { BUILTIN_HELPERS, BUILTIN_KEYWORD_HELPERS } from '../resolver';
+
+///////////
+
+/**
+ * Resolution for non built ins is now handled by the vm as we are using strict mode
+ */
+export class StrictResolver {
+  lookupHelper(name: string, _owner: object): Nullable<object> {
+    return BUILTIN_HELPERS[name] ?? null;
+  }
+
+  lookupBuiltInHelper(name: string): Nullable<object> {
+    return BUILTIN_KEYWORD_HELPERS[name] ?? null;
+  }
+
+  lookupModifier(_name: string, _owner: object): Nullable<object> {
+    return null;
+  }
+
+  lookupComponent(
+    _name: string,
+    _owner: object
+  ): Nullable<
+    ResolvedComponentDefinition<object, unknown, InternalComponentManager<unknown, object>>
+  > {
+    return null;
+  }
+
+  lookupBuiltInModifier(_name: string): Nullable<object> {
+    return null;
+  }
+}
diff --git a/packages/@ember/-internals/glimmer/lib/resolver.ts b/packages/@ember/-internals/glimmer/lib/resolver.ts
index af51ab9865d..e6517bc3e88 100644
--- a/packages/@ember/-internals/glimmer/lib/resolver.ts
+++ b/packages/@ember/-internals/glimmer/lib/resolver.ts
@@ -87,7 +87,7 @@ function lookupComponentPair(owner: InternalOwner, name: string): Nullable<Looku
   }
 }
 
-const BUILTIN_KEYWORD_HELPERS: Record<string, object> = {
+export const BUILTIN_KEYWORD_HELPERS: Record<string, object> = {
   mut,
   readonly,
   unbound,
@@ -101,7 +101,7 @@ const BUILTIN_KEYWORD_HELPERS: Record<string, object> = {
   '-in-el-null': inElementNullCheckHelper,
 };
 
-const BUILTIN_HELPERS: Record<string, object> = {
+export const BUILTIN_HELPERS: Record<string, object> = {
   ...BUILTIN_KEYWORD_HELPERS,
   array,
   concat,
diff --git a/packages/@ember/-internals/glimmer/tests/integration/components/render-component-test.ts b/packages/@ember/-internals/glimmer/tests/integration/components/render-component-test.ts
new file mode 100644
index 00000000000..2fb8bdffdb6
--- /dev/null
+++ b/packages/@ember/-internals/glimmer/tests/integration/components/render-component-test.ts
@@ -0,0 +1,591 @@
+import {
+  AbstractStrictTestCase,
+  assertClassicComponentElement,
+  assertHTML,
+  buildOwner,
+  clickElement,
+  defComponent,
+  defineComponent,
+  defineSimpleHelper,
+  defineSimpleModifier,
+  moduleFor,
+  type ClassicComponentShape,
+  runDestroy,
+} from 'internal-test-helpers';
+
+import { Input, Textarea } from '@ember/component';
+import { array, concat, fn, get, hash, on } from '@glimmer/runtime';
+import GlimmerishComponent from '../../utils/glimmerish-component';
+
+import { run } from '@ember/runloop';
+import { associateDestroyableChild, registerDestructor } from '@glimmer/destroyable';
+import { renderComponent, type RenderResult } from '../../../lib/renderer';
+import { trackedObject } from '@ember/reactive';
+import { cached, tracked } from '@glimmer/tracking';
+import Service, { service } from '@ember/service';
+import type Owner from '@ember/owner';
+
+class RenderComponentTestCase extends AbstractStrictTestCase {
+  component: (RenderResult & { rerender: () => void }) | undefined;
+  owner: Owner;
+
+  constructor(assert: QUnit['assert']) {
+    super(assert);
+
+    this.owner = buildOwner({});
+    associateDestroyableChild(this, this.owner);
+  }
+
+  get element() {
+    return document.querySelector('#qunit-fixture')!;
+  }
+
+  assertChange({ change, expect }: { change: () => void; expect: string }) {
+    run(() => change());
+
+    assertHTML(expect);
+
+    this.assertStableRerender();
+  }
+
+  renderComponent(
+    component: object,
+    options: { args?: Record<string, unknown>; expect: string } | { classic: ClassicComponentShape }
+  ) {
+    let { owner } = this;
+
+    run(() => {
+      const result = renderComponent(component, {
+        owner,
+        args: 'args' in options ? options.args : {},
+        env: { document: document, isInteractive: true, hasDOM: true },
+        into: this.element,
+      });
+      this.component = {
+        ...result,
+        rerender() {
+          // unused, but asserted against
+        },
+      };
+      registerDestructor(this, () => result.destroy());
+    });
+
+    if ('expect' in options) {
+      assertHTML(options.expect);
+    } else {
+      assertClassicComponentElement(options.classic);
+    }
+
+    this.assertStableRerender();
+  }
+}
+
+moduleFor(
+  'Strict Mode - renderComponent',
+  class extends RenderComponentTestCase {
+    afterEach() {
+      if (this.component) {
+        // runDestroy(this.component);
+        // runDestroy(this.owner);
+        runDestroy(this);
+      }
+    }
+
+    '@test Can use a component in scope'() {
+      let Foo = defComponent('Hello, world!');
+      let Root = defComponent('<Foo/>', { scope: { Foo } });
+
+      this.renderComponent(Root, { expect: 'Hello, world!' });
+    }
+
+    '@test Can use a custom helper in scope (in append position)'() {
+      let foo = defineSimpleHelper(() => 'Hello, world!');
+      let Root = defComponent('{{foo}}', { scope: { foo } });
+
+      this.renderComponent(Root, { expect: 'Hello, world!' });
+    }
+
+    '@test Can use a custom modifier in scope'() {
+      let foo = defineSimpleModifier((element) => (element.innerHTML = 'Hello, world!'));
+      let Root = defComponent('<div {{foo}}></div>', { scope: { foo } });
+
+      this.renderComponent(Root, { expect: '<div>Hello, world!</div>' });
+    }
+
+    '@test Can shadow keywords'() {
+      let ifComponent = defineComponent({}, 'Hello, world!');
+      let Bar = defComponent('{{#if}}{{/if}}', { scope: { if: ifComponent } });
+
+      this.renderComponent(Bar, { expect: 'Hello, world!' });
+    }
+
+    '@test Can use constant values in ambiguous helper/component position'() {
+      let value = 'Hello, world!';
+
+      let Root = defComponent('{{value}}', { scope: { value } });
+
+      this.renderComponent(Root, { expect: 'Hello, world!' });
+    }
+
+    '@test Can use inline if and unless in strict mode templates'() {
+      let Root = defComponent('{{if true "foo" "bar"}}{{unless true "foo" "bar"}}');
+
+      this.renderComponent(Root, { expect: 'foobar' });
+    }
+
+    '@test Can use a dynamic component definition'() {
+      let Foo = defComponent('Hello, world!');
+      let Root = defComponent('<this.Foo/>', {
+        component: class extends GlimmerishComponent {
+          Foo = Foo;
+        },
+      });
+
+      this.renderComponent(Root, { expect: 'Hello, world!' });
+    }
+
+    '@test Can use a dynamic component definition (curly)'() {
+      let Foo = defComponent('Hello, world!');
+      let Root = defComponent('{{this.Foo}}', {
+        component: class extends GlimmerishComponent {
+          Foo = Foo;
+        },
+      });
+
+      this.renderComponent(Root, { expect: 'Hello, world!' });
+    }
+
+    '@test Can use a dynamic helper definition'() {
+      let foo = defineSimpleHelper(() => 'Hello, world!');
+      let Root = defComponent('{{this.foo}}', {
+        component: class extends GlimmerishComponent {
+          foo = foo;
+        },
+      });
+
+      this.renderComponent(Root, { expect: 'Hello, world!' });
+    }
+
+    '@test Can use a curried dynamic helper'() {
+      let foo = defineSimpleHelper((value) => value);
+      let Foo = defComponent('{{@value}}');
+      let Root = defComponent('<Foo @value={{helper foo "Hello, world!"}}/>', {
+        scope: { Foo, foo },
+      });
+
+      this.renderComponent(Root, { expect: 'Hello, world!' });
+    }
+
+    '@test Can use a curried dynamic modifier'() {
+      let foo = defineSimpleModifier((element, [text]) => (element.innerHTML = text));
+      let Foo = defComponent('<div {{@value}}></div>');
+      let Root = defComponent('<Foo @value={{modifier foo "Hello, world!"}}/>', {
+        scope: { Foo, foo },
+      });
+
+      this.renderComponent(Root, { expect: '<div>Hello, world!</div>' });
+    }
+
+    '@test when args are trackedObject, the rendered component response appropriately'() {
+      let args = trackedObject({ foo: 2 });
+      let Root = defComponent('{{@foo}}', {
+        scope: {},
+      });
+
+      this.renderComponent(Root, { args, expect: '2' });
+
+      this.assertChange({
+        change: () => args.foo++,
+        expect: '3',
+      });
+    }
+
+    '@skip when args are a custom tracked class, the rendered component response appropriately'() {
+      class Args {
+        @tracked foo = 2;
+      }
+      let args = new Args();
+      let Root = defComponent('{{@foo}}', {
+        scope: {},
+      });
+
+      // @ts-expect-error SAFETY: custom class is not currently supported as args, but would be nice to support?
+      this.renderComponent(Root, { args, expect: '2' });
+
+      this.assertChange({
+        change: () => args.foo++,
+        expect: '3',
+      });
+    }
+
+    '@test a modifier can call renderComponent'() {
+      let render = defineSimpleModifier((element, [comp]) => {
+        let result = renderComponent(comp, { into: element });
+
+        return () => result.destroy();
+      });
+
+      let Inner = defComponent('hi there');
+      let Root = defComponent(`<div {{render Inner}}></div>`, { scope: { render, Inner } });
+
+      this.renderComponent(Root, { expect: '<div>hi there</div>' });
+    }
+
+    '@test can render in to a detached element'() {
+      let Inner = defComponent('hello there');
+      let element = document.createElement('div');
+      let attach: () => void;
+
+      class _Root extends GlimmerishComponent {
+        @tracked attached: Element | undefined;
+
+        constructor(owner: any, args: any) {
+          super(owner, args);
+
+          let result = renderComponent(Inner, { into: element });
+
+          attach = () => void (this.attached = element);
+
+          registerDestructor(this, () => result.destroy());
+        }
+      }
+
+      let Root = defComponent(`{{this.attached}}`, { component: _Root });
+
+      this.renderComponent(Root, { expect: '' });
+
+      this.assertChange({
+        change: () => attach(),
+        expect: `<div>hello there</div>`,
+      });
+    }
+
+    /**
+     * Test skipped because when an error occurs,
+     * we mess up the cache used by renderComponent.
+     */
+    '@skip can *not* render in to a TextNode'(assert: Assert) {
+      let Inner = defComponent('hello there');
+      let element = document.createTextNode('');
+
+      class _Root extends GlimmerishComponent {
+        @tracked attached: Element | undefined;
+
+        constructor(owner: any, args: any) {
+          super(owner, args);
+
+          assert.throws(
+            () => {
+              assert.step('throw');
+              // @ts-expect-error deliberately not supported
+              renderComponent(Inner, { into: element });
+            },
+            /Cannot add children to a Text/,
+            'throws an error about not being able to add children to TextNodes'
+          );
+        }
+      }
+
+      let Root = defComponent(``, { component: _Root });
+
+      this.renderComponent(Root, { expect: '<!---->' });
+      assert.verifySteps(['throw']);
+    }
+
+    '@test replaces existing contents within the target element'() {
+      let Inner = defComponent('hello there');
+      let element = document.createElement('div');
+      element.innerHTML = 'general kenobi';
+
+      let render: () => void;
+
+      class _Root extends GlimmerishComponent {
+        constructor(owner: any, args: any) {
+          super(owner, args);
+
+          render = () => {
+            let result = renderComponent(Inner, { into: element });
+
+            registerDestructor(this, () => result.destroy());
+          };
+        }
+      }
+
+      let Root = defComponent(`{{element}}`, { scope: { element }, component: _Root });
+
+      this.renderComponent(Root, { expect: '<div>general kenobi</div>' });
+
+      this.assertChange({
+        change: () => render(),
+        expect: `<div>hello there</div>`,
+      });
+    }
+
+    [`@test renderComponent is eager, so it tracks with its parent`](assert: Assert) {
+      let step = (...x: unknown[]) => assert.step(x.join(':'));
+
+      let Inner = defComponent('{{@foo}} <button onclick={{@increment}}>++</button>');
+
+      let element = document.createElement('div');
+      class _Root extends GlimmerishComponent {
+        @tracked foo = 2;
+        increment = () => this.foo++;
+
+        @cached
+        get sillyExampleToTieInToReactivity() {
+          step('render:root');
+
+          let self = this;
+          let result = renderComponent(Inner, {
+            into: element,
+            args: {
+              get foo() {
+                step('foo', self.foo);
+                return self.foo;
+              },
+              increment: () => void self.increment(),
+            },
+          });
+
+          registerDestructor(this, () => result.destroy());
+          return '';
+        }
+      }
+      let Root = defComponent(`{{element}}{{this.sillyExampleToTieInToReactivity}}`, {
+        scope: { element },
+        component: _Root,
+      });
+
+      this.renderComponent(Root, { expect: '<div>2 <button>++</button></div>' });
+      assert.verifySteps(['render:root', 'foo:2']);
+
+      this.assertChange({
+        change: () => {
+          this.element.querySelector('button')?.click();
+        },
+        expect: `<div>3 <button>++</button></div>`,
+      });
+
+      /**
+       * @see
+       * https://github.com/emberjs/rfcs/pull/1099/files#diff-2b962105b9083ca84579cdc957f27f49407440f3c5078083fa369ec18cc46da8R365
+       *
+       * We could later add an option to not do this behavior
+       */
+      assert.verifySteps(
+        [`render:root`, `foo:3`, `foo:3`],
+        `Destruction is async, so we get an extra 'foo:3' here, and then because our getter consumes foo (since renderComponent is eager), we dirty the cached getter, and re-run the getter, creating a new renderComponent call, overwriting the existing contents`
+      );
+    }
+
+    '@test multiple renderComponents share reactivity'() {
+      let args = trackedObject({ foo: 2 });
+
+      let InnerOne = defComponent('{{@foo}}');
+      let InnerTwo = defComponent('{{@foo}}');
+
+      let element1 = document.createElement('div');
+      let element2 = document.createElement('div');
+
+      element1.setAttribute('data-one', '');
+      element2.setAttribute('data-two', '');
+
+      class _Root extends GlimmerishComponent {
+        constructor(owner: any, _args: any) {
+          super(owner, _args);
+
+          let result1 = renderComponent(InnerOne, { into: element1, args });
+          let result2 = renderComponent(InnerTwo, { into: element2, args });
+
+          registerDestructor(this, () => {
+            result1.destroy();
+            result2.destroy();
+          });
+        }
+      }
+
+      let Root = defComponent(`{{element1}}{{element2}}`, {
+        scope: { element1, element2 },
+        component: _Root,
+      });
+
+      this.renderComponent(Root, { expect: '<div data-one="">2</div><div data-two="">2</div>' });
+
+      this.assertChange({
+        change: () => args.foo++,
+        expect: '<div data-one="">3</div><div data-two="">3</div>',
+      });
+    }
+
+    '@test multiple renderComponents share service injection'() {
+      class State extends Service {
+        @tracked foo = 2;
+      }
+
+      this.owner.register('service:state', State);
+
+      class _One extends GlimmerishComponent {
+        @service state!: State;
+      }
+      class _Two extends GlimmerishComponent {
+        @service state!: State;
+      }
+      let InnerOne = defComponent('{{this.state.foo}}', { component: _One });
+      let InnerTwo = defComponent('{{this.state.foo}}', { component: _Two });
+
+      let element1 = document.createElement('div');
+      let element2 = document.createElement('div');
+
+      element1.setAttribute('data-one', '');
+      element2.setAttribute('data-two', '');
+
+      class _Root extends GlimmerishComponent {
+        constructor(owner: any, _args: any) {
+          super(owner, _args);
+
+          let result1 = renderComponent(InnerOne, { into: element1, owner });
+          let result2 = renderComponent(InnerTwo, { into: element2, owner });
+
+          registerDestructor(this, () => {
+            result1.destroy();
+            result2.destroy();
+          });
+        }
+      }
+
+      let Root = defComponent(`{{element1}}{{element2}}`, {
+        scope: { element1, element2 },
+        component: _Root,
+      });
+
+      this.renderComponent(Root, { expect: '<div data-one="">2</div><div data-two="">2</div>' });
+
+      let x = this.owner.lookup('service:state') as State;
+
+      this.assertChange({
+        change: () => x.foo++,
+        expect: '<div data-one="">3</div><div data-two="">3</div>',
+      });
+    }
+  }
+);
+
+moduleFor(
+  'Strict Mode - renderComponent - built ins',
+  class extends RenderComponentTestCase {
+    '@test Can use Input'() {
+      let Root = defComponent('<Input/>', { scope: { Input } });
+
+      this.renderComponent(Root, {
+        classic: {
+          tagName: 'input',
+          attrs: {
+            type: 'text',
+            class: 'ember-text-field ember-view',
+          },
+        },
+      });
+    }
+
+    '@test Can use Textarea'() {
+      let Root = defComponent('<Textarea/>', { scope: { Textarea } });
+
+      this.renderComponent(Root, {
+        classic: {
+          tagName: 'textarea',
+          attrs: {
+            class: 'ember-text-area ember-view',
+          },
+        },
+      });
+    }
+
+    '@test Can use hash'() {
+      let Root = defComponent(
+        '{{#let (hash value="Hello, world!") as |hash|}}{{hash.value}}{{/let}}',
+        { scope: { hash } }
+      );
+
+      this.renderComponent(Root, { expect: 'Hello, world!' });
+    }
+
+    '@test Can use array'() {
+      let Root = defComponent('{{#each (array "Hello, world!") as |value|}}{{value}}{{/each}}', {
+        scope: { array },
+      });
+
+      this.renderComponent(Root, { expect: 'Hello, world!' });
+    }
+
+    '@test Can use concat'() {
+      let Root = defComponent('{{(concat "Hello" ", " "world!")}}', { scope: { concat } });
+
+      this.renderComponent(Root, { expect: 'Hello, world!' });
+    }
+
+    '@test Can use get'() {
+      let Root = defComponent(
+        '{{#let (hash value="Hello, world!") as |hash|}}{{(get hash "value")}}{{/let}}',
+        { scope: { hash, get } }
+      );
+
+      this.renderComponent(Root, { expect: 'Hello, world!' });
+    }
+
+    '@test Can use on and fn'(assert: Assert) {
+      let handleClick = (value: unknown) => {
+        assert.step('handleClick');
+        assert.equal(value, 123);
+      };
+
+      let Root = defComponent('<button {{on "click" (fn handleClick 123)}}>Click</button>', {
+        scope: { on, fn, handleClick },
+      });
+
+      this.renderComponent(Root, { expect: '<button>Click</button>' });
+
+      clickElement('button');
+
+      assert.verifySteps(['handleClick']);
+    }
+
+    // Ember currently uses AST plugins to implement certain features that
+    // glimmer-vm does not natively provide, such as {{#each-in}}, {{outlet}}
+    // {{mount}} and some features in {{#in-element}}. These rewrites the AST
+    // and insert private keywords e.g. `{{#each (-each-in)}}`. These tests
+    // ensures we have _some_ basic coverage for those features in strict mode.
+    //
+    // Ultimately, our test coverage for strict mode is quite inadequate. This
+    // is particularly important as we expect more apps to start adopting the
+    // feature. Ideally we would run our entire/most of our test suite against
+    // both strict and resolution modes, and these things would be implicitly
+    // covered elsewhere, but until then, these coverage are essential.
+
+    '@test Can use each-in'() {
+      let obj = {
+        foo: 'FOO',
+        bar: 'BAR',
+      };
+
+      let Root = defComponent('{{#each-in obj as |k v|}}[{{k}}:{{v}}]{{/each-in}}', {
+        scope: { obj },
+      });
+
+      this.renderComponent(Root, { expect: '[foo:FOO][bar:BAR]' });
+    }
+
+    '@test Can use in-element'() {
+      let getElement = (id: string) => document.getElementById(id);
+
+      let Foo = defComponent(
+        '{{#in-element (getElement "in-element-test")}}before{{/in-element}}after',
+        { scope: { getElement } }
+      );
+      let Root = defComponent('[<div id="in-element-test" />][<Foo/>]', { scope: { Foo } });
+
+      this.renderComponent(Root, {
+        expect: '[<div id="in-element-test">before</div>][<!---->after]',
+      });
+    }
+  }
+);
diff --git a/packages/@ember/-internals/glimmer/tests/utils/glimmerish-component.js b/packages/@ember/-internals/glimmer/tests/utils/glimmerish-component.js
index 2e5793a556f..6c9a4aca5fb 100644
--- a/packages/@ember/-internals/glimmer/tests/utils/glimmerish-component.js
+++ b/packages/@ember/-internals/glimmer/tests/utils/glimmerish-component.js
@@ -24,6 +24,6 @@ class GlimmerishComponent {
   }
 }
 
-setComponentManager(() => new GlimmerishComponentManager(), GlimmerishComponent);
+setComponentManager((owner) => new GlimmerishComponentManager(owner), GlimmerishComponent);
 
 export default GlimmerishComponent;
diff --git a/packages/@ember/template-compiler/lib/plugins/utils.ts b/packages/@ember/template-compiler/lib/plugins/utils.ts
index 6cc5b5ab4c9..1a36792df41 100644
--- a/packages/@ember/template-compiler/lib/plugins/utils.ts
+++ b/packages/@ember/template-compiler/lib/plugins/utils.ts
@@ -5,6 +5,10 @@ export function isPath(node: AST.Node): node is AST.PathExpression {
   return node.type === 'PathExpression';
 }
 
+export function isSubExpression(node: AST.Node): node is AST.SubExpression {
+  return node.type === 'SubExpression';
+}
+
 export function isStringLiteral(node: AST.Expression): node is AST.StringLiteral {
   return node.type === 'StringLiteral';
 }
diff --git a/packages/ember-template-compiler/lib/types.ts b/packages/ember-template-compiler/lib/types.ts
index 458b556dd31..3304c6eba67 100644
--- a/packages/ember-template-compiler/lib/types.ts
+++ b/packages/ember-template-compiler/lib/types.ts
@@ -3,6 +3,7 @@ import type {
   ASTPluginEnvironment,
   builders,
   PrecompileOptions,
+  PrecompileOptionsWithLexicalScope,
 } from '@glimmer/syntax';
 
 export type Builders = typeof builders;
@@ -19,11 +20,13 @@ interface Plugins {
   ast: PluginFunc[];
 }
 
+export type LexicalScope = NonNullable<PrecompileOptionsWithLexicalScope['lexicalScope']>;
+
 export interface EmberPrecompileOptions extends PrecompileOptions {
   isProduction?: boolean;
   moduleName?: string;
   plugins?: Plugins;
-  lexicalScope?: (name: string) => boolean;
+  lexicalScope?: LexicalScope;
 }
 
 export type EmberASTPluginEnvironment = ASTPluginEnvironment & EmberPrecompileOptions;
diff --git a/packages/internal-test-helpers/index.ts b/packages/internal-test-helpers/index.ts
index 8ac563ea43a..33c768572fa 100644
--- a/packages/internal-test-helpers/index.ts
+++ b/packages/internal-test-helpers/index.ts
@@ -19,6 +19,7 @@ export {
   ignoreDeprecation,
 } from './lib/ember-dev/deprecation';
 export {
+  defComponent,
   defineComponent,
   defineSimpleHelper,
   defineSimpleModifier,
@@ -29,7 +30,11 @@ export { equalsElement, classes, styles, regex } from './lib/matchers';
 export { runAppend, runDestroy, runTask, runTaskNext, runLoopSettled } from './lib/run';
 export { getContext, setContext, unsetContext } from './lib/test-context';
 
-export { default as AbstractTestCase } from './lib/test-cases/abstract';
+export {
+  default as AbstractTestCase,
+  type TestCase,
+  AbstractStrictTestCase,
+} from './lib/test-cases/abstract';
 export { default as AbstractApplicationTestCase } from './lib/test-cases/abstract-application';
 export { default as ApplicationTestCase } from './lib/test-cases/application';
 export { default as QueryParamTestCase } from './lib/test-cases/query-param';
@@ -37,6 +42,15 @@ export { default as RenderingTestCase } from './lib/test-cases/rendering';
 export { default as RouterNonApplicationTestCase } from './lib/test-cases/router-non-application';
 export { default as RouterTestCase } from './lib/test-cases/router';
 export { default as AutobootApplicationTestCase } from './lib/test-cases/autoboot-application';
+export { getAssert } from './lib/assert-helpers';
+export {
+  getElement,
+  assertElement,
+  assertHTML,
+  assertClassicComponentElement,
+  type ClassicComponentShape,
+} from './lib/element-helpers';
+export { clickElement } from './lib/event-helpers';
 
 export {
   default as TestResolver,
diff --git a/packages/internal-test-helpers/lib/assert-helpers.ts b/packages/internal-test-helpers/lib/assert-helpers.ts
new file mode 100644
index 00000000000..e86e6b9d20d
--- /dev/null
+++ b/packages/internal-test-helpers/lib/assert-helpers.ts
@@ -0,0 +1,16 @@
+import { getContext } from './test-context';
+
+export function getAssert(): QUnit['assert'] {
+  let context = getContext();
+
+  if (!context) {
+    throw new Error('Test context is not set up.');
+  }
+
+  let assert = context['assert'];
+  if (!assert) {
+    throw new Error('`assert` property on test context is not set up.');
+  }
+
+  return assert;
+}
diff --git a/packages/internal-test-helpers/lib/component-helper.ts b/packages/internal-test-helpers/lib/component-helper.ts
new file mode 100644
index 00000000000..e0313da0bed
--- /dev/null
+++ b/packages/internal-test-helpers/lib/component-helper.ts
@@ -0,0 +1,35 @@
+import { getContext } from './test-context';
+
+export function getComponent(): Record<string, unknown> {
+  let context = getContext();
+  if (!context) {
+    throw new Error('Test context is not set up.');
+  }
+
+  let component = context['component'];
+  if (component && typeof component === 'object') {
+    return component;
+  }
+
+  throw new Error('`component` property on test context is not set up.');
+}
+
+export function getOwner() {
+  let context = getContext();
+
+  if (!context) {
+    throw new Error('Test context is not set up.');
+  }
+
+  return context['owner'];
+}
+
+export function rerenderComponent() {
+  let component = getComponent();
+
+  if (typeof component['rerender'] !== 'function') {
+    throw new Error('Component does not support `rerender`.');
+  }
+
+  component['rerender']();
+}
diff --git a/packages/internal-test-helpers/lib/define-template-values.ts b/packages/internal-test-helpers/lib/define-template-values.ts
index a4a93af4c71..aff8f09d4b8 100644
--- a/packages/internal-test-helpers/lib/define-template-values.ts
+++ b/packages/internal-test-helpers/lib/define-template-values.ts
@@ -87,6 +87,26 @@ class FunctionalModifierManager implements ModifierManager<SimpleModifierState>
 const FUNCTIONAL_MODIFIER_MANAGER = new FunctionalModifierManager();
 const FUNCTIONAL_MODIFIER_MANAGER_FACTORY = () => FUNCTIONAL_MODIFIER_MANAGER;
 
+/**
+ * The signature of this test helper is closer to the signature of the
+ * `template()` function in `@ember/template-compiler`. It can express the same
+ * functionality as {@linkcode defineComponent}, but most tests still use
+ * `defineComponent`. Migrating tests from {@linkcode defineComponent} is
+ * straightforward, and there's no *semantic* reason not to do so.
+ */
+export function defComponent(
+  templateSource: string,
+  options?: {
+    component?: object | undefined;
+    scope?: Record<string, unknown> | undefined;
+  }
+) {
+  let definition = options?.component ?? templateOnlyComponent();
+  let scopeValues = options?.scope ?? null;
+
+  return defineComponent(scopeValues, templateSource, definition);
+}
+
 export function defineComponent(
   scopeValues: Record<string, unknown> | null,
   templateSource: string,
@@ -103,10 +123,12 @@ export function defineComponent(
   return definition;
 }
 
-export function defineSimpleHelper<T extends Function>(helperFn: T): T {
+export function defineSimpleHelper<T extends (...args: unknown[]) => unknown>(helperFn: T): T {
   return setHelperManager(FUNCTIONAL_HELPER_MANAGER_FACTORY, helperFn);
 }
 
-export function defineSimpleModifier<T extends Function>(modifierFn: T): T {
+export function defineSimpleModifier<T extends (element: Element, ...args: any[]) => any>(
+  modifierFn: T
+): T {
   return setModifierManager(FUNCTIONAL_MODIFIER_MANAGER_FACTORY, modifierFn);
 }
diff --git a/packages/internal-test-helpers/lib/element-helpers.ts b/packages/internal-test-helpers/lib/element-helpers.ts
index 5915f757043..280bafb4927 100644
--- a/packages/internal-test-helpers/lib/element-helpers.ts
+++ b/packages/internal-test-helpers/lib/element-helpers.ts
@@ -1,5 +1,12 @@
+import { getAssert } from './assert-helpers';
+import equalTokens from './equal-tokens';
+import { classes, equalsElement, regex } from './matchers';
 import { getContext } from './test-context';
 
+export const TextNode = window.Text;
+export const HTMLElement = window.HTMLElement;
+export const Comment = window.Comment;
+
 export function getElement(): HTMLElement {
   let context = getContext();
   if (!context) {
@@ -13,3 +20,102 @@ export function getElement(): HTMLElement {
 
   return element;
 }
+
+export function isMarker(node: unknown): node is Comment | typeof TextNode {
+  if (node instanceof Comment && node.textContent === '') {
+    return true;
+  }
+
+  if (node instanceof TextNode && node.textContent === '') {
+    return true;
+  }
+
+  return false;
+}
+
+export function assertHTML(html: string): void {
+  equalTokens(getElement(), html, `#qunit-fixture content should be: \`${html}\``);
+}
+
+export function assertElement(
+  node: ChildNode | null,
+  {
+    ElementType = HTMLElement,
+    tagName,
+    attrs = null,
+    content = null,
+  }: {
+    ElementType?: typeof HTMLElement;
+    tagName: string;
+    attrs?: Record<string, unknown> | null;
+    content?: unknown;
+  }
+) {
+  if (!node || !(node instanceof ElementType)) {
+    throw new Error(`Expecting a ${ElementType.name}, but got ${String(node)}`);
+  }
+
+  equalsElement(getAssert(), node, tagName, attrs, content);
+}
+
+export interface ClassicComponentShape {
+  ElementType?: typeof HTMLElement;
+  tagName: string;
+  attrs?: Record<string, unknown>;
+  content?: unknown;
+}
+
+export function assertClassicComponentElement(
+  node: ChildNode | null,
+  shape: ClassicComponentShape
+): void;
+export function assertClassicComponentElement(shape: ClassicComponentShape): void;
+export function assertClassicComponentElement(
+  ...args: [node: ChildNode | null, shape: ClassicComponentShape] | [shape: ClassicComponentShape]
+): void {
+  let node = args.length === 2 ? args[0] : getElement().firstChild;
+  let shape = args.length === 2 ? args[1] : args[0];
+
+  let attrs = Object.assign({
+    id: regex(/^ember\d*$/),
+    class: classes('ember-view'),
+    ...shape.attrs,
+  });
+
+  assertElement(node, {
+    ElementType: shape.ElementType ?? HTMLElement,
+    tagName: shape.tagName,
+    attrs,
+    content: shape.content,
+  });
+}
+
+export function assertSameNode(actual: ChildNode | undefined, expected: ChildNode | undefined) {
+  getAssert().strictEqual(actual, expected, 'DOM node stability');
+}
+
+export function assertInvariants(oldSnapshot: ChildNode[], newSnapshot?: ChildNode[]): void {
+  newSnapshot = newSnapshot || takeSnapshot();
+
+  getAssert().strictEqual(newSnapshot.length, oldSnapshot.length, 'Same number of nodes');
+
+  for (let i = 0; i < oldSnapshot.length; i++) {
+    assertSameNode(newSnapshot[i], oldSnapshot[i]);
+  }
+}
+
+export function takeSnapshot() {
+  let snapshot: ChildNode[] = [];
+
+  let node = getElement().firstChild;
+
+  while (node) {
+    if (!isMarker(node)) {
+      snapshot.push(node);
+    }
+
+    node = node.nextSibling;
+  }
+
+  return snapshot;
+}
diff --git a/packages/internal-test-helpers/lib/ember-dev/namespaces.ts b/packages/internal-test-helpers/lib/ember-dev/namespaces.ts
index 32d6c5d709e..f9e35979266 100644
--- a/packages/internal-test-helpers/lib/ember-dev/namespaces.ts
+++ b/packages/internal-test-helpers/lib/ember-dev/namespaces.ts
@@ -6,7 +6,7 @@ export function setupNamespacesCheck(hooks: NestedHooks): void {
     let { assert } = QUnit.config.current;
 
     if (NAMESPACES.length > 0) {
-      assert.ok(false, 'Should not have any NAMESPACES after tests');
+      assert.ok(false, `Should not have any NAMESPACES after tests (had: ${NAMESPACES.join(',')})`);
       run(() => {
         let namespaces = NAMESPACES.slice();
         for (let namespace of namespaces) {
diff --git a/packages/internal-test-helpers/lib/event-helpers.ts b/packages/internal-test-helpers/lib/event-helpers.ts
new file mode 100644
index 00000000000..765494c376f
--- /dev/null
+++ b/packages/internal-test-helpers/lib/event-helpers.ts
@@ -0,0 +1,15 @@
+import { getElement } from './element-helpers';
+import { runLoopSettled } from './run';
+
+export function clickElement(selector: HTMLElement | string) {
+  let element;
+  if (typeof selector === 'string') {
+    element = getElement().querySelector(selector) as HTMLElement | null;
+  } else {
+    element = selector;
+  }
+
+  let event = element!.click();
+
+  return runLoopSettled(event);
+}
diff --git a/packages/internal-test-helpers/lib/module-for.ts b/packages/internal-test-helpers/lib/module-for.ts
index 54881f4b68d..d442eef1888 100644
--- a/packages/internal-test-helpers/lib/module-for.ts
+++ b/packages/internal-test-helpers/lib/module-for.ts
@@ -1,19 +1,19 @@
 /* globals URLSearchParams */
-import { DEBUG } from '@glimmer/env';
 import { isEnabled } from '@ember/canary-features';
-import type { Mixin, Generator } from './apply-mixins';
+import { assertDestroyablesDestroyed, enableDestroyableTracking } from '@glimmer/destroyable';
+import { DEBUG } from '@glimmer/env';
+import { all } from 'rsvp';
+import type { Generator, Mixin } from './apply-mixins';
 import applyMixins from './apply-mixins';
 import getAllPropertyNames from './get-all-property-names';
+import type { TestCase } from './test-cases/abstract';
 import { setContext, unsetContext } from './test-context';
-import { all } from 'rsvp';
-import { enableDestroyableTracking, assertDestroyablesDestroyed } from '@glimmer/destroyable';
-import type AbstractTestCase from './test-cases/abstract';
 
-interface TestClass<T extends AbstractTestCase> {
+interface TestClass<T extends TestCase> {
   new (assert: QUnit['assert']): T;
 }
 
-interface TestContext<T extends AbstractTestCase> {
+interface TestContext<T extends TestCase> {
   instance: T | null | undefined;
 }
 
@@ -28,7 +28,7 @@ const ASSERT_DESTROYABLES = (() => {
   return assertDestroyables !== null;
 })();
 
-export function moduleForDevelopment<T extends AbstractTestCase, M extends Generator>(
+export function moduleForDevelopment<T extends TestCase, M extends Generator>(
   description: string,
   TestClass: TestClass<T>,
   ...mixins: Mixin<M>[]
@@ -45,7 +45,7 @@ export async function define<T>(callback: () => T): Promise<T> {
   return result;
 }
 
-export default function moduleFor<T extends AbstractTestCase, M extends Generator>(
+export default function moduleFor<T extends TestCase, M extends Generator>(
   description: string,
   TestClass: TestClass<T>,
   ...mixins: Mixin<M>[]
@@ -63,7 +63,7 @@ function afterEachFinally() {
   }
 }
 
-export function setupTestClass<T extends AbstractTestCase, G extends Generator>(
+export function setupTestClass<T extends TestCase, G extends Generator>(
   hooks: NestedHooks,
   TestClass: TestClass<T>,
   ...mixins: Mixin<G>[]
@@ -129,7 +129,7 @@ export function setupTestClass<T extends AbstractTestCase, G extends Generator>(
     });
   }
 
-  function generateTest<T extends AbstractTestCase>(name: keyof T & string) {
+  function generateTest<T extends TestCase>(name: keyof T & string) {
     if (name.indexOf('@test ') === 0) {
       QUnit.test(name.slice(5), function (this: TestContext<T>, assert) {
         return (this.instance![name] as any)(assert);
diff --git a/packages/internal-test-helpers/lib/test-cases/abstract.ts b/packages/internal-test-helpers/lib/test-cases/abstract.ts
index 6f7d17392af..e937761ef73 100644
--- a/packages/internal-test-helpers/lib/test-cases/abstract.ts
+++ b/packages/internal-test-helpers/lib/test-cases/abstract.ts
@@ -3,10 +3,12 @@
 import NodeQuery from '../node-query';
 import equalInnerHTML from '../equal-inner-html';
 import equalTokens from '../equal-tokens';
-import { getElement } from '../element-helpers';
+import { assertInvariants, getElement, takeSnapshot } from '../element-helpers';
 import { equalsElement, regex, classes } from '../matchers';
-import { runLoopSettled } from '../run';
+import { runDestroy, runLoopSettled, runTask } from '../run';
 import { assert } from '@ember/debug';
+import { rerenderComponent } from '../component-helper';
+import { _resetRenderers } from '@ember/-internals/glimmer';
 
 const TextNode = window.Text;
 const HTMLElement = window.HTMLElement;
@@ -24,6 +26,53 @@ function isMarker(node: unknown): node is Comment | typeof TextNode {
   return false;
 }
 
+export type TestCase = AbstractStrictTestCase | AbstractTestCase;
+
+export abstract class AbstractStrictTestCase {
+  snapshot: ChildNode[] | null = null;
+  component: unknown;
+  readonly assert: QUnit['assert'];
+
+  rerender(): void {
+    rerenderComponent();
+  }
+
+  beforeEach?(_assert: QUnit['assert']) {}
+  teardown?(): unknown;
+
+  constructor(assert: QUnit['assert']) {
+    this.assert = assert;
+  }
+
+  afterEach() {
+    try {
+      runDestroy(this);
+    } finally {
+      _resetRenderers();
+    }
+  }
+
+  takeSnapshot() {
+    this.snapshot = takeSnapshot();
+  }
+
+  assertStableRerender() {
+    this.takeSnapshot();
+    runTask(() => rerenderComponent());
+    this.assertInvariants();
+  }
+
+  assertInvariants(): void;
+  assertInvariants(oldSnapshot: ChildNode[], newSnapshot: ChildNode[]): void;
+  assertInvariants(oldSnapshot?: ChildNode[], newSnapshot?: ChildNode[]): void {
+    if (!oldSnapshot) {
+      assert('expected an existing snapshot', this.snapshot);
+      oldSnapshot = this.snapshot;
+    }
+    assertInvariants(oldSnapshot, newSnapshot);
+  }
+}
+
 export default abstract class AbstractTestCase {
   snapshot: ChildNode[] | null;
   assert: QUnit['assert'];
diff --git a/tests/docs/expected.js b/tests/docs/expected.js
index 291736c703d..79f7ac1cde5 100644
--- a/tests/docs/expected.js
+++ b/tests/docs/expected.js
@@ -423,6 +423,7 @@ module.exports = {
     'removeObjects',
     'removeObserver',
     'removeTestHelpers',
+    'renderComponent',
     'renderSettled',
     'reopen',
     'reopenClass',