Implement slot-like replacement for <content select>

[justinbmeyer]

Background on slots:

https://webkit.org/blog/4096/introducing-shadow-dom-api/
https://www.w3.org/TR/shadow-dom/#distributions
https://www.w3.org/TR/shadow-dom/#dfn-slot-element

content && template-NAME

Example 1

Shadow DOM:

  <b>Name</b>:
  <content name="fullName">
      <content name="firstName"></content>
      <content name="lastName"></content>
  </content><br>
  <b>Email</b>: <content name="email">Unknown</content><br>
  <b>Address</b>: <content name="address">Unknown</content>

User DOM:

<my-contact>
  <title-template><span>Commit Queue</span></title-template>
  <email-template><a href="mailto:commit-queue@webkit.org">commit-queue@webkit.org</a></email-template>
  <address-template><span>One Infinite Loop, Cupertino, CA 95014</span></address-template>
</my-contact>

[BigAB]

Why <content name=""></content> and <*-template></*-template>?

Why not just use slot="" and <slot name=""></slot>?

[justinbmeyer]

@BigAB I mentioned a few reasons in the bitovi chat a while ago. Three major reasons:

1. We probably don't want to overwrite a behavior the browser might provide. <content> was probably a mistake if <content> was actually ever supported.
2. It's easier, and CanJS is already setup to identify sub-templates that are <tag> based and not attribute based.
3. Attribute-based tags need to have an element associated with them. Say I wanted to position pure text content like: {{first}} {{last}}. You couldn't do that, you'd have to add a <span> or some other element. Also, it seems that the spec leaves in <slot> elements. Not sure I like that.

[justinbmeyer]

To be clear, I'm not sold on <template> and <content> and while <tags> are easier than attri=butes, the burden of making that work shouldn't keep us from using them. However, I'm wary of always having to have that <span>.

One other point, all the <x-template> renders will be put on the viewModel as templates. This would allow the shadow DOM to also be written like:

<b>Name</b>:
  {{#if templates@fullName}}
    {{{ templates.fullName }}}
  {{else}}
     {{{ templates.firstName }}} {{{templates.lastName}}}
  {{/if}}<br>
  <b>Email</b>: {{{templlates.email}}<br>
  <b>Address</b>: {{{templates.address}}}

However, I like using elements for simplifying setting up default content.

[justinbmeyer]

Moving to can-component