In simple terms: if you want to pass data from parent to child use the decorator, if you want to pass markup use slots. If needed, the child then communicates back with the parent by dispatching DOM events. On the other hand, using the decorator to expose public properties and functions allow the parent component to pass data to the child component in order to communicate down the hierarchy. The component now provides the general layout which other components can use based on their own requirements. When a component implements slots, the application using it has the flexibility of deciding what information goes into the slots. So what does it mean to pass markup to a component via slots? Complexity – Managing the lifecycle of the components in a declarative way using slots is more complex when compared to that of the data-driven approach.

(The key word here is markup.) This is the declarative approach.

Markup vs properties – The parent component passes markup into the slotted component.

There are two major aspects we need to consider when using slots: With that being said, you might be wondering how this is different from the pattern you probably already know – that of a parent component which instantiates child components and sets their properties (the data-driven approach). What does this mean for developers?įirst of all, this gives Developers the ability to compose complex applications with nested components, allowing for greater modularity and reusability.

The concept behind Slots is essentially to use a template structure, and then be able to reuse that structure in different components with different data. A component can have zero or more slots.” Salesforce Developer Guide further explains Slots as follows: “Add a slot to a component’s HTML file so a parent component can pass markup into the component. What are LWC slots?Ī slot ( ) is a placeholder for markup that a parent component passes into a component’s body. In this blog, we’ll review what they are, what they do, and how to use them. Lightning Web Component Slots are a valuable tool for any Salesforce Developer to add to their arsenal.

Lightning web component slots