[Bug] `component` helper does not bind modifiers that apply to the component itself

[fastfedora]

🐞 Describe the Bug

When attempting to pass a component as an argument using the component helper, modifiers that apply to the component itself are not applied.

😕 Actual Behavior

For instance, when passing a component via @icon:

<MenuItem 
  @icon={{component "material-icon"
    (modifier "css-transition" this.isExpanded "transform:none,rotate(-180deg)")
    icon="expand_less"
  )}}
/>

And then attempting to render the icon within MenuItem:

  {{@icon}}

Results in the icon being rendered, but the modifier not being applied. Even if the component helper is used directly within MenuItem, it still doesn't get applied. If the angle-bracket syntax is used instead, however, the modifier is applied correctly:

  <!-- Renders, but no modifier applied -->
  {{@icon}}

  <!-- Renders, but no modifier applied -->
  {{component "material-icon"
   (modifier "css-transition" this.isExpanded "transform:none,rotate(-180deg)")
   icon="expand_less"
  }}

  <!-- Renders with modifier applied -->
  <MaterialIcon
    @icon="expand_less"
    {{css-transition this.isExpanded "transform:none,rotate(-180deg)"}}
  />

This appears related to issue 18695, where it was mentioned this was resolved by emberjs/rfcs#432. However, the usage examples in this RFC don't include this use case where the modifier is passed via the component helper without being passed as a specific argument into the component.

In case modifier was a special argument for the component helper, I also tried the following, which didn't work either:

{{component "material-icon"
  modifier=(modifier "css-transition" this.isExpanded "transform:none,rotate(-180deg)")
  icon="expand_less"
}}

The only time the modifier is ever called is in the angle-bracket syntax.

🤔 Expected Behavior

The modifier would be passed into the component and executed exactly the same for angle-bracket syntax and when using the component helper.

🌍 Environment

• Ember: 4.5.0
• Node.js/npm: 12.18.4
• OS: Mac
• Browser: Chromium

[bertdeblock]

Are there any docs that show that this should work? I wouldn't expect this to work, but I could be wrong!

[donaldsonjulia]

I have also run into scenarios where support for this usage would be really helpful. Especially with any contextual components that might need modifiers that handle css transitions or trap focus, etc. -- I don't see why the developer using the yielded component should have to remember each time that they need to apply those modifiers. So perhaps it's not exactly a bug, but I think it's a valid concern.

[chriskrycho]

This definitely does not work, and it is not currently expected to work, as @bertdeblock noted. The syntax shown there is passing a positional parameter to a component, not applying it to it in an element position. We have a long-standing need to solve the lack of ability to pass along attributes or modifiers to components using the {{component}} helper, which I'm hoping we can now revisit as we are getting into the home stretch with <template>.

Since this is "as expected" and we have other issues and discussions tracking that need, I'm closing this, but it's a good report to include when we come back to that. (Help working on that very welcome!)