The render callbacks return raw HTML (or a DOM element) so you can build rich option rows, restyle badges, or replace a whole pill with a card. They are set imperatively on the element in setup(el), never as attributes. To restyle the shadow-DOM internals themselves without any JavaScript, reach for the custom-styles attribute (v2.2.0) — see CR03 below.

CR01 Rich option rows

renderOptionContentCallback builds a multi-line row with icon, label, and subtitle.

Open the dropdown — each row renders your HTML instead of the plain label.

Quick usage 
 
 
  • renderOptionContentCallback receives (item, ctx) and returns the
						row's inner HTML.
    •  
  • In v2.0.0 the ctx is presentation-aware (ctx.isFullscreen), so
						you can render leaner rows on phones where the dropdown goes fullscreen.
 
The option callback 
 
 
 
 
CR02 Whole-badge rendering (v2.0.0)
 
renderBadgeCallback replaces the entire pill — here a Bootstrap badge with its own remove button.
 
  
Select a few countries — each selection becomes a fully custom badge you own.
 
 
Quick usage 
 
 
 
  • renderBadgeCallback is new in v2.0.0 and owns the whole badge,
						not just its content. Return null to fall back to the default pill for an
						item.
    •  
  • Any element inside your badge with data-action="remove" triggers deselect —
						the component wires it up for you, no event handlers required.
    •  
  • renderBadgeContentCallback is the lighter alternative when you only want to
						change the content inside the built-in pill.
 
The whole-badge callback 
 
 
 
 
CR03 Declarative styling — custom-styles (v2.2.0)
 
Style the shadow-DOM internals with a plain attribute — zero JavaScript.
 
  
Select a few items — the badges are pill-shaped and the option hover is tinted, all from the custom-styles attribute above.
 
 
Quick usage 
 
 
 
  • custom-styles takes raw CSS as a string and injects it verbatim — selectors and all — into a replaceable style slot at the top of the shadow root, the same
						slot customStylesCallback uses.
    •  
  • Because it's an attribute, static HTML, server-rendered markup, and no-build pages can restyle
						internals like .ms__badge and .ms__option (and your own
						custom-rendered content) with no script at all. It's reactive and mirrored by the customStyles property.
    •  
  • When both are set, customStylesCallback wins — treat the attribute as the static
						fallback.