Move test-app to gts

test-app/app/components/my-custom-content.gts

@@ -0,0 +1,6 @@
+import type { BasicDropdownContentSignature } from 'ember-basic-dropdown/components/basic-dropdown-content';
+import type { TemplateOnlyComponent } from '@ember/component/template-only';
+
+export default <template>
+  <span id="my-custom-content" ...attributes>My custom content</span>
+</template> satisfies TemplateOnlyComponent<BasicDropdownContentSignature>;

test-app/app/components/my-custom-trigger.gts

@@ -0,0 +1,6 @@
+import type { BasicDropdownTriggerSignature } from 'ember-basic-dropdown/components/basic-dropdown-trigger';
+import type { TemplateOnlyComponent } from '@ember/component/template-only';
+
+export default <template>
+  <span id="my-custom-trigger" ...attributes>My custom trigger</span>
+</template> satisfies TemplateOnlyComponent<BasicDropdownTriggerSignature>;

test-app/app/components/shadow-root.ts → test-app/app/components/shadow-root.gts

@@ -1,5 +1,6 @@
 import Component from '@glimmer/component';
 import { getOwner } from '@ember/owner';
+import not from 'ember-truth-helpers/helpers/not';
 
 // @ts-expect-error Public property 'isFastBoot' of exported class
 const isFastBoot = typeof FastBoot !== 'undefined';
@@ -38,6 +39,18 @@ export default class ShadowRoot extends Component<{
   get getStyles() {
     return [...document.head.querySelectorAll('link')].map((link) => link.href);
   }
+  <template>
+    {{#if (not this.shadowDom)}}
+      {{yield}}
+    {{else if this.shadowRootElement}}
+      {{#in-element this.shadowRootElement}}
+        {{#each this.getStyles as |styleHref|}}
+          <link rel="stylesheet" type="text/css" href={{styleHref}} />
+        {{/each}}
+        {{yield}}
+      {{/in-element}}
+    {{/if}}
+  </template>
 }
 
 declare module '@glint/environment-ember-loose/registry' {

test-app/app/components/shadow.ts → test-app/app/components/shadow.gts

@@ -24,6 +24,18 @@ export default class Shadow extends Component<{
       set(div);
     },
   );
+  <template>
+    <div data-shadow {{this.attachShadow this.setShadow}} ...attributes></div>
+
+    {{#if this.shadow}}
+      {{#in-element this.shadow}}
+        {{#each this.getStyles as |styleHref|}}
+          <link rel="stylesheet" type="text/css" href={{styleHref}} />
+        {{/each}}
+        {{yield}}
+      {{/in-element}}
+    {{/if}}
+  </template>
 }
 
 declare module '@glint/environment-ember-loose/registry' {

test-app/app/templates/application.gts

@@ -0,0 +1,13 @@
+import RouteTemplate from 'ember-route-template';
+import ShadowRoot from '../components/shadow-root';
+import BasicDropdownWormhole from 'ember-basic-dropdown/components/basic-dropdown-wormhole';
+
+export default RouteTemplate(
+  <template>
+    <ShadowRoot>
+      <BasicDropdownWormhole />
+
+      {{outlet}}
+    </ShadowRoot>
+  </template>,
+);

test-app/app/templates/shadow-root.gts

@@ -0,0 +1,11 @@
+import RouteTemplate from 'ember-route-template';
+import BasicDropdown from 'ember-basic-dropdown/components/basic-dropdown';
+
+export default RouteTemplate(
+  <template>
+    <BasicDropdown as |dropdown|>
+      <dropdown.Trigger>Open me, i'm in shadow</dropdown.Trigger>
+      <dropdown.Content><h3>Content of the dropdown in shadow</h3></dropdown.Content>
+    </BasicDropdown>
+  </template>,
+);

test-app/eslint.config.mjs

@@ -96,6 +96,9 @@ export default ts.config(
     plugins: {
       qunit,
     },
+    rules: {
+      '@typescript-eslint/no-this-alias': 'off',
+    },
   },
   /**
    * CJS node files

test-app/package.json

@@ -74,7 +74,8 @@
     "ember-page-title": "^9.0.3",
     "ember-qunit": "^9.0.4",
     "ember-resolver": "^13.1.1",
-    "ember-source": "~6.9.0",
+    "ember-route-template": "^1.0.3",
+    "ember-source": "~6.7.0",
     "ember-source-channel-url": "^3.0.0",
     "ember-template-imports": "^4.3.0",
     "ember-template-lint": "^7.9.3",