Pass custom element attributes to Glimmer component element

[pittst3r]

Requires glimmerjs/glimmer-application#40. Intermediate step until we can have args and attrs passed into renderComponent.

Given a template like this:

{{! cool-component.hbs }}
<div>
  <p>Hello Glimmer!</p>
</div>

And a custom element like this:

<cool-component foo="bar"></cool-component>

We get this as the result:

<div foo="bar">
  <p>Hello Glimmer!</p>
</div>

[pittst3r]

Found a bug, needs a bit more work.

[pittst3r]

K, this seems ready to roll now.

[rwjblue]

I was thinking that we would actually roll this into the main "pass attributes and args into app.renderComponent" story. IMO, we actually want these attributes to be set prior to the custom element is added to the DOM (otherwise we are not really following the "normal" DOM construction spec).

When we can pass attributes and arguments in to Application#renderComponent, this becomes fairly similar to what you have now, but we would grab the attributes first and pass them in:

let attributes = getAttributes(this);
app.renderComponent(name, parent, placeholder, attributes, /* args? */)

// ...snip...

function getAttributes(fromElement: Element): Dict<string> {
  let output = Object.create(null);
  let attributes = fromElement.attributes;
 
  for (let i = 0; i < attributes.length; i++) {
    let { name, value } = attributes.item(i);
    output[name] = value;
  }
  
  return output;
}

[pittst3r]

Just a recap of our Slack convo...

@rwjblue 100% agreed. It's definitely part of the plan to get renderComponent to accept attributes and args. I just failed to communicate that this is an intermediate step since that is not a hard blocker.

[rwjblue]

👍 - Awesome, thanks for walking me through it!

[tomdale]

Seems hacky but this is a glaring omission right now. I'll be very happy once renderComponent accepts attributes. 😉