Migrate a facet in an Aura component to a slot in a Lightning web component.
A facet in an Aura component is an attribute with a type of Aura.Component[]. For example:
1<aura:component>
2 <aura:attribute name="firstName" type="Aura.Component[]" />
3 <aura:attribute name="lastName" type="Aura.Component[]" />
4
5 <p>First Name: {!v.firstName}</p>
6 <p>Last Name: {!v.lastName}</p>
7</aura:component>In a Lightning web component, we use slots instead of the facets. This template defines two named slots.
1<!-- namedSlots.html -->
2<template>
3 <p>First Name: <slot name="firstName">Unknown</slot></p>
4 <p>Last Name: <slot name="lastName">Unknown</slot></p>
5</template>This code consumes the <c-namedslots> component.
1<!-- slotsWrapper.html -->
2<template>
3 <c-named-slots>
4 <span slot="firstName">Willy</span>
5 <span slot="lastName">Wonka</span>
6 </c-named-slots>
7</template>This HTML is the rendered output.
1<p>First Name: <span>Willy</span></p>
2<p>Last Name: <span>Wonka</span></p>See Also
j