Azure Static Web Apps: Your stage site is ready! Visit it here: https://delightful-beach-055ecb503-1106.westeurope.azurestaticapps.net

Quality Gate passed

Issues
0 New issues
0 Accepted issues

Measures
0 Security Hotspots
0.0% Coverage on New Code
0.0% Duplication on New Code

See analysis details on SonarQube Cloud

Azure Static Web Apps: Your stage site is ready! Visit it here: https://delightful-beach-055ecb503-1106.westeurope.azurestaticapps.net

@leekelleher Do we need to do all of the work for the consumer with an .options property? Could they not manually add the <datalist /> element to the default uui-input slot?

My concern is that you cannot use this component outside a JavaScript context, i.e. in "light DOM", if you cannot set the options as HTML.

That's correct, the <input> inside the Shadow DOM can't access the <datalist> in the Light DOM (when slotted).

The only option (as far as I'm aware) is to have the <datalist> inside the Shadow DOM too.

I'd have preferred to keep the <datalist> as a separate component. Which is why I'm unsure about this PR. 🤔

That's correct, the <input> inside the Shadow DOM can't access the <datalist> in the Light DOM (when slotted).

That sounds very odd indeed. If you set up the uui-input component with:

render() {
  return html`
    <input type="text" bla="bla" list=${this.list}>
    <slot></slot>
  `
}

To understand the issue correctly, are you saying that this won't work?

<uui-input list="my-options">
  <datalist id="my-options">
    <option value="a">A</option>
  </datalist>
</uui-input>

That's correct, as the slotted content would be in the Light DOM.

I found an example of another library that solved it by creating an "input-container" element, where you manually type in the native <input> element. Their container element then provides the styling. That seems to work well, as that gives you exact control of the native elements.

Example here: https://jsbin.com/xojule/edit?html,output
Git repo here: https://github.com/PolymerElements/paper-input

Wonder if we could do something similar, which would also be very useful for uui-select, which currently does not work in Light DOM either:

<uui-input-container>
  <input type="text" list="options">
  <datalist id="my-options">
    <option value="a">A</option>
  </datalist>
</uui-input-container>