Skip to content

[Bug]: Raw HTML list elements (ul, ol, li) have no default styling inside Shadow DOM #1081

@ZacharyObeid

Description

@ZacharyObeid

Browser

No response

Package version

v1.8.0

React version (if applicable)

v18.2.0

Description

When assistant responses contain raw HTML list elements (

    ,
      ,
    1. ) passed as response_type: "text", the SDK parses and renders the HTML correctly through markdown-it (html: true) and Lit's unsafeHTML() directive — but the list elements render with no styling inside Shadow DOM. No bullets, no indentation, no nesting.

      Other inline HTML elements like and

      render fine.

      Root Cause
      The SDK already handles this for markdown-originated lists by converting - item syntax into styled Carbon components (, ). However, when the same list structure comes in as raw HTML, it goes through the html_block → unsafeHTML() path and receives no equivalent styling.

      The SDK's SCSS for cds-aichat-markdown includes type styles for h1–h6 and styles for Carbon list components, but has no default styles for vanilla

        ,
          , or
        1. elements.

          Reproduction / example

          See Steps to reproduce

          Steps to reproduce

          Steps to Reproduce
          Pass a response_type: "text" message containing HTML list markup via instance.messaging.addMessage():
          instance.messaging.addMessage({
          origin: 'bot',
          type: 'text',
          text: '

          • Item 1
          • Item 2
            • Nested item
          '
          });

          Observe the rendered output inside the chat.
          Expected Behavior

            ,
              , and
            1. elements should render with proper list styling — bullets/numbers, indentation, and nesting — consistent with how markdown lists render via Carbon list components.

              Actual Behavior
              List content appears as flat, unstyled text on separate lines with no bullets, indentation, or visual nesting structure.

              Suggested severity

              Severity 3 = User can complete task, and/or has a workaround within the user experience of a given component.

              Application / product

              No response

              Code of Conduct

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    Projects

    Status

    🏗️ In Progress

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions