Put HTML Class Binding into Practice

Learning Objectives:

After completing this unit, you’ll be able to:

• Implement HTML class binding on a Lightning web component.
  
• Modify a Lightning web component to dynamically apply CSS classes using JavaScript.
  

Ready to Get Hands-On?

Create a new Trailhead Playground now to follow along and try out the steps in this module. Scroll to the bottom of this page, click the playground name, and then select Create Playground. It typically takes 3–4 minutes for Salesforce to create your Trailhead Playground.

Note: Yes, we really mean a brand-new Trailhead playground! If you use an existing org or playground, you can run into problems completing the challenge.

Create a Lightning Web Component

In this unit, you put HTML class binding into practice on a Lightning web component. Start by creating the Lightning web component.

1. Name: helloWorld
2. Replace the contents of helloWorld.js with the following code. You will modify this file during the hands-on challenge.
   

import { LightningElement, api } from "lwc";


export default class extends LightningElement {
  @api objectApiName;


  get computedClassNames() {
    return [
    ];
  }
}

3. Replace the contents of helloWorld.html with the following code. You will modify this file during the hands-on challenge.
   

<template>
  <div class="slds-box slds-theme_alert-texture slds-theme_shade">Hello, World!</div>
</template>

4. Replace the contents of helloWorld.js-meta.xml with the following code.
   

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

5. Deploy your helloWorld component to your Trailhead playground.