Dynamic angle bracket components

[mmun]

The purpose of this issue is to start a discussion around dynamic invocation of angle bracket components. First I'll recap component invocations with curly syntax. Currently we support a couple curly component invocation styles:

{{#my-component ...}} ... {{/my-component}}
{{#component componentName ...}} ... {{/component}}

Each style comes in two flavors: block and inline (aka no block). Block:

{{#my-component ...}}
  Hello, world!
{{/my-component}}

and inline:

{{my-component ...}}

In a separate RFC (#64) a contextual invocation has been proposed:

{{#some.path ...}} ... {{/some.path}}

this is intended to be used with block params. Here's an example of how you'd use this invocation style with a form building component.

{{#form-for model=post as |form|}}
  {{form.input 'title'}}
  {{form.input 'body'}}
  {{form.submit}}
{{/form-for}}

In this example the form.input component is connected to the form-for component and can see the model that was passed in. This lets the input have extra features, like providing validations on the length of the title field and making the submit button automatically call model.save().

---

Now let's turn back to the angle bracket case. The case of static component names is clear. The block flavor

{{#my-component ...}} ... {{/my-component}}

will be expressed by

<my-component ...> ... </my-component>

and the inline flavor

{{my-component ...}}

will be expressed by

<my-component ... />

Note that in the inline case we are giving additional semantics to self-closing tags that what is specified by the HTML spec, however we feel there are no downsides to this.

So this leaves the analogs for

{{#component componentName ...}} ... {{/component}}
and
{{#some.path ...}} ... {{/some.path}}

up in the air. Here are my thoughts on the suggestions I have seen so far:

<some.path ... > ... </some.path>

This seems like a non-starter to me because there's no immediate indication that something dynamic is happening.

<{{some.path}} ... > ... </{{some.path}}>

This fixes the problem above but it's not very elegant, especially with needing to repeat the curly. It also seems inevitable that someone will type <{{/some.path}}> for the closing path.

<{{some.path}} ... > ... </>

The closing tag doesn't really matter, so maybe we can omit it? I'm not really a fan. Even the syntax highlighter doesn't like it :P

<{{some.path}} ... > ... </component>

Maybe we can use as a generic closing tag for this case? I kind of like this idea. Lastly,

<ember-component is={{some.path}} ... > ... </ember-component>

This solution feels the most correct since it sticks to the custom elements spec, but it is unfortunately verbose. I don't see myself enjoying typing <ember-component is={{form.input}} />.

[mmun]

There is further confusion between whether attributes should be inside or outside the curlies, as in

<{{some.path foo=bar}} />
vs.
<{{some.path}} foo={{bar}} />

We might also want to consider an alternate syntax <{some.path} foo={{bar}} />.

[knownasilya]

I think the verbose one is the one that makes most sense, and is clear. Alternatively, it should be the <some.path ... > ... </some.path> because that transfers over easiest.

If the verbose one is too much, just use the curly braces version.