When we have two different pieces of markup that we wish to send to child component from the parent, we cannot achieve that using default slots. This acts as a bottle neck and that's when we might need Named Slots. Very often this might not be what we need. Then, the 10 lines of HTML code will be pushed twice from parent to child component. I have two tags in child component, like this. So, I have two sections in the parent component and 2 slots tags in the child component. Let us look a slight variant now, I want to push two sections of markup from the parent component to the child component. Is pushed to child component from parent component and the rendered child component is going to look like this. This is how the parent component is going to look like. There are two types of slots - Default slots - Named slots Default Slots So, the gist is, use properties to send data from parent to child components and use slots to send markup from parent to child component. When you want to send markup (maybe some HTML code or HTML markup with predefined slds class names) from parent component to child component this is where slots in LWC are used. Data can be pushed from parent component to child component using properties then where are slots in LWC used? Want to know more about properties? Check this out!
