Glint
Search…
Template-Only Components
A template-only component is any template for which Ember (and Glint) can't locate a backing TS or JS module. In Glint, these are treated very similarly to a component with an empty signature: it has no args, and it can't yield to blocks or apply ...attributes anywhere. Additionally, the value of {{this}} in such a template will be void.
While it's possible to do some simple things like invoking other components from these templates, typically you'll want to create a backing module for your template so you can declare its signature, add it to the template registry, and so on.
1
import templateOnlyComponent from '@ember/component/template-only';
2
3
interface ShoutSignature {
4
Element: HTMLDivElement;
5
Args: { message: string };
6
Blocks: {
7
default: [shoutedMessage: string];
8
};
9
}
10
11
const Shout = templateOnlyComponent<ShoutSignature>();
12
13
export default Shout;
14
15
declare module '@glint/environment-ember-loose/registry' {
16
export default interface Registry {
17
Shout: typeof Shout;
18
}
19
}
Copied!
Note that the runtime content of this module (effectively export default templateOnlyComponent();) is exactly what Ember generates at build time when creating a backing module for a template-only component.
Copy link
Edit on GitHub