Is there a way to extend a template?

[sseira]

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>
  `,
})

[KingOfTac]

This would work. Keep in mind that whatever markup you add to a template can only appear either before or after the template. Currently there isn't a way to inject new markup into the middle of an existing template, but there is some ongoing work to enable that.

[sseira]

Awesome to hear this is in the works.

I wasn't able to get this to approach to work in practice though - couldn't get the types to match properly.

Any chance you have an example of using a template within a template?

[chrisdholt]

One example would be breadcrumb-item: https://github.com/microsoft/fast/blob/master/packages/web-components/fast-foundation/src/breadcrumb-item/breadcrumb-item.template.ts

It certainly depends on the implementation, but we're using the Anchor template in there ourselves. (note: this is using the latest alpha of Foundation and beta of Fast element...)