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?

1 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-border {
    border: 1px solid red;
.slot-markup {
    border: 4px solid black;


import { LightningElement } from 'lwc';

export default class App extends LightningElement {}


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


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


import { LightningElement } from 'lwc';

export default class Child extends LightningElement {



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


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


import { LightningElement } from 'lwc';

export default class Grandchild extends LightningElement {



    <div class="grandchild-area">
        We are in the grandchild area
    <slot name="insert">Default Grandchild</slot>
  • 1
    Thanks - very helpful. You got there much faster than me. This is reassuring so I will go straight to the more convoluted actual case I am working on.
    – Keith C
    Commented Dec 22, 2019 at 16:21

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .