1

Salesforce just only provided how to call the component in LWC container but no actual example. May anyone already implemented container, please provide the example.

Below example from salesforce guide link https://developer.salesforce.com/docs/component-library/documentation/lwc/lwc.create_components_compose

My question is can we define c-todo-wrapper component to call c-todo-item component.

<!-- todoApp.html -->
<template>
    <c-todo-wrapper>
        <c-todo-item item-name="Milk"></c-todo-item>
        <c-todo-item item-name="Bread"></c-todo-item>
    </c-todowrapper>
<template>

<!-- todoWrapper.html -->
<template>

        <c-todo-item item-name="Milk"></c-todo-item>
        <c-todo-item item-name="Bread"></c-todo-item>

<template>

<!-- todoItem.html -->
<template>
   Name {itemName}
<template>
2
  • 1
    its not clear what you are asking. Can you show some documentation reference or code sample? Aug 18, 2019 at 17:08
  • Updated the question
    – Rachit
    Aug 18, 2019 at 17:18

1 Answer 1

2

In the example you have provided:

<!-- todoApp.html -->
<template>
    <c-todo-wrapper>
        <c-todo-item item-name="Milk"></c-todo-item>
        <c-todo-item item-name="Bread"></c-todo-item>
    </c-todowrapper>
<template>
  1. todoApp is the owner component of todo-wrapper and todo-item

  2. todo-wrapper is the container of todo-item but not owner.

My question is can we define c-todo-wrapper component to call c-todo-item component.

Yes. You have to use this.querySelector and this.addEventListener as todo-item is not owned by it.

For detailed example on the differences in the way you identify elements and add event listeners from owner or container components you can refer to LWC: Difference between "window" and "this"

ADDED BASED ON COMMENTS:

<!-- todoWrapper.html -->
<template>
    <div>
        <slot></slot>
    </div>
</template>

You can also use named slots in which case, you have to mention in which slot the components have to be injected. You can refer to https://developer.salesforce.com/docs/component-library/documentation/lwc/lwc.create_components_slots

6
  • Again I updated my question - Is wrapper component defined correctly? No issue with Parent-child but parent-wrapper-child is confusing me.
    – Rachit
    Aug 18, 2019 at 17:38
  • added in answer Aug 18, 2019 at 17:43
  • as per answer what will deference between then parnet-wrapper-child and parent-child-child? How your definition of wrapper call will fulfill the definition of wrapper class? Container A container can: Read, but not change, public properties in contained components Call methods on composed components Listen for some, but not necessarily all
    – Rachit
    Aug 18, 2019 at 17:58
  • In parent-child-child, you will not be using slots and thereby removing the dynamic nature of wrapper component Aug 18, 2019 at 18:01
  • A slot can be used on a child as well not just for the wrapper class. A slot used for replacing the markup in a child component from the parent. I used the slot in opening Modal from the parent component. Might be I am unable to correlate wrapper example in Apex with LWC wrapper. let me go try to create one example based on your suggestion.
    – Rachit
    Aug 18, 2019 at 18:12

You must log in to answer this question.

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