Allow access to Slot elements from the component

[AllanOricil]

Is your feature request related to a problem? Please describe.
No. It is a feature request.

I want to access the list of slots from within the parent

<template>
    <div>
        <slot></slot>
    </div>
</template>

import { api, LightningElement } from 'lwc';

export default class Parent extends LightningElement {

    connectedCallback(){
         //parent has access to slots
         this.slots.forEach((slot) => {
            console.log(slot);
        }

    }

}

Describe the solution you'd like
this.slots must be accessible from parent

Describe alternatives you've considered
use lwc:dom

[Bartheleway]

Hi @AllanOricil, I believe your issue is somehow similar to mine #2218 in a more complex example. It doesn't seems possible currently to have slot in loop.

[nolanlawson]

This sounds like a request for what we're calling "scoped slots": salesforce/lwc-rfcs#63 . The reason I think so is because you're wanting to have slots inside of a for-loop and to pass for-loop-specific information into those slots (e.g. the current iteration index).

Closing as a duplicate of #210, please reopen if I'm mistaken.

[AllanOricil]

@nolanlawson it is related, but I'm not sure if #210 would also expose this.slots in the parent js class. If it does, then you can keep this closed

[nolanlawson]

Hm, you're right, the proposal doesn't seem to allow programmatic access to the <slot> elements; in fact I believe they are not true <slot>s because native shadow DOM does not support scoped slots. Template refs (#2690) would also not address this since they are not true <slot>s.

[AllanOricil]

Delivered 23 with scoped slots? @nolanlawson
I could not find docs saying that this.slots is accessible in the parent js

[nolanlawson]

@AllanOricil It's true that we don't provide explicit access to slots. However, in native shadow you should be able to do this.template.querySelectorAll('slot') which gives the same thing.

For scoped slots, those are light DOM slots, and in the case of light DOM slots, I don't even know what it would mean to expose this.slots, since the slots are "virtual" and only really exist in the compiler. At runtime, there is no <slot> for light DOM.