Lightning Web Components Slots
Web Components Slots Free
Web Components Slots Without Shadow Dom

Slots in Lightning Web Components Published by Avi Rai on March 30, 2020 Slots allow you to define placeholders in your template that can be filled with any markup fragment that a parent component passes into a component’s body. This page assumes you’ve already read the Components Basics.Read that first if you are new to components. In 2.6.0, we introduced a new unified syntax (the v-slot directive) for named and scoped slots.

I have read about slots and have them working, although my efforts have not resulted in slotted webcomponents that work the way I expected. If I have compose nested web components like this, the DOM from the nested/slotted webcomponent does not get inserted in the slot of the parent. Lightning Web Components fixes that, with slots. And in the simple case they are trivial. The documentation isn't long, and doesn't need to be. All we need to do, in this simple case, is add slotslot into our component, and the body of any tag that instantiates the component will be rendered in that slot. Web components are an amazing new feature of the web, allowing developers to define their own custom HTML elements. When combined with a style guide, web components can create a component API, which allows developers to stop copying and pasting code snippets and instead just use a DOM element. By using the shadow DOM, we can encapsulate the web component and not have to worry about specificity.

You can add components within the body of another component. Composition enables you to build complex components from simpler building-block components. Composing apps and components from a set of smaller components makes code more reusable and maintainable.

Let’s look at a simple app. The components are in the examplenamespace. The markup is contrived because we want to illustrate the concepts of owner and container.

Owner

The owner is the component that owns the template. In this example, the owner is the example-todo-app component. The owner controls all the composed (child) components that it contains. An owner can:

Set public properties on composed components
Call public methods on composed components
Listen for events dispatched by composed components

Container

A container contains other components but itself is contained within the owner component. In this example, example-todo-wrapper is a container. A container is less powerful than the owner. A container can:

Read, but not change, public properties in contained components
Call public methods on composed components
Listen for some, but not necessarily all, events bubbled up by components that it contains. See Configure Event Propagation.

Parent and child

When a component contains another component, which, in turn, can contain other components, we have a containment hierarchy. In the documentation, we sometimes talk about parent and child components. A parent component contains a child component. A parent component can be the owner or a container.

# Set a Property on a Child Component

To communicate down the containment hierarchy, an owner can set a property on a child component. An attribute in HTML turns into a property assignment in JavaScript.

Let’s look at how the owner, example-todo-app, sets public properties on the two instances of example-todo-item.

In the playground, select todoItem.js. The @api decorator exposes the itemName field as a public property.

Select todoApp.html. To set the public itemName property, it sets the item-name attribute on each example-todo-item component. Change Milk to Hummus to see an item name change.

Property names in JavaScript are in camel case while HTML attribute names are in kebab case (dash-separated) to match HTML standards. In todoApp.html, the item-name attribute in markup maps to the itemName JavaScript property of todoItem.js.

Tip

This example uses the static values Milk and Bread. A real-world component would typically use a for:each iteration over a collection computed in the owner’s JavaScript file, todoApp.js.

Let's look at another example of composition and data binding. The example-contact-tile component exposes a contact public property (@api contact in contactTile.js). The parent component, example-composition-basics, sets the value of contact.

The contact public property in example-contact-tile is initialized based on the contact property value of its owner. The data binding for property values is one way. If the property value changes in the owner, the updated value propagates to the child. For example, in compositionBasics.js, change Name: 'Amy Taylor', to Name: 'Stacy Adams',. The change is reflected in the example-contact-tile child component.

Example

See the Composition recipes in the Lightning Web Components recipes app.

# Send an Event from a Child to an Owner

When a component decorates a field with @api to expose it as a public property, it should set the value only when it initializes the field, if at all. After the field is initialized, only the owner component should set the value.

To trigger a mutation for a property value provided by an owner component, a child component can send an event to the owner. The owner can change the property value, which propagates down to the child.

Example Weather forecast nsw.

The Lightning Web Components recipes app has a more realistic example. Click Child-to-Parent and look at the EventWithData example, which has a list of contacts. When a user clicks a contact, the component sends an event to the parent, which sends a new contact object to the child.

# Data Flow Considerations

To prevent code complexity and unexpected side effects, data should flow in one direction, from owner to child.

# Primitive Property Values

We recommend using primitive data types for public properties instead of using object data types. Slice complex data structures in a higher-level component and pass the primitive values to the component descendants.

Primitive values require specific @api properties that clearly define the data shape. Accepting an object or an array requires documentation to specify the shape. If an object shape changes, consumers break.

Standard HTML elements accept only primitive values for attributes. When a standard HTML element needs a complex shape, it uses child components. For example, a table element uses tr and td elements. Only primitive types can be defined in HTML. For example, <table data={..}> isn't a value in HTML. However, you could create a table Lightning web component with a data API.

# Objects Passed to Components Are Read-Only

A non-primitive value (like an object or array) passed to a component is read-only. The component cannot change the content of the object or array. If the component tries to change the content, you see an error in the browser console.

To mutate the data, the component can make a shallow copy of the objects it wants to mutate.

More commonly, the component can send an event to the owner of the object. When the owner receives the event, it mutates the data, which is sent back down to the child.

Tip

The next example attempts to help you fully understand that objects passed to a component are read-only. The example doesn't contain best practices, instead, it shows code that doesn't work.

In the following playground, example-contact-tile-object exposes its contact field as a public property. The parent, example-composition-basics-object, defines a contact object and passes it to example-contact-tile-object. The child component can't mutate the object.

Open the browser's JavaScript console and clear it.

Web Components Slots