Is there a way to extend a template? or use a template within a template?

[sseira]

Discussed in https://github.com/microsoft/fast/discussions/6301

^{Originally posted by sseira August 19, 2022} I would like to add help-text slot to radio button component using @fast-element.

However, I would like to leverage radio.template.ts and avoid creating a totally new template that simply adds another named slot .

Is there a way to do something like this:

import import {
  radioTemplate,
} from '@microsoft/fast-foundation'

const radioWithHelpTextTemplate = (context: ElementDefinitionContext,
  definition: OverrideFoundationElementDefinition<NewRadioOptions>) => 
     html`
         ${radioTemplate(context, definition}
         <slot name='help-text'></slot>
    `
export const radio = Radio.compose<RadioOptions>({
  baseName: 'radio',
  template: radioWithHelpTextTemplate,
  styles: radioStyles,
  shadowOptions: {
    delegatesFocus: true,
  },
  checkedIndicator: `
    <div class="overlay">
        <div class="outline">
            <div class="dot"></div>
        </div>
    </div>
  `,
})


```</div>

[nicholasrice]

Working repro of the above here: https://stackblitz.com/edit/typescript-vbqeaz?file=index.ts,index.html

I think this is a bug. Templates can be embedded in other templates and I'm pretty sure we do this in other places, so I think this is a radio issue.

[janechu]

This appears to be solved in v2 of @microsoft/fast-element.