Salesforce LWC 项目符号点未在富文本组件中呈现

Question

我正在使用 Lightning Web 组件并尝试在 lightning-formatted-rich-text 组件中呈现一个列表。我需要这个组件是动态的，所以调用“ul”和“li”组件是行不通的。

HTML

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

JS

import BaseChatMessage from 'lightningsnapin/baseChatMessage';
import { track } from 'lwc';
export default class ChatMessageDefaultUI extends BaseChatMessage {
    
    @track message = '<ul><li>hello</li><li>is this working?</li></ul>';
}

我试过 css 从不同的答案，但没有发现任何区别

ul:not(.browser-default) li {
    list-style-type: disc;
}

Answer 1

我运行在尝试从 Salesforce CMS（通过 JSON）解析富文本对象时遇到了这个问题。

看起来 lightning-formatted-text 目前最适合通过 .js 文件的 (html-) 解码字符串或直接在 [=23= 中解析的 html-编码字符串]-文件。

我运行一些测试，其中“richText1”使用 html 代码呈现，其他按预期呈现：

//JS
richText1 = '&lt;h1&gt;TEST&lt;/h1&gt;'; 
richText2 = "<h1>TEST</h1>";

<lightning-formatted-rich-text value={richText1}></lightning-formatted-rich-text>
<lightning-formatted-rich-text value={richText2}></lightning-formatted-rich-text>
<lightning-formatted-rich-text value="&lt;h1&gt;TEST&lt;/h1&gt;"></lightning-formatted-rich-text>

在我的例子中，它有助于在使用 lightning-formatted-rich-text 之前 html 解码字符串。参见 vsyncs tips here

Salesforce LWC 项目符号点未在富文本组件中呈现

Salesforce LWC bullet points not rendering in rich text component

javascript

salesforce-lightning

lwc