4

Does anyone know of an equivalent to the Aura utility methods for adding/ removing style classes dynamically, or have some other workaround?

https://developer.salesforce.com/docs/atlas.en-us.lightning.meta/lightning/js_cb_styles.htm

1
  • 1
    FYI, for most of the custom stuff you see in Aura, LWC does using native functionality. That's one reason why components are smaller and faster than in Aura.
    – sfdcfox
    Commented Jun 7, 2019 at 17:06

1 Answer 1

10

You can use the standard element classList property for it (see here)

Like:

Template

<template>
    <div>Hello World!</div>
    <lightning-button label="Add" onclick={addClass}></lightning-button>
    <lightning-button label="Remove" onclick={removeClass}></lightning-button>
    <lightning-button label="Toggle" onclick={toggleClass}></lightning-button>
</template>

Controller:

import { LightningElement } from 'lwc';

export default class App extends LightningElement {

    addClass() {
        this.template.querySelector('div').classList.add('red');
    }

    removeClass() {
        this.template.querySelector('div').classList.remove('red');
    }

    toggleClass() {
        this.template.querySelector('div').classList.toggle('red');
    }
}

Example: https://developer.salesforce.com/docs/component-library/tools/playground/b-iFXjvxr/1/edit

4
  • 1
    Links can go bad, Renji. Can you copy the relevant answers to the question here? Commented Jun 7, 2019 at 15:50
  • added the code example inline
    – Renji-xD
    Commented Jun 7, 2019 at 15:55
  • Wonderful, thank you! Commented Jun 7, 2019 at 15:59
  • Thank you very much Renji Commented Jun 11, 2019 at 9:13

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .