Use new syntax to create dynamic components (#456)

trailheadapps · Nov 1, 2023 · 83a151c · 83a151c
1 parent f7d85a2
commit 83a151c
Show file tree

Hide file tree

Showing 2 changed files with 14 additions and 17 deletions.
diff --git a/src/modules/recipe/compositionDynamic/__tests__/compositionDynamic.test.js b/src/modules/recipe/compositionDynamic/__tests__/compositionDynamic.test.js
@@ -23,10 +23,9 @@ describe('recipe-composition-dynamic', () => {
         document.body.appendChild(element);
 
         // Select the Dynamic Element
-        const dynamicEl = element.shadowRoot.querySelectorAll(
-            'recipe-dynamic-import'
-        );
-        expect(dynamicEl.length).toBe(0);
+        const dynamicEl =
+            element.shadowRoot.querySelector('.dynamic-component');
+        expect(dynamicEl.children.length).toBe(0);
     });
 
     it('renders the Hello component on button click', async () => {
@@ -40,11 +39,15 @@ describe('recipe-composition-dynamic', () => {
         const buttonEl = element.shadowRoot.querySelector('ui-button');
         buttonEl.click();
 
-        return flushPromises().then(() => {
-            const dynamicEl = element.shadowRoot.querySelectorAll(
-                'recipe-dynamic-import'
-            );
-            expect(dynamicEl.length).toBe(1);
-        });
+        await flushPromises();
+
+        const dynamicEl =
+            element.shadowRoot.querySelector('.dynamic-component');
+        expect(dynamicEl.children.length).toBe(1);
+
+        expect(
+            // eslint-disable-next-line @lwc/lwc/no-inner-html
+            dynamicEl.children[0].shadowRoot.innerHTML.includes('Hello, World!')
+        ).toBe(true);
     });
 });
diff --git a/src/modules/recipe/compositionDynamic/compositionDynamic.html b/src/modules/recipe/compositionDynamic/compositionDynamic.html
@@ -4,13 +4,7 @@
         </ui-button>
 
         <div class="dynamic-component">
-            <!-- 
-                You can use any tag name for the dynamic component as long as it belongs to your namespace and it's not an existing component in your project.
-                For example: In this recipe, we use a "recipe-dynamic-import" tag, but there's no dynamicImport component in the recipe namespace.
-            -->
-            <recipe-dynamic-import
-                lwc:dynamic={componentConstructor}
-            ></recipe-dynamic-import>
+            <lwc:component lwc:is={componentConstructor}></lwc:component>
         </div>
 
         <recipe-view-source source="recipe/compositionDynamic" slot="footer">