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 '20 at 20:01
  • Yep, I believe that's what I'm doing. I'll get a playground going momentarily. Jul 27 '20 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 '20 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 '20 at 21:39
  • Could you provide the entire LWC template context for your unordered list?
    – Phil W
    Jul 27 '20 at 22:01
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 '20 at 17:38
  • The lack of documentation is, indeed, frustrating.
    – Phil W
    Jul 28 '20 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 '20 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 '20 at 14:40
  • 1
    Those SLDS text classes worked like a charm. Thanks! Aug 3 '20 at 16:24

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.