# Can addons use template-only components? **URL:** \ **Category:** Uncategorized\ **Created:** [January 8, 2020, 11:37am UTC](https://discuss.emberjs.com/t/can-addons-use-template-only-components/17399 "2020-01-08T11:37:07Z")\ **Posts on this page:** 7\ **Page:** 1
**Author:** ![jelhan](https://sea1.discourse-cdn.com/flex019/user_avatar/discuss.emberjs.com/jelhan/32/16917_2.png) [@jelhan](https://discuss.emberjs.com/u/jelhan)\ **Post date:** [January 8, 2020, 11:37am UTC](https://discuss.emberjs.com/t/can-addons-use-template-only-components/17399/1 "2020-01-08T11:37:07Z")
Came across another question related to Octane and addons: Assuming the addon only supports ember \>= 3.15 could it use template-only components without requiring `template-only-glimmer-components` feature to be enabled on consuming application? Or should it add an empty glimmer component to prevent a wrapper div if that optional feature is disabled? If so: Does this have any performance impact? And assuming that’s the case: Did someone already wrote an addon that adds the boilerplate classes at build-time only if needed? ---
**Author:** ![jelhan](https://sea1.discourse-cdn.com/flex019/user_avatar/discuss.emberjs.com/jelhan/32/16917_2.png) [@jelhan](https://discuss.emberjs.com/u/jelhan)\ **Post date:** [January 8, 2020, 1:32pm UTC](https://discuss.emberjs.com/t/can-addons-use-template-only-components/17399/2 "2020-01-08T13:32:28Z")
Locks pointed me to the RFC which covers that question: [https://emberjs.github.io/rfcs/0481-component-templates-co-location.html#template-only-components](https://emberjs.github.io/rfcs/0481-component-templates-co-location.html#template-only-components) > Currently, the only way to create a “true” template-only component is by enabling an optional feature in the app. Since addons cannot assume the value of that flag in the consuming app, they currently cannot take advantage of the feature. By providing this function, addon authors can work around this problem by explicitly defining a JavaScript file with `templateOnlyComponent()` as the default export. ---
**Author:** ![bartocc](https://sea1.discourse-cdn.com/flex019/user_avatar/discuss.emberjs.com/bartocc/32/10812_2.png) [@bartocc](https://discuss.emberjs.com/u/bartocc)\ **Post date:** [May 7, 2020, 12:55pm UTC](https://discuss.emberjs.com/t/can-addons-use-template-only-components/17399/3 "2020-05-07T12:55:35Z")
does that mean that instead of writting the `addon/components/x-foo/index.js` component file with ```nohighlight import Component from "@glimmer/component"; export default class XFooComponent extends Component {} ``` an addon author could do ```nohighlight import templateOnly from '@ember/component/template-only'; export default templateOnly(); ``` If so, I don’t really see what’s to gain. But I feel like there is something I am missing here ---
**Author:** ![jelhan](https://sea1.discourse-cdn.com/flex019/user_avatar/discuss.emberjs.com/jelhan/32/16917_2.png) [@jelhan](https://discuss.emberjs.com/u/jelhan)\ **Post date:** [May 7, 2020, 2:44pm UTC](https://discuss.emberjs.com/t/can-addons-use-template-only-components/17399/4 "2020-05-07T14:44:30Z")
> [@bartocc](#): > > If so, I don’t really see what’s to gain. But I feel like there is something I am missing here If I got it right there is a performance difference between a template-only component and one with a class. ---
**Author:** ![bartocc](https://sea1.discourse-cdn.com/flex019/user_avatar/discuss.emberjs.com/bartocc/32/10812_2.png) [@bartocc](https://discuss.emberjs.com/u/bartocc)\ **Post date:** [May 7, 2020, 3:01pm UTC](https://discuss.emberjs.com/t/can-addons-use-template-only-components/17399/5 "2020-05-07T15:01:40Z")
Thx @jelhan 👍 Anyone from the core teams could confirm this and maybe give some metrics? ---
**Author:** ![ef4](https://sea1.discourse-cdn.com/flex019/user_avatar/discuss.emberjs.com/ef4/32/13470_2.png) [@ef4](https://discuss.emberjs.com/u/ef4)\ **Post date:** [May 8, 2020, 6:02am UTC](https://discuss.emberjs.com/t/can-addons-use-template-only-components/17399/6 "2020-05-08T06:02:44Z")
Under the hood, there are _three_ typical cases for what kind of Class backs your component: EmberComponent, GlimmerComponent, and TemplateOnlyComponent. One of the biggest differences between them is that EmberComponent adds a wrapping div around your actual template, whereas both GlimmerComponent and TemplateOnlyComponent do not. The biggest difference between GlimmerComponent and TemplateOnlyComponent is that TemplateOnlyComponent has no `{{this}}`, and is cheaper to render because the rendering engine knows to entirely skip the instantiation of the backing class a runtime. The name TemplateOnlyComponent can be misleading, because it has long been possible to make a template without a JS file, and people think of these as “template-only components”, but traditionally those always still got an EmberComponent class automatically generated for them. The first time that changed was the introduction of the template-only-glimmer-components optional feature. That feature flag affects an entire app, and causes hbs files without js files to get backed by TemplateOnlyComponent instead of EmberComponent. It’s an easy feature to enable, because a codemod can just generate actual EmberComponent files for you before flipping the flag, so your existing components don’t suddenly change. But addons can’t rely on that flag, which was the original context of this thread. However, as of Ember Octane (3.15 and newer), there is a straightforward way for any app or addon to make template-only components that are backed by actual TemplateOnlyComponent. The key is that Octane added template co-location, which now allows hbs files directly inside `app/components` and `addon/components`, as opposed to needing to put them in `app/templates/components` and `addon/templates/components`. Since there’s no legacy behavior in these paths, those hbs files will always get backed by TemplateOnlyComponent (unless of course you add a corresponding JS files, and then you’re choosing EmberComponent or GlimmerComponent explicitly). ---
**Author:** ![bartocc](https://sea1.discourse-cdn.com/flex019/user_avatar/discuss.emberjs.com/bartocc/32/10812_2.png) [@bartocc](https://discuss.emberjs.com/u/bartocc)\ **Post date:** [February 2, 2021, 1:40pm UTC](https://discuss.emberjs.com/t/can-addons-use-template-only-components/17399/7 "2021-02-02T13:40:14Z")
Thank you for the detailed answser @ef4 👍