diff --git a/packages/@ember/-internals/glimmer/lib/environment.ts b/packages/@ember/-internals/glimmer/lib/environment.ts
index ffa77980ad5..a2a21f849ad 100644
--- a/packages/@ember/-internals/glimmer/lib/environment.ts
+++ b/packages/@ember/-internals/glimmer/lib/environment.ts
@@ -1,11 +1,10 @@
 import { ENV } from '@ember/-internals/environment';
-import { get, set, _getProp, _setProp } from '@ember/-internals/metal';
-import type { InternalOwner } from '@ember/-internals/owner';
+import { _getProp, _setProp, get, set } from '@ember/-internals/metal';
 import { getDebugName } from '@ember/-internals/utils';
 import { constructStyleDeprecationMessage } from '@ember/-internals/views';
-import { assert, deprecate, warn } from '@ember/debug';
 import type { DeprecationOptions } from '@ember/debug';
-import { schedule, _backburner } from '@ember/runloop';
+import { assert, deprecate, warn } from '@ember/debug';
+import { _backburner, schedule } from '@ember/runloop';
 import { DEBUG } from '@glimmer/env';
 import setGlobalContext from '@glimmer/global-context';
 import type { EnvironmentDelegate } from '@glimmer/runtime';
@@ -131,7 +130,7 @@ const VM_ASSERTION_OVERRIDES: { id: string; message: string }[] = [];
 export class EmberEnvironmentDelegate implements EnvironmentDelegate {
   public enableDebugTooling: boolean = ENV._DEBUG_RENDER_TREE;
 
-  constructor(public owner: InternalOwner, public isInteractive: boolean) {}
+  constructor(public owner: object, public isInteractive: boolean) {}
 
   onTransactionCommit(): void {}
 }
diff --git a/packages/@ember/-internals/glimmer/lib/renderer.ts b/packages/@ember/-internals/glimmer/lib/renderer.ts
index 1c9c0e44469..be0816ad02c 100644
--- a/packages/@ember/-internals/glimmer/lib/renderer.ts
+++ b/packages/@ember/-internals/glimmer/lib/renderer.ts
@@ -6,23 +6,24 @@ 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 } from '@glimmer/destroyable';
 import { DEBUG } from '@glimmer/env';
 import type {
   Bounds,
   CompileTimeCompilationContext,
+  CompileTimeResolver,
   Cursor,
   DebugRenderTree,
-  DynamicScope as GlimmerDynamicScope,
   ElementBuilder,
   Environment,
+  DynamicScope as GlimmerDynamicScope,
   RenderResult,
   RuntimeContext,
+  RuntimeResolver,
   Template,
   TemplateFactory,
 } from '@glimmer/interfaces';
 
-import { CurriedType } from '@glimmer/vm';
 import type { Nullable } from '@ember/-internals/utility-types';
 import { programCompilationContext } from '@glimmer/opcode-compiler';
 import { artifacts, RuntimeOpImpl } from '@glimmer/program';
@@ -35,22 +36,27 @@ import {
   DOMChanges,
   DOMTreeConstruction,
   inTransaction,
+  renderComponent as glimmerRenderComponent,
   renderMain,
   runtimeContext,
 } from '@glimmer/runtime';
 import { unwrapTemplate } from '@glimmer/util';
 import { CURRENT_TAG, validateTag, valueForTag } from '@glimmer/validator';
+import { CurriedType } from '@glimmer/vm';
 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 { NodeDOMTreeConstruction } from './dom';
 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';
+import { registerDestructor } from '@ember/destroyable';
 
 export type IBuilder = (env: Environment, cursor: Cursor) => ElementBuilder;
 
@@ -120,17 +126,71 @@ function errorLoopTransaction(fn: () => void) {
   }
 }
 
