refactor(cli): test fixtures for shadow DOM

Updates test fixtures to correctly retrieve the host element for components using Shadow DOM.

This change ensures that tests targeting shadow DOM elements are properly scoped and that the correct component instance is being referenced. It also adds the `contains: true` property to the `assertText` calls so tests can more accurately assert against rendered text.

Author: Vheissu

app-min/test__if_not_no-unit-tests/my-app.spec.ext

@@ -29,13 +29,13 @@ describe('my-app', () => {
     }
     // @endif
     // @if !tailwindcss
-    assertText('Hello World!', { compact: true });
+    assertText('Hello World!', { compact: true, contains: true });
     // @endif
   });
 
   // @if shadow-dom
   it('applies shared Shadow DOM styles to internal elements', async () => {
-    const { host } = await createFixture('<my-app></my-app>', {}, [MyApp]).started;
+    const { appHost: host } = await createFixture('<my-app></my-app>', {}, [MyApp]).started;
 
     // Locate element rendered inside the component's own shadow root
     const sharedStyledEl = host.shadowRoot?.querySelector('.shared-shadow-style');
@@ -48,8 +48,8 @@ describe('my-app', () => {
 
   it('ensures CSS isolation between Shadow DOM components', async () => {
     // Create two instances of the component
-    const { host: host1 } = await createFixture('<my-app></my-app>', {}, [MyApp]).started;
-    const { host: host2 } = await createFixture('<my-app></my-app>', {}, [MyApp]).started;
+    const { appHost: host1 } = await createFixture('<my-app></my-app>', {}, [MyApp]).started;
+    const { appHost: host2 } = await createFixture('<my-app></my-app>', {}, [MyApp]).started;
 
     // Verify both components have their own shadow roots
     expect(host1.shadowRoot).not.toBeNull();

plugin-min/src/hello-world.html

@@ -1 +1,11 @@
 <h1 class="hello-world">Hello World! ${message}</h1>
+<!-- @if shadow-dom -->
+<div class="shadow-demo-section">
+  <div class="shared-shadow-style">
+    <div class="shared-shadow-text">This content uses shared Shadow DOM styles!</div>
+  </div>
+  <div class="shadow-demo-border">
+    <div>Plugin component with Shadow DOM isolation</div>
+  </div>
+</div>
+<!-- @endif -->

plugin-min/test__if_not_no-unit-tests/hello-world.spec.ext

@@ -12,12 +12,12 @@ describe('my-app', () => {
       [HelloWorld],
     ).started;
 
-    assertText('Hello World! foo', { compact: true });
+    assertText('Hello World!', { compact: true, contains: true });
   });
 
   // @if shadow-dom
   it('applies shared Shadow DOM styles to internal elements', async () => {
-    const { host } = await createFixture(
+    const { appHost: host } = await createFixture(
       '<hello-world message="test"></hello-world>',
       { message: "test" },
       [HelloWorld],
@@ -34,12 +34,12 @@ describe('my-app', () => {
 
   it('ensures CSS isolation between Shadow DOM components', async () => {
     // Create two instances of the component
-    const { host: host1 } = await createFixture(
+    const { appHost: host1 } = await createFixture(
       '<hello-world message="test1"></hello-world>',
       { message: "test1" },
       [HelloWorld],
     ).started;
-    const { host: host2 } = await createFixture(
+    const { appHost: host2 } = await createFixture(
       '<hello-world message="test2"></hello-world>',
       { message: "test2" },
       [HelloWorld],