Lightning Web Component Composition

One component can be added within the body of another component. Composition allows you to create complex components/applications from simple building blocks.

To make the code more reusable and maintainable, it is beneficial to combine apps and components with a group of smaller components.

Let’s take a look at this simple conference app composed of 3 components:

conferenceApp
audienceList
speakerList

conferenceApp

conferenceApp.html

	<template>
	<lightning-card title="Conference App" icon-name="standard:lightning_component">
	<div class="slds-p-around_x-large">
	<p class="header-para">Welcome to Salesforce Conference</p><br/>
	<p><b>Speakers List</b></p>
	<c-audience-list audiences={speakerslist}></c-audience-list>
	<p><b>Audiences List</b></p>
	<c-audience-list audiences={audienceslist}></c-audience-list>
	</div>
	</lightning-card>
	</template>

view raw conferenceApp.html hosted with ❤ by GitHub

conferenceApp.js

	import { LightningElement } from 'lwc';

	export default class ConferenceApp extends LightningElement {

	audienceslist = [' 👤 John Doe ', ' 👤 Kunal Singh ', ' 👤 Jean Doe ', ' 👤 Mohan Singh ',' 👤 Mike ',' 👤 John Donaughy '];
	speakerslist = [' 🎤 Marc Benioff', ' 🎤 Gaurav Singh', ' 🎤 Geeta Singh '];
	}

view raw conferenceApp.js hosted with ❤ by GitHub

conferenceApp.css

	.header-para{
	font-weight: bold;
	font-family:cursive;
	color: darkblue;
	font-size: large;
	}

view raw conferenceApp.css hosted with ❤ by GitHub

speakerList

speakerList.html

	<template>
	<p style="color:red;">{speakers}</p>
	</template>

view raw speakerList.html hosted with ❤ by GitHub

speakerList.js

	import { LightningElement ,api} from 'lwc';

	export default class SpeakerList extends LightningElement {
	@api speakers = [];
	}

view raw speakerList.js hosted with ❤ by GitHub

audienceList

audienceList.html

	<template>
	<p style="color: green;">{audiences}</p>
	</template>

view raw audienceList.html hosted with ❤ by GitHub

audienceList.js

	import { LightningElement ,api} from 'lwc';

	export default class AudienceList extends LightningElement {
	@api audiences = [];
	}

view raw audienceList.js hosted with ❤ by GitHub

conferenceApp

speakerList

audienceList

Share Article

Like this: