Can markup be passed to a grand-child component in LWC using slots?

Question

LWC slots allow a parent component to pass markup into a pre-defined region of a child component. (This mechanism replaces Aura facets.)

But is there a pattern to pass markup through to a grand-child component in LWC? That is, can the markup be passed through a child component, and rendered in the grand-child component?

I will try this approach Vuejs nested slots: how to pass slot to grandchild but am unsure if that technique will work in LWC. Is there a proven pattern for this in LWC?

Answer 1

Yes, that technique works. I created an overly complicated playground that demonstrates this usage. You simply need to pass the content from slot to slot.

---

app.css

.app-border {
    border: 1px solid red;
}
.slot-markup {
    border: 4px solid black;
}

app.js

import { LightningElement } from 'lwc';

export default class App extends LightningElement {}

app.html

<template>
    <div  class="app-border">
    <c-child>
        <div slot="insert" class="slot-markup">
            This content is from the app:
            <lightning-icon icon-name="utility:help"></lightning-icon>
        </div>
    </c-child>
    </div>
</template>

child.css

.child-border {
    border: 2px dotted green;
}

child.js

import { LightningElement } from 'lwc';

export default class Child extends LightningElement {

}

child.html

<template>
    <div class="child-border">
    We are in the child area.
    <c-grandchild>
        <div slot="insert">
            <slot name="insert">Default child content</slot>
        </div>
    </c-grandchild>
    </div>
</template>

grandchild.css

.grandchild-area {
    border: 3px dashed purple;
}

grandchild.js

import { LightningElement } from 'lwc';

export default class Grandchild extends LightningElement {

}

grandchild.html

<template>
    <div class="grandchild-area">
        We are in the grandchild area
    <slot name="insert">Default Grandchild</slot>
    </div>
</template>