Doesn’t work with angle-bracket components

[andrewbranch]

{{my-component}} works like a charm but <my-component /> doesn’t get the hashed identifier class added.

[andrewbranch]

I guess we’ll come back to this when angle-bracket components re-land in a beta. I might have time to take a look at it then.

[oligriffiths]

@andrewbranch I'm using angle brackets and it works fine. It doesn't work however when building for production.

[andrewbranch]

This is not a thing anymore. Support for angle brackets was removed shortly after I filed.

[eguitarz]

@andrewbranch @ebryn Angle brackets is landed in Ember 3.3. Should we reopen this issue? RFC PR is here: emberjs/rfcs#311

[tleperou]

+1 sounds good to support angle brackets!

[webark]

does anyone have any clues as to why it’s not working? or a simple repro app..?

[tleperou]

#57 relates the issue:

The problem is that angle bracket components hit ComponentLookup.componentFor() instead of 'ComponentLookup.lookupFactory()'. So, we just need to override componentFor as well. I'll add a pull request.

Unfortunately, I don't find any public documentation about componentFor.

Any clue?

[webark]

https://github.com/ebryn/ember-component-css/blob/192789c9e6b57f1064acdaf4c3c4eada6f934e35/addon/initializers/component-styles.js#L14

we do componentFor currently..

[jasonworden]

I want to help. Anyone have an idea where to get started here?

[tleperou]

Same one here.

We have to check out the ember-octane and particularly the @glimmer/component to ensure the compatibility. Unfortunately, I am not fully familiar - yet - with those packages.

Feel free to share every clue you have, I would help you.

[jasonworden]

@tleperou Actually, just tried, and it looks like this is already working with <AngleBracket /> components! I initially just took it for granted that it wouldn't work, but I'm not seeing any issues, and the styles applied fine!

Note: I'm running Ember 3.4.7.

[webark]

closing then on @jasonworden comments. If it ends up being not the case, feel free to reopen @tleperou

[BryanCrotaz]

How did you access the style namespace? I've tried:

<div class="{{@styleNamespace}}">

and

<div class="{{this.styleNamespace}}">

Neither of them produce a class attribute