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?