In this tutorial, we will see how to include Salesforce Lightning Design System(SLDS) component into the LWC Open Source Application. But, before this, please complete this previous tutorial.
As per the previous tutorial, we already have created a customer-service-app using LWC Open Source framework where we are showing all Case Records from Salesforce. But, We have not applied SLDS into this application. Now, we will see how to include SLDS into this LWC Open Source application. Let’s start.
Step 1: Open customer-service-app in VS Code.
Step 2: Please install @salesforce-ux/design-system node modules to load all the SLDS Styles into your project by executing the following command from the terminal of the VS Code.
npm install @salesforce-ux/design-system
After the execution of this, we can see the dependencies in package.json file.
Step 3: Before applying SLDS into our application, first we have to understand the difference between native shadow DOM and synthetic shadow DOM for LWC.
Native Shadow DOM: Native Shadow DOM is by default enabled in LWC Open Source. Basically, we are calling app component from index.html in this project. So, If we will include the SLDS styles using tag in the header of our index.html file, the immediate app.html can get all the SLDS Styles, but this is the wrong statement. app.html can not inherit the styles applied for the parent html i.e., index.html file. Because, Native Shadow DOM encapsulates all our components in the application that means every component can define its own style.
Synthetic Shadow DOM: This is the exception of Native Shadow DOM means it will not encapsulate all the components. So, app.html can inherit the styles applied for the parent html i.e., index.html file.
First, we will apply Synthetic Shadow DOM. Then, we will learn about Native Shadow DOM.
Step 4: Need to install @lwc/synthetic-shadow node module from the terminal of the VS Code to enable synthetic shadow DOM.
npm install @lwc/synthetic-shadow
Step 5: Open lwc-services.config.js file and include the exact directory for salesforce-lightning-design-system.css file in this way.
// Find the full example of all available configuration options at
// https://github.com/muenzpraeger/create-lwc-app/blob/master/packages/lwc-services/example/lwc-services.config.js
module.exports = {
resources: [{ from: 'src/client/resources', to: 'dist/resources/' },
{
from: 'node_modules/@salesforce-ux/design-system/assets',
to: 'src/SLDS'
},
{
from: 'node_modules/@salesforce-ux/design-system/assets',
to: 'dist/SLDS'
}
],
sourceDir: './src/client',
moduleDir: './src/client/modules',
devServer: {
proxy: { '/': 'http://localhost:3002' }
}
};
Here, you can see that program will create new src/SLDS directory where all SLDS style files will be there.
Step 6: Open src\client\ index.js file and import @lwc/synthetic-shadow into this file just like:
import '@lwc/synthetic-shadow';
import { createElement } from 'lwc';
import MyApp from 'my/app';
const app = createElement('my-app', { is: MyApp });
// eslint-disable-next-line @lwc/lwc/no-document-query
document.querySelector('#main').appendChild(app);
Step 7: Open src\client\index.html file and include the salesforce-lightning-design-system.css file using link tag in the header of the html file.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Customer Service Application</title>
<style>
body {
font-family: Arial, Helvetica, sans-serif;
}
</style>
<meta name="viewport" content="width=device-width,initial-scale=1" />
<link rel="shortcut icon" href="/resources/favicon.ico" />
<link rel="stylesheet" type="text/css" href="/SLDS/styles/salesforce-lightning-design-system.css" />
</head>
<body>
<div id="main">
</div>
</body>
</html>
Step 8: Now, we need to include SLDS styles into our html table of the src\client\modules\my\app\app.html file.
<template>
<header>
<img src="resources/lwc.png" alt="App logo">
<h2>Customer Service Application</h2>
</header>
<!-- Page code -->
<main class="content">
<!--<input type="search" placeholder="Search contacts..."
oninput={searchdata} />-->
<table class="slds-table slds-table_cell-buffer slds-table_bordered">
<thead>
<tr class="slds-line-height_reset">
<th scope="col">
<div class="slds-truncate">
<input type="checkbox"></input>
</div>
</th>
<th scope="col">
<div class="slds-truncate" title="Name">Case Number</div>
</th>
<th scope="col">
<div class="slds-truncate" title="Subject">Subject</div>
</th>
<th scope="col">
<div class="slds-truncate" title="Status">Status</div>
</th>
<th scope="col">
<div class="slds-truncate" title="Priority">Priority</div>
</th>
<th scope="col">
<div class="slds-truncate" title="Created Date">Created Date</div>
</th>
<th scope="col">
<div class="slds-truncate" title="Closed Date">Closed Date</div>
</th>
</tr>
</thead>
<tbody>
<template for:each={cases} for:item="cs">
<tr key={cs.id}>
<th scope="col">
<div>
<input type="checkbox" value={cs.CaseNumber} data-id={cs.id}></input>
</div>
</th>
<th scope="col">
<div>{cs.CaseNumber}</div>
</th>
<th scope="col">
<div>{cs.Subject}</div>
</th>
<th scope="col">
<div>{cs.Status}</div>
</th>
<th scope="col">
<div>{cs.Priority}</div>
</th>
<th scope="col">
<div>{cs.CreatedDate}</div>
</th>
<th scope="col">
<div>{cs.ClosedDate}</div>
</th>
</tr>
</template>
</tbody>
</table>
</main>
</template>
Step 9: So, now app.html can use the SLDS component from the salesforce-lightning-design-system.css file declared in index.html file. This is possible by applying Synthetic Shadow DOM.
Step 10: Run the command from the terminal of the VS Code as
npm run watch
and we will get the output at http://localhost:3001 as the Case records are visible in the table using SLDS styles as per the following image:
Good Job! Now, you have successfully included SLDS Styles into the customer-service-app built by LWC Open Source framework.
But, we have done this by Synthetic Shadow DOM which is not enabled by default in LWC Open Source. Let’s try the same thing with Native Shadow DOM into the next tutorial.
22,720 total views, 3 views today