February 8, 2019 - Simply Salesforce

Let’s discuss here what is the slots in the lightning web component and those will be used to pass the properties from the parent component. A slot in a component’s HTML file is a placeholder for markup that a parent component passes into a component’s body. A component can have zero or more slots. A slot is a placeholder for markup that a parent component passes into a component’s body. Slots are part of the Web Component specification To define a slot in markup, use the <slot> tag, which has an optional name attribute. In an Aura component, a facet is a similar concept to a slot. Please refer to this link for facets

We have two types of slots

Unnamed slots
Named slots

Unnamed Slots

An unnamed slot is a placeholder for any markup that a parent component passes into the body. For Example, in this component, we have defined the slot and parent component will pass the markup into this component.

 sfdx force:lightning:component:create --type lwc --componentname slotdemo --outputdir force-app\main\default\lwc

1	sfdx force:lightning:component:create --type lwc --componentname slotdemo --outputdir force-app\main\default\lwc

use this slotdemo.html code. This template markup is having the <slot> tag which will be used to pass the content from the parent component.

<template>
    <d6> Slot Base </d6>
    <h1>Add content to slot</h1>
    <div>
        <slot></slot>
    </div>
</template>

<h1>Add content to slot</h1>

<div>

</div>

</template>

use the below slotdemo.js-meta.xml

<?xml version="1.0" encoding="UTF-8"?>
<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata" fqn="slotdemo">
    <apiVersion>45.0</apiVersion>
    <isExposed>true</isExposed>
</LightningComponentBundle>

<?xml version="1.0" encoding="UTF-8"?>

</LightningComponentBundle>

create a parent component to pass the markup into the slots. use the below SFDX command.

 sfdx force:lightning:component:create --type lwc --componentname slotwrapper --outputdir force-app\main\default\lwc

1	sfdx force:lightning:component:create --type lwc --componentname slotwrapper --outputdir force-app\main\default\lwc

Use the below slotwrapper.html code. When c-slot-wrapper is rendered, the unnamed slot is replaced with the markup passed into the body of c-slot-demo. Here’s the rendered output of c-slot-wrapper.

Use this slotwrapper.html code

<template>
    <h6>  Slot Wrapper </h6>
    <c-slotdemo>
        <p>content from parent</p>
    </c-slotdemo>
</template>

<h6> Slot Wrapper </h6>

<c-slotdemo>

<p>content from parent</p>

</c-slotdemo>

</template>

use the below slotwrapper.js-meta.xml code

<?xml version="1.0" encoding="UTF-8"?>
<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata" fqn="helloWorld">
    <apiVersion>45.0</apiVersion>
    <isExposed>true</isExposed>
    <targets>
        <target>lightning__RecordPage</target>
    </targets>
</LightningComponentBundle>

<?xml version="1.0" encoding="UTF-8"?>

<target>lightning__RecordPage</target>

</targets>

</LightningComponentBundle>

When c-slot-wrapper is rendered, the unnamed slot is replaced with the markup passed into the body of.c-slot-demo . Here’s the rendered output of c-slot-wrapper . If a component has more than one unnamed slot, the markup passed into the body of the component is inserted into all the unnamed slots. This UI pattern is unusual. A component usually has zero or one unnamed slot.

Named Slots

named slots are the slot with the name attribute. create a lightning web component using the below SFDX command.

 sfdx force:lightning:component:create --type lwc --componentname namedslots --outputdir force-app\main\default\lwc

1	sfdx force:lightning:component:create --type lwc --componentname namedslots --outputdir force-app\main\default\lwc

Use the below namedslots.html code. This example component has two named slots and one unnamed slot.

<template>
    <p>First Name: <slot name="firstName">Default first name</slot>
    </p>
    <p>Last Name: <slot name="lastName">Default last name</slot>
    </p>
    <p>Description: <slot>Default description</slot>
    </p>
</template>

<p>First Name: <slot name="firstName">Default first name</slot>

</p>

<p>Last Name: <slot name="lastName">Default last name</slot>

</p>

<p>Description: <slot>Default description</slot>

</p>

</template>

Update the soltwrapper.html code as shown below

<template>
    <c-namedslot>
        <span slot="firstName">Willy</span>
        <span slot="lastName">Wonka</span>
        <span>Chocolatier</span>
    </c-namedslot>
</template>

<c-namedslot>

<span slot="firstName">Willy</span>

<span slot="lastName">Wonka</span>

<span>Chocolatier</span>

</c-namedslot>

</template>

Push changes and now you can able to see the output as shown below

c-slotswrapper drops:

“Willy” into the firstName slot
“Wonka” into the lastName slot
“Chocolatier” into the unnamed slotHere’s the rendered output.
<p>First Name: <span slot=”firstName”>Willy</span></p>
<p>Last Name: <span slot=”lastName”>Wonka</span></p>
<p>Description: <span>Chocolatier</span></p>

DOM elements that are passed to a component via slots aren’t owned by the component and aren’t in the component’s shadow tree. To access these DOM elements passed in via slots, call this.querySelector() andthis.querySelectorAll(). The component doesn’t own these elements, so you don’t use this.template.querySelector() or this.template.querySelectorAll().

The following example shows how to get the DOM elements passed to a child component from the child’s context. Provide the selector name, such as an element, for this.querySelector() and this.querySelectorAll().

