1

In my LWC, I have code that creates the contents I'm displaying in a component. The content includes an unordered list where I've added a class tag to change the color of the list element. Here is the text I display in the formatted rich text component:

<ul>
    <li class='msgSuccess'>1 item(s) added to cart successfully</li>
    <li class='msgErr'>3 item(s) were not added to the cart</li>
    <li class='msgWarn'>Invalid SKU: 710-900007</li>
    <li class='msgWarn'>Invalid SKU: ABC</li>
    <li class='msgWarn'>Invalid SKU: XYZ</li>
</ul>

Here is the component HTML:

<template>

    <lightning-formatted-rich-text value={richtext}></lightning-formatted-rich-text>

</template>

The component JS:

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

export default class App extends LightningElement {

@track richtext = '<ul><li class=\'msgSuccess\'>1 item(s) added to cart successfully</li><li class=\'msgErr\'>3 item(s) were not added to the cart</li><li class=\'msgWarn\'>Invalid SKU: 710-900007</li><li class=\'msgWarn\'>Invalid SKU: ABC</li><li class=\'msgWarn\'>Invalid SKU: XYZ</li></ul>';

}

My component includes a .css file with the following:

.msgErr {
    color: red !important;
}
.msgSuccess {
    color: green;
}
.msgWarn {
    color: #000;
}
.msgInfo {
    color: #000;
}

When the formatted rich text component renders, the class tags are ignored:

Formatted Rich Text component

According to the component documentation, the class tag should be recognized. When I update the CSS for a <li> manually in the browser designer, I can apply a color and see the change. What am I doing wrong?

8
  • Could you share a playground link as an example in your question. The actual classes I think should be declared on the component containing the formatted rich texts.
    – Raul
    Jul 27, 2020 at 20:01
  • Yep, I believe that's what I'm doing. I'll get a playground going momentarily. Jul 27, 2020 at 20:25
  • I'm not seeing a way to save a playground app. When I do CTRL+S, I get "Save Project Failed" Jul 27, 2020 at 20:35
  • Just created a thread about this -- looks like you can't save Playground exercises anymore. :-( salesforce.stackexchange.com/questions/314110/… Jul 27, 2020 at 21:39
  • Could you provide the entire LWC template context for your unordered list?
    – Phil W
    Jul 27, 2020 at 22:01

2 Answers 2

1

In LWC, components are designed so as to be unaffected by their context of use; CSS from one LWC has no impact on its children's rendering.

The formatted rich text component will be no different.

As per the documentation, the formatted rich text component does not support the "style" element, so you cannot embed the CSS in the HTML to be rendered. Additionally, the component itself does not expose a property for accepting CSS to accompany the HTML to be rendered.

While the documentation does state that the "class" attribute is supported on the HTML elements to be rendered, this component will only understand SLDS classes (like many other standard lightning components) since the component itself only exposes that CSS within its rendering.

As such you cannot use your own CSS rules and class names. The closest you will have for the example you have provided is:

  • msgError = slds-text-color_error
  • msgSuccess = slds-text-color_success
  • msgWarn = slds-text-color_default
  • msgInfo = slds-text-color_default

From my perspective I would always encourage use of SLDS classes only because you then ensure your component is consistent with the Salesforce UX - users can easily learn what certain presentation styles represent and can be confident that this meaning is applied consistently across the UI. Using SLDS also ensures that text remains readable (since themes adjust both the background and text colours to maintain a minimum contrast). Finally SLDS classes can be used in standard and custom components without any fuss or hoop jumping.

9
  • 1
    This makes sense. How the "class" attribute actually works doesn't appear to be documented. I was trying to avoid using the SLDS classes because I didn't want the list elements to look like toasts, with the background color. Let me try out the SLDS classes to verify that those do work. Thanks for your help! Jul 28, 2020 at 17:38
  • The lack of documentation is, indeed, frustrating.
    – Phil W
    Jul 28, 2020 at 17:48
  • I changed my component to use a DIV with lwc:dom="manual". That works with my custom CSS class names. Jul 29, 2020 at 14:05
  • Yes, that is a way to do it for sure. Basically taking the HTML out of LWC control.
    – Phil W
    Jul 29, 2020 at 14:40
  • 1
    Those SLDS text classes worked like a charm. Thanks! Aug 3, 2020 at 16:24
0

In case the SLDS utility classes are not sufficient and this LWC is only used in experience cloud you could also use css overrides. This is css you can add to an experience that will be applied to all (sub)components.

To enter css overrides you go to the experience builder and click on the theme button. Next you click the dropdown menu on the top right and click on "Edit CSS". If you were to enter your css snippet there it will be applied to everything to your rich text.

You must log in to answer this question.

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