Have component template helper pass through HTML attributes

[barryofguilder]

This is split off from #18232

I have an angle bracket component that's using "splattributes" and I'm trying to invoke it through yielding it out with the component template helper. When I try to pass HTML attributes using that, it doesn't properly get overriden.

For example, take this button component:

{{!-- x-button.hbs --}}
<button type="button" data-test-id="button" ...attributes>
  {{yield}}
</button>

And this form component that yields out the button component:

{{!-- x-form.hbs --}}
<form>
  {{yield
    (
      hash
        submit=(
          component
            "x-button"
            data-test-id="submit-btn"
            type="submit"
        )
    )
  }}
</form>

Invoking the form component results in the following HTML output:

{{!-- Actual --}}
<form>
  <button type="button" data-test-id="button">Save</button>
</form>

{{!-- Expected --}}
<form>
  <button type="submit" data-test-id="submit-btn">Save</button>
</form>

Are there any plans for the component template helper to pass along HTML attributes? If not, what is an alternative to yielding out components like this?

[pzuraq]

I believe this was a recognized feature gap on the original angle bracket invocation RFC, and we've intended to address it in time, just haven't gotten around to it. There is some prior discussion on the RFC repo here: emberjs/rfcs#497

[barryofguilder]

After looking through the linked issue in the RFC repo, it looks like there's really not a workaround for the time being for my use case (yielding out a pre-configured component). I'll look at using component properties for those fields for now.

[chancancode]

This may not be very satisfying, but the “workaround” in the meantime is to create a wrapper component and yield that.

[rwjblue]

Sorry for the run around here @barryofguilder, I'm going to close this one in favor of moving the discussion over into emberjs/rfcs#497.