Use

<can-slot> and <can-template> are used together to customize the layout of a component.

<can-template> is used to provide custom layout to a component. <can-slot> positions that layout within a component's view. One way to think about it is that <can-template> is an argument to a component. Component uses <can-slot> to look up that argument and use it.

<can-template> and <can-slot>s must have a name attribute like:

<can-template name="someName">...</can-template>

<can-slot name="someName">...</can-slot>

Those names are used to match a <can-slot> to a user provided <can-template>.

For example, <can-template name="incrementButton"> passes an incrementButton template to the <my-counter> element below:

<my-app></my-app>
<script type="module">
import {Component} from "can";

Component.extend({
    tag: "my-counter",
    view: `
        <form on:submit="this.increment(scope.event)">
            Count: <span>{{this.count}}</span>

            <can-slot name="incrementButton"/>
        </form>
    `,
    ViewModel: {
        count: {type: "number", default: 0},
        increment(event) {
        event.preventDefault();
            this.count++;
        }
    }
});


Component.extend({
    tag: "my-app",
    view: `
        <my-counter>
            <can-template name="incrementButton">
                <button>Add One</button>
            </can-template>
        </my-counter>
    `
});
</script>

Passing values

By default, <can-template>s are rendered with the same scope as the surrounding content. For example, {{this.word}} is available but {{count}} is not:

<my-app></my-app>
<script type="module">
import {Component} from "can";

Component.extend({
    tag: "my-counter",
    view: `
        <form on:submit="this.increment(scope.event)">
        <can-slot name="displayCount"/>

        <button>+1</button>
        </form>
    `,
    ViewModel: {
        count: {type: "number", default: 0},
        increment(event) {
            event.preventDefault();
            this.count++;
        }
    }
});

Component.extend({
    tag: "my-app",
    view: `
        <my-counter>
            <can-template name="displayCount">
                Your {{this.word}} is <b>{{count}}</b>
            </can-template>
        </my-counter>
    `,
    ViewModel: {
        word: {default: "number"}
    }
});
</script>

You can use key:from or key:bind to pass values to the <can-template>'s content. The following passes count as number to <can-template name="displayCount">:

<my-app></my-app>
<script type="module">
import {Component} from "can";

Component.extend({
    tag: "my-counter",
    view: `
        <form on:submit="this.increment(scope.event)">
            <can-slot name="displayCount"
                number:from="this.count" />

            <button>+1</button>
        </form>
    `,
    ViewModel: {
        count: {type: "number", default: 0},
        increment(event) {
            event.preventDefault();
            this.count++;
        }
    }
});

Component.extend({
    tag: "my-app",
    view: `
        <my-counter>
            <can-template name="displayCount">
                Your {{this.word}} is <b>{{number}}</b>
            </can-template>
        </my-counter>
    `,
    ViewModel: {
        word: {default: "number"}
    }
});
</script>

Functions can be passed to. The following shows passing <my-counter>'s add method:

<my-app></my-app>
<script type="module">
import {Component} from "can";

Component.extend({
    tag: "my-counter",
    view: `
        <can-slot name="incrementButton"
            add:from="this.add"/>
        <can-slot name="countDisplay"
            count:from="this.count"/>
    `,
    ViewModel: {
        count: {type: "number", default: 0},
        add(increment){
            this.count += increment;
        }
    }
});


Component.extend({
    tag: "my-app",
    view: `
        <my-counter count:from="5">
            <can-template name="incrementButton">
                <button on:click="add(5)">ADD 5!</button>
            </can-template>
            <can-template name="countDisplay">
                You have counted to {{count}}!
            </can-template>
        </my-counter>
    `
});
</script>