Unicode inside LWC ComboBox Values

Question

I have a requirement to add the registered TM symbol in superscript to some LWC combo box menus. The options array that you pass into the combo box does not seem to support any sort of String interpolation.

This won't work

 options = [{       
        {label: `product®`, value: 'product'}
    ]

Is there a way to do this with combox box? I can make it work by hard coding the values into a standard HTML

 <select name="cars" id="product">            
            <option value="test">{textVal}&#0174;</option>
        </select>
    enter code here

 

Answer 1

You don't need to escape Unicode in LWC. Use the literal character in your source code:

  options = [
    { label: 'Product®', value: 'Product®' }
  ];

Answer 2

Use lightning-formatted-text

<select name="cars">            
  <template for:each={options} for:item="option">
      <option value={option.value} key={option.value}>
         <lightning-formatted-text value="{option.label}" ></lightning-formatted-text>
      </option>
  </template>
</select>