-class RootState {
+type RootState = ClassicRootState | ComponentRootState;
+
+class ComponentRootState {
+  readonly type = 'component';
+
+  #result: RenderResult | undefined;
+  #render: () => void;
+
+  constructor(
+    state: RendererState,
+    definition: object,
+    options: { into: Cursor; args?: Record<string, unknown> }
+  ) {
+    this.#render = errorLoopTransaction(() => {
+      let iterator = glimmerRenderComponent(
+        state.runtime,
+        state.builder(state.env, options.into),
+        state.compilation,
+        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(): RenderResult | undefined {
+    return this.#result;
+  }
+}
+
+class ClassicRootState {
+  readonly type = 'classic';
   public id: string;
   public result: RenderResult | undefined;
   public destroyed: boolean;
   public render: () => void;
 
   constructor(
-    public root: Component | OutletView,
+    public root: ClassicComponent | OutletView,
     public runtime: RuntimeContext,
     context: CompileTimeCompilationContext,
-    owner: InternalOwner,
+    owner: object,
     template: Template,
     self: Reference<unknown>,
     parentElement: SimpleElement,
@@ -200,18 +260,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);
@@ -219,7 +279,7 @@ function deregister(renderer: Renderer): void {
 
 function loopBegin(): void {
   for (let renderer of renderers) {
-    renderer._scheduleRevalidate();
+    renderer.rerender();
   }
 }
 
@@ -259,7 +319,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
@@ -281,69 +341,265 @@ 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 = RuntimeResolver & CompileTimeResolver;
+
+interface RendererData {
+  owner: object;
+  runtime: RuntimeContext;
+  compilation: CompileTimeCompilationContext;
+  builder: (env: Environment, cursor: Cursor) => ElementBuilder;
+  resolver: Resolver;
+  env: {
+    isInteractive: boolean;
+    hasDOM: boolean;
+    document: SimpleDocument;
+  };
+}
 
-  private _owner: InternalOwner;
-  private _context: CompileTimeCompilationContext;
-  private _runtime: RuntimeContext;
+export class RendererState {
+  static create(owner: RendererData, renderer: BaseRenderer): RendererState {
+    const state = new RendererState(owner, renderer);
+    associateDestroyableChild(renderer, state);
+    return state;
+  }
 
-  private _lastRevision = -1;
-  private _destroyed = false;
+  readonly #data: RendererData;
+  #lastRevision = -1;
+  #inRenderTransaction = false;
+  #destroyed = false;
+  #roots: RootState[] = [];
+  #removedRoots: RootState[] = [];
 
-  /** @internal */
-  _isInteractive: boolean;
+  private constructor(data: RendererData, renderer: BaseRenderer) {
+    this.#data = data;
 
-  readonly _runtimeResolver: ResolverImpl;
+    registerDestructor(this, () => {
+      this.clearAllRoots(renderer);
+    });
+  }
 
-  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;
+  get debug() {
+    return {
+      roots: this.#roots,
+      inRenderTransaction: this.#inRenderTransaction,
+      isInteractive: this.#data.env.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);
   }
 
-  constructor(
-    owner: InternalOwner,
-    document: SimpleDocument,
-    env: { isInteractive: boolean; hasDOM: boolean },
-    rootTemplate: TemplateFactory,
-    viewRegistry: ViewRegistry,
-    builder = clientBuilder
-  ) {
-    this._owner = owner;
-    this._rootTemplate = rootTemplate(owner);
-    this._viewRegistry = viewRegistry || owner.lookup('-view-registry:main');
-    this._roots = [];
-    this._removedRoots = [];
-    this._builder = builder;
-    this._isInteractive = env.isInteractive;
+  get roots() {
+    return this.#roots;
+  }
 
-    // resolver is exposed for tests
-    let resolver = (this._runtimeResolver = new ResolverImpl());
+  get owner(): object {
+    return this.#data.owner;
+  }
 
-    let sharedArtifacts = artifacts();
+  get runtime(): RuntimeContext {
+    return this.#data.runtime;
+  }
 
-    this._context = programCompilationContext(
-      sharedArtifacts,
-      resolver,
-      (heap) => new RuntimeOpImpl(heap)
+  get builder(): (env: Environment, cursor: Cursor) => ElementBuilder {
+    return this.#data.builder;
+  }
+
+  get compilation(): CompileTimeCompilationContext {
+    return this.#data.compilation;
+  }
+
+  get env(): Environment {
+    return this.runtime.env;
+  }
+
+  get isInteractive(): boolean {
+    return this.#data.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;
+    let runtime = this.runtime;
+
+    do {
+      initialRootsLength = roots.length;
+
+      inTransaction(runtime.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;
+
+function intoTarget(into: IntoTarget): Cursor {
+  if ('element' in into) {
+    return into;
+  } else {
+    return { element: into as SimpleElement, nextSibling: null };
+  }
+}
+
+/**
+ * This function returns `undefined` if there was an error rendering the
+ * component.
+ *
+ * @fixme restructure this to return a result containing the error rather than
+ * undefined.
+ */
+export function renderComponent(
+  component: object,
+  {
+    owner,
+    env,
+    into,
+    args,
+  }: {
+    owner: object;
+    env: { document: SimpleDocument | Document; isInteractive: boolean; hasDOM?: boolean };
+    into: IntoTarget;
+    args?: Record<string, unknown>;
+  }
+): RenderResult | undefined {
+  let renderer = BaseRenderer.strict(owner, env.document, env);
+
+  return renderer.render(component, { into, args }).result;
+}
+
+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: object,
+    env: { isInteractive: boolean; hasDOM: boolean },
+    document: SimpleDocument,
+    resolver: Resolver,
+    builder: (env: Environment, cursor: Cursor) => ElementBuilder
+  ) {
     let runtimeEnvironmentDelegate = new EmberEnvironmentDelegate(owner, env.isInteractive);
-    this._runtime = runtimeContext(
+    let sharedArtifacts = artifacts();
+    let runtime = runtimeContext(
       {
         appendOperations: env.hasDOM
           ? new DOMTreeConstruction(document)
@@ -354,10 +610,26 @@ export class Renderer {
       sharedArtifacts,
       resolver
     );
+
+    this.state = RendererState.create(
+      {
+        owner,
+        runtime,
+        builder,
+        resolver,
+        compilation: programCompilationContext(
+          sharedArtifacts,
+          resolver,
+          (heap) => new RuntimeOpImpl(heap)
+        ),
+        env: { ...env, document: document },
+      },
+      this
+    );
   }
 
   get debugRenderTree(): DebugRenderTree {
-    let { debugRenderTree } = this._runtime.env;
+    let { debugRenderTree } = this.state.env;
 
     assert(
       'Attempted to access the DebugRenderTree, but it did not exist. Is the Ember Inspector open?',
@@ -367,6 +639,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 {
@@ -378,95 +724,99 @@ export class Renderer {
     );
   }
 
-  appendTo(view: Component, target: SimpleElement): void {
+  appendTo(view: ClassicComponent, target: SimpleElement): void {
     let definition = new RootComponentDefinition(view);
     this._appendDefinition(
       view,
-      curry(CurriedType.Component, definition, this._owner, null, true),
+      curry(CurriedType.Component, 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._runtime,
-      this._context,
-      this._owner,
+      this.state.runtime,
+      this.state.compilation,
+      this.state.owner,
       this._rootTemplate,
       self,
       target,
       dynamicScope,
-      this._builder
-    );
-    this._renderRoot(rootState);
-  }
-
-  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.state.builder
     );
-    this._viewRegistry[id] = view;
+    this.state.renderRoot(rootState, this);
   }
 
-  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.compilation;
+  }
+
+  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).'
@@ -474,12 +824,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);
 
@@ -489,125 +839,4 @@ export class Renderer {
 
     return { parentElement, firstNode, lastNode };
   }
-
-  createElement(tagName: string): SimpleElement {
-    return this._runtime.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, _runtime: runtime, _removedRoots: removedRoots } = this;
-    let initialRootsLength: number;
-
-    do {
-      initialRootsLength = roots.length;
-
-      inTransaction(runtime.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..69dc88483f3
--- /dev/null
+++ b/packages/@ember/-internals/glimmer/lib/renderer/strict-resolver.ts
@@ -0,0 +1,40 @@
+import type {
+  CompileTimeResolver as VMCompileTimeResolver,
+  InternalComponentManager,
+  Nullable,
+  ResolvedComponentDefinition,
+  RuntimeResolver as VMRuntimeResolver,
+} 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 implements VMRuntimeResolver, VMCompileTimeResolver {
+  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 3df207331b0..3017b89f9cc 100644
--- a/packages/@ember/-internals/glimmer/lib/resolver.ts
+++ b/packages/@ember/-internals/glimmer/lib/resolver.ts
@@ -120,7 +120,7 @@ function lookupComponentPair(
   }
 }
 
-const BUILTIN_KEYWORD_HELPERS: Record<string, object> = {
+export const BUILTIN_KEYWORD_HELPERS: Record<string, object> = {
   action,
   mut,
   readonly,
@@ -135,7 +135,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..73c8b3d7f90
--- /dev/null
+++ b/packages/@ember/-internals/glimmer/tests/integration/components/render-component-test.ts
@@ -0,0 +1,284 @@
+import {
+  AbstractStrictTestCase,
+  assertClassicComponentElement,
+  assertHTML,
+  buildOwner,
+  clickElement,
+  defComponent,
+  defineComponent,
+  defineSimpleHelper,
+  defineSimpleModifier,
+  moduleFor,
+  type ClassicComponentShape,
+} 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 } from '@glimmer/destroyable';
+import type { RenderResult } from '@glimmer/interfaces';
+import { renderComponent } from '../../../lib/renderer';
+
+class RenderComponentTestCase extends AbstractStrictTestCase {
+  component: RenderResult | undefined;
+  owner: object;
+
+  constructor(assert: QUnit['assert']) {
+    super(assert);
+
+    this.owner = buildOwner({});
+    associateDestroyableChild(this, this.owner);
+  }
+
+  get element() {
+    return document.querySelector('#qunit-fixture')!;
+  }
+
+  renderComponent(
+    component: object,
+    options: { expect: string } | { classic: ClassicComponentShape }
+  ) {
+    let { owner } = this;
+
+    run(() => {
+      this.component = renderComponent(component, {
+        owner,
+        env: { document: document, isInteractive: true, hasDOM: true },
+        into: this.element,
+      });
+      if (this.component) {
+        associateDestroyableChild(this, this.component);
+      }
+    });
+
+    if ('expect' in options) {
+      assertHTML(options.expect);
+    } else {
+      assertClassicComponentElement(options.classic);
+    }
+
+    this.assertStableRerender();
+  }
+}
+
+moduleFor(
+  'Strict Mode - renderComponent',
+  class extends RenderComponentTestCase {
+    '@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>' });
+    }
+  }
+);
+
+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/views/lib/mixins/view_support.ts b/packages/@ember/-internals/views/lib/mixins/view_support.ts
index 077ee789070..58b36a66ac3 100644
--- a/packages/@ember/-internals/views/lib/mixins/view_support.ts
+++ b/packages/@ember/-internals/views/lib/mixins/view_support.ts
@@ -7,6 +7,7 @@ import { matches } from '../system/utils';
 import type { View } from '@ember/-internals/glimmer/lib/renderer';
 import type { SimpleElement } from '@simple-dom/interface';
 import type CoreView from '../views/core_view';
+import type Component from '@ember/component';
 
 function K(this: unknown) {
   return this;
@@ -195,7 +196,7 @@ const ViewMixin = Mixin.create({
    @return {Ember.View} receiver
    @private
    */
-  appendTo(selector: string | Element | SimpleElement) {
+  appendTo(this: Component, selector: string | Element | SimpleElement) {
     let target;
 
     if (hasDOM) {
diff --git a/packages/ember-template-compiler/lib/plugins/assert-against-attrs.ts b/packages/ember-template-compiler/lib/plugins/assert-against-attrs.ts
index f2984a8c3ae..481e1a6839f 100644
--- a/packages/ember-template-compiler/lib/plugins/assert-against-attrs.ts
+++ b/packages/ember-template-compiler/lib/plugins/assert-against-attrs.ts
@@ -2,6 +2,7 @@ import { assert, deprecate } from '@ember/debug';
 import type { AST, ASTPlugin } from '@glimmer/syntax';
 import calculateLocationDisplay from '../system/calculate-location-display';
 import type { EmberASTPluginEnvironment } from '../types';
+import { trackLocals } from './utils';
 
 /**
  @module ember
@@ -23,48 +24,16 @@ import type { EmberASTPluginEnvironment } from '../types';
 export default function assertAgainstAttrs(env: EmberASTPluginEnvironment): ASTPlugin {
   let { builders: b } = env.syntax;
   let moduleName = env.meta?.moduleName;
-
-  let stack: string[][] = [[]];
-
-  function updateBlockParamsStack(blockParams: string[]) {
-    let parent = stack[stack.length - 1];
-    assert('has parent', parent);
-    stack.push(parent.concat(blockParams));
-  }
+  let { hasLocal, visitor } = trackLocals(env);
 
   return {
     name: 'assert-against-attrs',
 
     visitor: {
-      Template: {
-        enter(node: AST.Template) {
-          updateBlockParamsStack(node.blockParams);
-        },
-        exit() {
-          stack.pop();
-        },
-      },
-
-      Block: {
-        enter(node: AST.Block) {
-          updateBlockParamsStack(node.blockParams);
-        },
-        exit() {
-          stack.pop();
-        },
-      },
-
-      ElementNode: {
-        enter(node: AST.ElementNode) {
-          updateBlockParamsStack(node.blockParams);
-        },
-        exit() {
-          stack.pop();
-        },
-      },
+      ...visitor,
 
       PathExpression(node: AST.PathExpression): AST.Node | void {
-        if (isAttrs(node, stack[stack.length - 1]!)) {
+        if (isAttrs(node, hasLocal)) {
           assert(
             `Using {{attrs}} to reference named arguments is not supported. {{${
               node.original
@@ -106,12 +75,8 @@ export default function assertAgainstAttrs(env: EmberASTPluginEnvironment): ASTP
   };
 }
 
-function isAttrs(node: AST.PathExpression, symbols: string[]) {
-  return (
-    node.head.type === 'VarHead' &&
-    node.head.name === 'attrs' &&
-    symbols.indexOf(node.head.name) === -1
-  );
+function isAttrs(node: AST.PathExpression, hasLocal: (k: string) => boolean) {
+  return node.head.type === 'VarHead' && node.head.name === 'attrs' && !hasLocal(node.head.name);
 }
 
 function isThisDotAttrs(node: AST.PathExpression) {
diff --git a/packages/ember-template-compiler/lib/plugins/assert-against-named-outlets.ts b/packages/ember-template-compiler/lib/plugins/assert-against-named-outlets.ts
index c680f3b7259..da7931acfca 100644
--- a/packages/ember-template-compiler/lib/plugins/assert-against-named-outlets.ts
+++ b/packages/ember-template-compiler/lib/plugins/assert-against-named-outlets.ts
@@ -2,6 +2,7 @@ import { assert } from '@ember/debug';
 import type { AST, ASTPlugin } from '@glimmer/syntax';
 import calculateLocationDisplay from '../system/calculate-location-display';
 import type { EmberASTPluginEnvironment } from '../types';
+import { trackLocals } from './utils';
 
 /**
  @module ember
@@ -15,16 +16,19 @@ import type { EmberASTPluginEnvironment } from '../types';
 */
 export default function assertAgainstNamedOutlets(env: EmberASTPluginEnvironment): ASTPlugin {
   let moduleName = env.meta?.moduleName;
+  let { hasLocal, visitor } = trackLocals(env);
 
   return {
     name: 'assert-against-named-outlets',
 
     visitor: {
+      ...visitor,
       MustacheStatement(node: AST.MustacheStatement) {
         if (
           node.path.type === 'PathExpression' &&
           node.path.original === 'outlet' &&
-          node.params[0]
+          node.params[0] &&
+          !hasLocal('outlet')
         ) {
           let sourceInformation = calculateLocationDisplay(moduleName, node.loc);
           assert(
diff --git a/packages/ember-template-compiler/lib/plugins/assert-input-helper-without-block.ts b/packages/ember-template-compiler/lib/plugins/assert-input-helper-without-block.ts
index f16e76056c4..9164bd92286 100644
--- a/packages/ember-template-compiler/lib/plugins/assert-input-helper-without-block.ts
+++ b/packages/ember-template-compiler/lib/plugins/assert-input-helper-without-block.ts
@@ -2,16 +2,20 @@ import { assert } from '@ember/debug';
 import type { AST, ASTPlugin } from '@glimmer/syntax';
 import calculateLocationDisplay from '../system/calculate-location-display';
 import type { EmberASTPluginEnvironment } from '../types';
-import { isPath } from './utils';
+import { isPath, trackLocals } from './utils';
 
 export default function errorOnInputWithContent(env: EmberASTPluginEnvironment): ASTPlugin {
   let moduleName = env.meta?.moduleName;
+  let { hasLocal, visitor } = trackLocals(env);
 
   return {
     name: 'assert-input-helper-without-block',
 
     visitor: {
+      ...visitor,
       BlockStatement(node: AST.BlockStatement) {
+        if (hasLocal('input')) return;
+
         if (isPath(node.path) && node.path.original === 'input') {
           assert(assertMessage(moduleName, node));
         }
diff --git a/packages/ember-template-compiler/lib/plugins/transform-action-syntax.ts b/packages/ember-template-compiler/lib/plugins/transform-action-syntax.ts
index 2ee6fdd4bc4..d606378f2ec 100644
--- a/packages/ember-template-compiler/lib/plugins/transform-action-syntax.ts
+++ b/packages/ember-template-compiler/lib/plugins/transform-action-syntax.ts
@@ -1,6 +1,6 @@
 import type { AST, ASTPlugin } from '@glimmer/syntax';
 import type { Builders, EmberASTPluginEnvironment } from '../types';
-import { isPath } from './utils';
+import { isPath, trackLocals } from './utils';
 
 /**
  @module ember
@@ -27,27 +27,29 @@ import { isPath } from './utils';
   @class TransformActionSyntax
 */
 
-export default function transformActionSyntax({ syntax }: EmberASTPluginEnvironment): ASTPlugin {
-  let { builders: b } = syntax;
+export default function transformActionSyntax(env: EmberASTPluginEnvironment): ASTPlugin {
+  let { builders: b } = env.syntax;
+  let { hasLocal, visitor } = trackLocals(env);
 
   return {
     name: 'transform-action-syntax',
 
     visitor: {
+      ...visitor,
       ElementModifierStatement(node: AST.ElementModifierStatement) {
-        if (isAction(node)) {
+        if (isAction(node, hasLocal)) {
           insertThisAsFirstParam(node, b);
         }
       },
 
       MustacheStatement(node: AST.MustacheStatement) {
-        if (isAction(node)) {
+        if (isAction(node, hasLocal)) {
           insertThisAsFirstParam(node, b);
         }
       },
 
       SubExpression(node: AST.SubExpression) {
-        if (isAction(node)) {
+        if (isAction(node, hasLocal)) {
           insertThisAsFirstParam(node, b);
         }
       },
@@ -55,8 +57,11 @@ export default function transformActionSyntax({ syntax }: EmberASTPluginEnvironm
   };
 }
 
-function isAction(node: AST.ElementModifierStatement | AST.MustacheStatement | AST.SubExpression) {
-  return isPath(node.path) && node.path.original === 'action';
+function isAction(
+  node: AST.ElementModifierStatement | AST.MustacheStatement | AST.SubExpression,
+  hasLocal: (k: string) => boolean
+) {
+  return isPath(node.path) && node.path.original === 'action' && !hasLocal('action');
 }
 
 function insertThisAsFirstParam(
diff --git a/packages/ember-template-compiler/lib/plugins/transform-each-track-array.ts b/packages/ember-template-compiler/lib/plugins/transform-each-track-array.ts
index 269937a098c..6465a1c33c8 100644
--- a/packages/ember-template-compiler/lib/plugins/transform-each-track-array.ts
+++ b/packages/ember-template-compiler/lib/plugins/transform-each-track-array.ts
@@ -1,7 +1,7 @@
 import type { AST, ASTPlugin } from '@glimmer/syntax';
 import { assert } from '@ember/debug';
 import type { EmberASTPluginEnvironment } from '../types';
-import { isPath } from './utils';
+import { isPath, trackLocals } from './utils';
 
 /**
  @module ember
@@ -25,13 +25,15 @@ import { isPath } from './utils';
 */
 export default function transformEachTrackArray(env: EmberASTPluginEnvironment): ASTPlugin {
   let { builders: b } = env.syntax;
+  let { hasLocal, visitor } = trackLocals(env);
 
   return {
     name: 'transform-each-track-array',
 
     visitor: {
+      ...visitor,
       BlockStatement(node: AST.BlockStatement): AST.Node | void {
-        if (isPath(node.path) && node.path.original === 'each') {
+        if (isPath(node.path) && node.path.original === 'each' && !hasLocal('each')) {
           let firstParam = node.params[0];
           assert('has firstParam', firstParam);
 
diff --git a/packages/ember-template-compiler/lib/plugins/transform-resolutions.ts b/packages/ember-template-compiler/lib/plugins/transform-resolutions.ts
index ef4fce732bc..311a485d0e0 100644
--- a/packages/ember-template-compiler/lib/plugins/transform-resolutions.ts
+++ b/packages/ember-template-compiler/lib/plugins/transform-resolutions.ts
@@ -67,7 +67,7 @@ const TARGETS = Object.freeze(['helper', 'modifier']);
 export default function transformResolutions(env: EmberASTPluginEnvironment): ASTPlugin {
   let { builders: b } = env.syntax;
   let moduleName = env.meta?.moduleName;
-  let { hasLocal, node: tracker } = trackLocals();
+  let { hasLocal, node: tracker } = trackLocals(env);
   let seen: Set<AST.Node> | undefined;
 
   return {
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 32482c8f404..9a9f45b4a47 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
@@ -37,15 +37,13 @@ import { isPath, trackLocals } from './utils';
 export default function transformWrapMountAndOutlet(env: EmberASTPluginEnvironment): ASTPlugin {
   let { builders: b } = env.syntax;
 
-  let { hasLocal, node } = trackLocals();
+  let { hasLocal, visitor } = trackLocals(env);
 
   return {
     name: 'transform-wrap-mount-and-outlet',
 
     visitor: {
-      Template: node,
-      ElementNode: node,
-      Block: node,
+      ...visitor,
 
       MustacheStatement(node: AST.MustacheStatement): AST.Node | void {
         if (
diff --git a/packages/ember-template-compiler/lib/plugins/utils.ts b/packages/ember-template-compiler/lib/plugins/utils.ts
index 112ed51df4b..99278ad7b8f 100644
--- a/packages/ember-template-compiler/lib/plugins/utils.ts
+++ b/packages/ember-template-compiler/lib/plugins/utils.ts
@@ -1,4 +1,5 @@
 import type { AST } from '@glimmer/syntax';
+import type { EmberASTPluginEnvironment } from '../types';
 
 export function isPath(node: AST.Node): node is AST.PathExpression {
   return node.type === 'PathExpression';
@@ -20,7 +21,11 @@ function getLocalName(node: string | AST.VarHead): string {
   }
 }
 
-export function trackLocals() {
+export function inScope(env: EmberASTPluginEnvironment, name: string): boolean {
+  return Boolean(env.lexicalScope?.(name));
+}
+
+export function trackLocals(env: EmberASTPluginEnvironment) {
   let locals = new Map();
 
   let node = {
@@ -49,7 +54,12 @@ export function trackLocals() {
   };
 
   return {
-    hasLocal: (key: string) => locals.has(key),
+    hasLocal: (key: string) => locals.has(key) || inScope(env, key),
     node,
+    visitor: {
+      Template: node,
+      ElementNode: node,
+      Block: node,
+    },
   };
 }
diff --git a/packages/ember-template-compiler/lib/types.ts b/packages/ember-template-compiler/lib/types.ts
index 6c068cb74c3..9844f780e72 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,10 +20,13 @@ interface Plugins {
   ast: PluginFunc[];
 }
 
+export type LexicalScope = NonNullable<PrecompileOptionsWithLexicalScope['lexicalScope']>;
+
 export interface EmberPrecompileOptions extends PrecompileOptions {
   isProduction?: boolean;
   moduleName?: string;
   plugins?: Plugins;
+  lexicalScope?: LexicalScope;
 }
 
 export type EmberASTPluginEnvironment = ASTPluginEnvironment & EmberPrecompileOptions;
diff --git a/packages/internal-test-helpers/index.ts b/packages/internal-test-helpers/index.ts
index 53966bcceb7..82596370324 100644
--- a/packages/internal-test-helpers/index.ts
+++ b/packages/internal-test-helpers/index.ts
@@ -14,6 +14,7 @@ export {
   ignoreDeprecation,
 } from './lib/ember-dev/deprecation';
 export {
+  defComponent,
   defineComponent,
   defineSimpleHelper,
   defineSimpleModifier,
@@ -24,7 +25,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';
@@ -32,6 +37,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 e842bf28c0b..09ae55be41a 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>[]
@@ -39,7 +39,7 @@ export function moduleForDevelopment<T extends AbstractTestCase, M extends Gener
   }
 }
 
-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>[]
@@ -57,7 +57,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>[]
@@ -123,7 +123,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 b8babd323a9..56b7959bea0 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'];