). It is not possible
to remove the ember-view class. The proposed helper will not have this
behavior, as such this should not be relied upon (e.g. in CSS and qunit-dom
selectors).

* In Ember versions before 3.11, modifiers cannot be passed to the element,
even when addons such as the modifier manager
and on modifier polyfills
are used. Doing so requires RFC #435
which is first available on Ember 3.11. This is an Ember.js limitation,
unrelated to this addon.

Installation

``
ember install ember-element-helper
`

Usage

`hbs
{{#let (element this.tagName) as |Tag|}}
hello world!
{{/let}}
`

You can also pass around the result of invoking this helper into any components
that accepts "contextual components" as arguments:

`hbs

`

`hbs
{{!-- in my-component.hbs --}}
{{#let @tag as |Tag|}}
hello world!
{{/let}}

{{!-- ...or more directly... --}}
<@tag class="my-tag">hello world!
`

$3

Using the (element) helper with first class component
templates:

`gjs
import { element } from 'ember-element-helper';


`

$3

In order to use a typed (element) helper in classic mode, you need to import
the addon's glint template registry and extend your app's registry declaration
as described in the Using
Addons
documentation:

`ts
import '@glint/environment-ember-loose';
import type EmberElementHelperRegistry from 'ember-element-helper/template-registry';

declare module '@glint/environment-ember-loose/registry' {
export default interface Registry extends EmberElementHelperRegistry, / other addon registries / {
// local entries
}
}
`

> Note: Glint itself is still under active development, and as such breaking changes might occur.
> Therefore, Glint support by this addon is also considered experimental, and not covered by our SemVer contract!

$3

When your component accepts an element with the (element) helper, you want to
give this argument a proper type. Here is how:

`ts
import type { ElementSignature } from 'ember-element-helper';

interface YourComponentSignature {
Element: HTMLSectionElement;
Args: {
element?: ElementSignature['Return'];
};
}
`

When the @element argument influences the Element of your component:

`ts
import type { ElementSignature, ElementFromTagName } from 'ember-element-helper';

interface YourComponentSignature {
Element: ElementFromTagName;
Args: {
element?: ElementSignature['Return'];
};
}
`

When your component already uses an element for a given condition. When
the condition isn't met, a fallback element is used. The fallback can even be
provided from the outside. Here is the type:

`ts
import type { ElementSignature, ElementFromTagName } from 'ember-element-helper';

interface YourComponentSignature<
T extends string = 'section'
> {
Element: HTMLButtonElement | HTMLAnchorElement | ElementFromTagName;
Args: {
element?: ElementSignature['Return'];
};
}
``

Contributing

See the Contributing guide for details.

License

This project is licensed under the MIT License.