LWC Component Composition
Component composition is concept to create a small reusable component separately and use in the other component
It is very useful because sometimes we need the same business logic to be placed on different components and it also helps us to reduce the code redundancy. It reduces the code Size.
As you can see in the above diagram, the Main component contains three sub components.
Component Composition Structure
< Parent Component >
<  < Sub Component-1>
< Sub Component-2>
< /Parent Component >
Let’s explore the component composition
Create three subcomponent
Subcomponentone.html
<template> <p>This is Salesforce Driller subcomponent I</p> </template>
Subcomponenttwo.html
<template> <p>This is Salesforce Driller subcomponent II</p> </template>
Subcomponentthree.html
<template> <p>This is Salesforce Driller subcomponent III</p> </template>
Now we need to create one more component which will hold these components.
Maincomponent.html
<template> <p>This is the Main Component which Holds all the subcomponent Below</p> <c-subcomponentone></c-subcomponentone> <c-subcomponenttwo></c-subcomponenttwo> <c-subcomponentthree></c-subcomponentthree> </template>
Output
