diff --git a/src/app-data/index.ts b/src/app-data/index.ts
index 33c39e13853..7cb73f320c8 100644
--- a/src/app-data/index.ts
+++ b/src/app-data/index.ts
@@ -105,7 +105,7 @@ export const BUILD: BuildConditionals = {
   devTools: false,
   shadowDelegatesFocus: true,
   initializeNextTick: false,
-  asyncLoading: false,
+  asyncLoading: true,
   asyncQueue: false,
   transformTagName: false,
   attachStyles: true,
diff --git a/test/wdio/custom-elements-hierarchy-lifecycle/cmp-child.tsx b/test/wdio/custom-elements-hierarchy-lifecycle/cmp-child.tsx
new file mode 100644
index 00000000000..cf4fb3ce233
--- /dev/null
+++ b/test/wdio/custom-elements-hierarchy-lifecycle/cmp-child.tsx
@@ -0,0 +1,18 @@
+import { Component, h } from '@stencil/core';
+
+import { createAndAppendElement } from './cmp-util.js';
+
+@Component({
+  tag: 'custom-elements-hierarchy-lifecycle-child',
+  shadow: true,
+})
+export class CustomElementsHierarchyLifecycleChild {
+  async componentDidLoad(): Promise<void> {
+    createAndAppendElement('DID LOAD CHILD');
+    return Promise.resolve();
+  }
+
+  render() {
+    return <p>CHILD CONTENT</p>;
+  }
+}
diff --git a/test/wdio/custom-elements-hierarchy-lifecycle/cmp-parent.tsx b/test/wdio/custom-elements-hierarchy-lifecycle/cmp-parent.tsx
new file mode 100644
index 00000000000..d9131aa1646
--- /dev/null
+++ b/test/wdio/custom-elements-hierarchy-lifecycle/cmp-parent.tsx
@@ -0,0 +1,18 @@
+import { Component, h } from '@stencil/core';
+
+import { createAndAppendElement } from './cmp-util.js';
+
+@Component({
+  tag: 'custom-elements-hierarchy-lifecycle-parent',
+  shadow: true,
+})
+export class CustomElementsHierarchyLifecycleParent {
+  async componentDidLoad(): Promise<void> {
+    createAndAppendElement('DID LOAD PARENT');
+    return Promise.resolve();
+  }
+
+  render() {
+    return <custom-elements-hierarchy-lifecycle-child></custom-elements-hierarchy-lifecycle-child>;
+  }
+}
diff --git a/test/wdio/custom-elements-hierarchy-lifecycle/cmp-util.ts b/test/wdio/custom-elements-hierarchy-lifecycle/cmp-util.ts
new file mode 100644
index 00000000000..e47bb48baf1
--- /dev/null
+++ b/test/wdio/custom-elements-hierarchy-lifecycle/cmp-util.ts
@@ -0,0 +1,6 @@
+export const createAndAppendElement = (text: string) => {
+  const p = document.createElement('p');
+  p.textContent = text;
+
+  document.body.appendChild(p);
+};
diff --git a/test/wdio/custom-elements-hierarchy-lifecycle/cmp.test.tsx b/test/wdio/custom-elements-hierarchy-lifecycle/cmp.test.tsx
new file mode 100644
index 00000000000..c864a91dd92
--- /dev/null
+++ b/test/wdio/custom-elements-hierarchy-lifecycle/cmp.test.tsx
@@ -0,0 +1,35 @@
+import { Fragment, h } from '@stencil/core';
+import { render } from '@wdio/browser-runner/stencil';
+
+import { defineCustomElement as defineCustomElementChildCmp } from '../test-components/custom-elements-hierarchy-lifecycle-child.js';
+import { defineCustomElement as defineCustomElementParentCmp } from '../test-components/custom-elements-hierarchy-lifecycle-parent.js';
+
+describe('custom-elements-hierarchy-lifecycle', () => {
+  before(() => {
+    defineCustomElementChildCmp();
+    defineCustomElementParentCmp();
+  });
+
+  it('should call componentDidLoad in the child before the parent', async () => {
+    expect(customElements.get('custom-elements-hierarchy-lifecycle-child')).toBeDefined();
+    expect(customElements.get('custom-elements-hierarchy-lifecycle-parent')).toBeDefined();
+
+    render({
+      template: () => (
+        <>
+          <custom-elements-hierarchy-lifecycle-parent></custom-elements-hierarchy-lifecycle-parent>
+        </>
+      ),
+    });
+
+    const elm = document.querySelector('custom-elements-hierarchy-lifecycle-parent');
+    expect(elm.shadowRoot).toBeDefined();
+
+    await browser.waitUntil(() => Boolean(elm.shadowRoot.querySelector('custom-elements-hierarchy-lifecycle-child')));
+
+    expect(Array.from(document.querySelectorAll('p')).map((r) => r.textContent)).toEqual([
+      'DID LOAD CHILD',
+      'DID LOAD PARENT',
+    ]);
+  });
+});