[BUG]: TemplateHelper cannot render lit element values when they are passed in a template

[musale]

Describe the bug When you re-use an mgt element with templates in a another component, passing in dynamic values to the mgtHtml or html template literals for it, the values are not rendered. Instead, you get class$lit$' type of attributes and lit$972034732349$ type of values. In the renderNode step of the TemplateHelper, these values cannot be interpreted and the rendering fails.

To Reproduce Steps to reproduce the behavior:

1. Change the render code for any component to this:

   const noDataClasses = 'someClass';
   const noFileFoundString = 'No file with that query';
   
   return mgtHtml`
     <div>
       <mgt-file file-query="/me/drive/items/01BYE5RZZFWGWWVNVHYXE3OUJHGWCT2">
         <template data-type="default">
             <div class="root">
                 <span>Found the file {{file.name}} created on {{dayFromDateTime(file.createdDateTime)}}
           </div>
         </template>
         <template data-type="loading">
           <div class="root">
             loading file
           </div>
         </template>
         <template data-type="no-data">
           <div class="${noDataClasses}">
             ^_^ ${noFileFoundString}
           </div>
         </template>
       </mgt-file>
     </div>
   `;
   

   I used mgt-tasks.

2. Load the component in the storybook or web server.

3. View that there are no people and the no-data template is rendered.

5. The template renders the concrete values and leaves out the dynamic ones.

Expected behavior Any mgt element used inside another mgt element should render correctly without any errors. If you hard-code the values it works correctly.

But that isn't going to be useful in localization instances or dynamic rendering of specific elements.

Screenshots

Logging in the TemplateHelper methods (renderNode` shows the following error:

The rendered template on the DOM looks like this:

Environment (please complete the following information):

• OS: Windows 11
• Browser: Chrome
• Framework: None
• Context: Web, TemplateHelper, Lit
• Version: latest
• Provider: None

Additional context I dug around and found out I can render the strings passed to their values in the mgtHtml template tag helper. However, that with render all the elements and it does a bad job for objects passed. However, at that level we have the values of the passed in strings. This bug was discovered working on #2150 where I use mgt-people inside mgt-tasks and I render an icon alongside the Assign string if there are no people assigned to a task.

[ghost]

Hello musale, thank you for opening an issue with us!

I have automatically added a "needs triage" label to help get things started. Our team will analyze and investigate the issue, and escalate it to the relevant team if possible. Other community members may also look into the issue and provide feedback 🙌