Introduction

With the Salesforce Summer ’23 release, Lightning Web Components (LWC) have become even more powerful and flexible with the introduction of the lwc:spread directive. This new feature makes it easier to pass multiple properties from a parent component to a child component, streamlining your code and enhancing its maintainability.

In this post, we’ll explore how to use the lwc:spread directive in LWC, understand its benefits, and look at some practical examples to help you get started.

What is the lwc:spread Directive?

The lwc:spread directive allows you to pass a set of properties from a parent component to a child component in a single, concise statement. It works by accepting an object that contains key-value pairs, where the keys are the names of the properties and the values are the property values.

This directive simplifies the process of applying multiple properties to a child component, reducing the need for repetitive code and making your components more dynamic.

How to Use the lwc:spread Directive

Let’s break down how you can use the lwc:spread directive with a simple example:

Parent Component

In the parent component, you define an object that holds the properties you want to pass to the child component.

// parent.js
import { LightningElement } from 'lwc';

export default class ParentComponent extends LightningElement {
  childProps = { name: 'johnny', phone:'88292922',email: 'johnny@email.com'};
}

In the HTML file of the parent component, you use the lwc:spread directive to pass this object to the child component.

<!--parent.html-->
<template>
  <c-child lwc:spread={childProps}></c-child>
</template>

Child Component

In the child component, you simply use the properties as you would with any other @api decorated property.

// child.js
import { LightningElement, api } from 'lwc';

export default class ChildComponent extends LightningElement {
  @api name;
  @api phone;
  @api email;
}

<!-- child.html -->
<template>
  <p>Name: {name}</p>
  <p>Phone: {phone}</p>
  <p>Email: {email}</p>
</template>

With just a few lines of code, the name ,phone and email properties are seamlessly passed from the parent to the child component.

Overriding Properties with lwc:spread

One important thing to note is that the lwc:spread directive is always applied last. This means it will override any properties that are directly declared in the template.

For instance, if you have a name property defined both in the lwc:spread object and directly in the template, the value from the template will take precedence.

<!-- parent.html -->
<template>
  <c-child name="johnny" lwc:spread={childProps}></c-child>
</template>

In this example, c-child passes name as David even though the parent component is passing in name="johnny". Ultimately, the child component takes the "johnny" name.

// app.js
import { LightningElement } from "lwc";

export default class extends LightningElement {
  childProps = { name: "David" };
}

Using lwc:spread with Event Handlers

The lwc:spread directive can also be used to bind event handlers dynamically. This allows for more flexible interactions in your components.

// parent.js
import { LightningElement } from 'lwc';

export default class ParentComponent extends LightningElement {
  simpleProps = { name: 'LWC', onclick: this.spreadClick.bind(this) };

  spreadClick() {
    this.simpleProps = { name: 'Lightning Web Components' };
  }
}

<!-- parent.html -->
<template>
  <c-child lwc:spread={simpleProps}></c-child>
</template>

Here, when the child component is clicked, the spreadClick function is triggered, updating the name property to “Lightning Web Components.”

Reflecting HTML Attributes

Another powerful aspect of the lwc:spread directive is its ability to reflect HTML attributes as properties. For example, the class attribute is reflected as className.

// parent.js
import { LightningElement } from 'lwc';

export default class ParentComponent extends LightningElement {
  spanProps = { className: 'spanclass', id: 'myspan' };
}

<!-- parent.html -->
<template>
  <c-child lwc:spread={spanProps}></c-child>
</template>

In this case, the child component will be rendered with the class and id attributes as specified in the spanProps object.

Conclusion

The lwc:spread directive is a powerful tool that enhances the flexibility and efficiency of your LWC components. By allowing you to pass multiple properties and event handlers in a single object, it reduces the need for repetitive code and simplifies the process of binding properties to child components.

Start using lwc:spread in your projects today to streamline your code and create more dynamic, maintainable components!

Happy coding!!

References

• Create Components spread properties