lightning-formatted-rich-text class tag not recognized?

Question

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:

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?

Answer 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.

Answer 2

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.