Deprecate <content select="..."> in favor of <slot name="...">

[yyx990803]

Moved from Discussion#298 for tracking in core.

Problem

Context: https://hacks.mozilla.org/2015/06/the-state-of-web-components/ (See the "Distribution" section)

TL;DR: browser vendors cannot agree on the content distribution API for web components. The current <content select="xxx"> syntax will likely be replaced.

The post describes two possible new APIs: an imperative one and a new declarative one. In Vue this has to do with the internal compilation cycle so we are mostly interested in the new declarative API, the "name slots" proposal from Apple:

Component template:

<slot name="header"></slot>
<slot></slot>
<slot name="footer"></slot>
<div>some shadow content</div>

When using the component:

<x-page>
  <header slot="header">header</header>
  <footer slot="footer">footer</footer>
  <h1>my page title</h1>
  <p>my page content<p>
</x-page>

Rendered result:

<x-page>
  <header slot="header">header</header>
  <h1>my page title</h1>
  <p>my page content<p>
  <footer slot="footer">footer</footer>
  <div>some shadow content</div>
</x-page>

The benefits of this proposal over the current <content> API, is that it is much more explicit (the exposed "slots" essentially become part of the component's interface), and thus makes it easier to compose nested components:

<list-item>
  <avatar slot="left-avatar" src="{{user.avatarUrl}}"></avatar>
  <p slot="primary-text">{{user.name}}</p>
  <p slot="secondary-text">{{user.tagline}}</p>
</list-item>

Proposal

Move to the <slot> API. It's more explicit than <content> select. This could co-exist with <content> in 1.0.0-alpha.

[azamat-sharapov]

Looks great. How will this behave if you add inline-template to component (to <x-page> or <list-item>)?

[yyx990803]

inline-template is exclusive with content insertion, so adding it makes no sense here.

[azamat-sharapov]

I see. So, here:

<list-item>
  <avatar slot="left-avatar" src="{{user.avatarUrl}}"></avatar>
</list-item>

<list-item> and <avatar> are compiled under same context?

[yyx990803]

Yes, but <avatar> will be considered a child of <list-item>.

[dgerber]

Could slot support a way to be compiled in local scope, while inheriting assets from the consumer?

Take a grid component exposing customizable cells. With #1170, one must either name a partial (or component) globally to use it in the cell, or use the grid component as a mixin.

The grid template would look like this:

<tr v-for="row in rows">
  <td v-for="col in columns">
    <slot name="cell" scope="local" inherit-assets="true"></slot>
  </td>
</tr>

Usage:

<parent>
  <grid>
    <div slot="cell">
      In {{row}}, {{col}}:
      <some-component-from-parent/>
    </div>
  </grid>
</parent>

[yyx990803]

implemented in alpha branch.