Repository: holoviz/panel

Issue:
Enable or document how to render options in a List Parameter as Literal elements
## Request

Enable or document how to render options in a List Parameter as Literal elements

## Motivation

I'm trying to show a user how to create a custom dropdown component using ReactiveHTML in https://discourse.holoviz.org/t/customize-panel-components-widgets-design/4187.

There is already an example of a *child* template/ dropdown here https://panel.holoviz.org/user_guide/Custom_Components.html#child-templates

Unfortunately the drop down options are not rendered as Literal values but instead as panels, i.e. wrapping the literal value in `bk` `div`s.

In my example it makes the dropdown not look nice because a lot of margin is added.

![image](https://user-images.githubusercontent.com/42288570/188283341-7364227c-03d1-4aaf-ab07-b349acf4c214.png)

```python
from panel.reactive import ReactiveHTML
import param

class ShoelaceSelect(ReactiveHTML):
    value = param.Parameter()
    options = param.List()
    _template = """
<sl-dropdown>
  <sl-button slot="trigger" caret>Dropdown</sl-button>
  <sl-menu>
   {% for obj in options %}
    <sl-menu-item id="option">${obj}</sl-menu-item>
    {% endfor %}
  </sl-menu>
</sl-dropdown>
"""

    __javascript_modules__=["https://cdn.jsdelivr.net/npm/@shoelace-style/shoelace@2.0.0-beta.82/dist/shoelace.js"]
    __css__ = ["https://cdn.jsdelivr.net/npm/@shoelace-style/shoelace@2.0.0-beta.82/dist/themes/light.css"]
    # _child_config = {'obj': 'literal'}

import panel as pn

pn.extension()

select = ShoelaceSelect(options=["apple", "pear", "banana"])

pn.Column(select).servable()
```

I simple cannot find any documentation or example telling me how to provide these a literal values.


Discussion:
## Working example

I found an example on discourse that helped construct this one using `loop.index0` and `{{ }}`. I think this should be documented somewhere.

```python
from panel.reactive import ReactiveHTML
import param

class ShoelaceSelect(ReactiveHTML):
    value = param.Parameter()
    options = param.List()
    _template = """
<sl-dropdown>
  <sl-button slot="trigger" caret>Dropdown</sl-button>
  <sl-menu>
  {% for option in options %}
    <sl-menu-item id="option-{{ loop.index0 }}">{{ option }}</sl-menu-item>
    {% endfor %}
  </sl-menu>
</sl-dropdown>
"""

    __javascript_modules__=["https://cdn.jsdelivr.net/npm/@shoelace-style/shoelace@2.0.0-beta.82/dist/shoelace.js"]
    __css__ = ["https://cdn.jsdelivr.net/npm/@shoelace-style/shoelace@2.0.0-beta.82/dist/themes/light.css"]
    # _child_config = {'obj': 'literal'}

import panel as pn

pn.extension()

select = ShoelaceSelect(options=["apple", "pear", "banana"])

pn.Column(select).servable()
```

Resolving patch:
diff --git a/panel/models/reactive_html.py b/panel/models/reactive_html.py
--- a/panel/models/reactive_html.py
+++ b/panel/models/reactive_html.py
@@ -136,10 +136,11 @@ def handle_data(self, data):
             match = None
 
         # Handle looped variables
-        if match and (match in self.loop_map or '[' in match) and self._open_for:
-            if match in self.loop_map:
-                matches[matches.index('${%s}' % match)] = '${%s}' % self.loop_map[match]
-                match = self.loop_map[match]
+        if match and (match.strip() in self.loop_map or '[' in match) and self._open_for:
+            if match.strip() in self.loop_map:
+                loop_match = self.loop_map[match.strip()]
+                matches[matches.index('${%s}' % match)] = '${%s}' % loop_match
+                match = loop_match
             elif '[' in match:
                 match, _ = match.split('[')
             dom_id = dom_id.replace('-{{ loop.index0 }}', '')


Test patch: