Status: REJECTED

Champion: Unknown

Revision: latest

RFC created: 1970/01/01

Last updated: unknown

Scoped Slots

Provide a way to pass a template into a slot, which would then have access to properties provided by the child component

Prior Art

Scoped Slots in Vue.js

Use cases

Simple Example

This example is a list component that supports an optional template for the list item.

Child Component

<script>
import { LightningElement } from "lwc";
export default class MyComponent extends Element {
  state = {
    items: [
        {
            message: "hello"
            url: "http://salesforce.com"
        }
    ],
  };
}
</script>
<template>
    <ul>
        <li for:each={state.items} for:item="item">
            <slot scope-object={item}>
                {item.message} <!-- default template -->
            </slot>
        </li>
    </ul>
</template>

Parent component

<template>
    <my-component>
        <template scope="props">
            <a href={props.url}>{props.message}</a>
        </template>
    </my-component>
</template>

Result

<ul>
    <li>
        <a href="http://www.salesforce.com">hello</a>
    </li>
</ul>
undefined