import { LightningElement } from 'lwc';

export default class Namedslot extends LightningElement {
    renderedCallback() {
        this.template.querySelector('div'); 
        this.template.querySelector('span'); 
       
    }

}

import { LightningElement } from 'lwc';

export default class Namedslot extends LightningElement {

renderedCallback() {

this.template.querySelector('div');

this.template.querySelector('span');

}

Code reuse is important for writing the reusing as much as possible from existing code Especially if it’s good, tested, maintainable, extensible, and documented code. To share code between components, create an ES6 module and use the standard export statement to export the functionality that your module exposes. Your module can use the standard import statement to use other shared modules.

Create Shared Code

To share code between components, create an ES6 module and use the standard export statement to export the functionality that your module exposes. Your module can use the standard import statement to use other shared modules.

Use Shared Code

To use the shared code in a JavaScript file, use the standard import statement. For example:

import {
    isFunction
} from 'c/utils';

import {

isFunction

} from 'c/utils';

This line imports the utils module in the c namespace.

Note: You can’t load JavaScript code from a static resource currently. For example, if you’re developing an Aura component, you
can reference JavaScript in a static resource using the <ltng:require> tag. This approach doesn’t work for Lightning web
components.

Example

Let’s create an ES6 module and see how it’s used in a Lightning web component. Create a folder for the utils module in the LWC folder in the lightning web component project directory

cd force-app/main/default/lwc
mkdir utils
cd utils

cd force-app/main/default/lwc

mkdir utils

cd utils

The folder looks like below.

Create a utils.js file in the utils folder. This file is an ES6 module that is export the isFunction

/* utils.js */
/**
* Returns whether provided value is a function
* @param {*} value - the value to be checked
* @return {boolean} true if the value is a function, false otherwise
*/
export function isFunction(value) {
return typeof value === 'function';
}

/* utils.js */

/**

* Returns whether provided value is a function

* @param {*} value - the value to be checked

* @return {boolean} true if the value is a function, false otherwise

export function isFunction(value) {

return typeof value === 'function';

}

The utils module exports an isFunction() function that returns whether the provided parameter is a function.

Create a utils.js-meta.xml configuration file for the utils module.

<?xml version="1.0" encoding="UTF-8"?>
<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata">
    <apiVersion>45.0</apiVersion>
    <isExposed>false</isExposed>
</LightningComponentBundle>

<?xml version="1.0" encoding="UTF-8"?>

<isExposed>false</isExposed>

</LightningComponentBundle>

Use Shared Code

Now you need to import the above create ES6 module utils .create a lightning web component using this command

 sfdx force:lightning:component:create --type lwc --componentname libcaller --outputdir force-app\main\default\lwc

1	sfdx force:lightning:component:create --type lwc --componentname libcaller --outputdir force-app\main\default\lwc

Use this libcaller.html code.

<template>
    <p>Is it a function?: {result}</p>
    <button onclick={checkType}>Check Type</button>
</template>

<p>Is it a function?: {result}</p>

<button onclick={checkType}>Check Type</button>

</template>

Use this libcaller.js code

import { LightningElement ,api,track} from 'lwc';
// import the library
import {
    isFunction
} from 'c/utils';

export default class Libcaller extends LightningElement {
@track result;
checkType() {
    // call the imported library function
    this.result = isFunction(
        function () {
            console.log(" I am a function");
        }
    );
}
}

import { LightningElement ,api,track} from 'lwc';

// import the library

import {

isFunction

} from 'c/utils';

export default class Libcaller extends LightningElement {

@track result;

checkType() {

// call the imported library function

this.result = isFunction(

function () {

console.log(" I am a function");

}

);

}

The c-libcaller component imports the utils module and calls the isFunction function exported by the module. The argument passed into isFunction is a function so the result is set to true. The below code shows how to import the utils code

import {
    isFunction
} from 'c/utils';

import {

isFunction

} from 'c/utils';

The above below code shows how to call the imported function

 isFunction(
        function () {
            console.log(" I am a function");
        }
    );

isFunction(

function () {

console.log(" I am a function");

}

);

Use this libcaller.js-meta.xml code

<?xml version="1.0" encoding="UTF-8"?>
<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata" fqn="helloWorld">
    <apiVersion>45.0</apiVersion>
    <isExposed>true</isExposed>
    <targets>
        <target>lightning__RecordPage</target>
    </targets>
</LightningComponentBundle>

<?xml version="1.0" encoding="UTF-8"?>

<target>lightning__RecordPage</target>

</targets>

</LightningComponentBundle>

Push the changes to scratch org and add to layout for testing. When you click the Check Type button it will call then imported isFucntion module and set the value to the result property.

M	T	W	T	F	S	S
				1	2	3
4	5	6	7	8	9	10
11	12	13	14	15	16	17
18	19	20	21	22	23	24
25	26	27	28

Simply Salesforce

Day: February 8, 2019

Lightning Web Component Slots

Unnamed Slots

Named Slots

Like this:

Share JavaScript Code Between Lightning Web Components

Create Shared Code

Use Shared Code

Example

Use Shared Code

Like this:

Day: February 8, 2019

Unnamed Slots

Named Slots

Share this:

Like this:

Create Shared Code

Use Shared Code

Example

Use Shared Code

Share this:

Like this: