Using Bootstrap-select From Elm

A am trying to use bootstrap-select - a javascript/css library extending the html-select-tag with nice features and style. At first glance, calling it from elm seems simple. Indeed

Solution 1:

Finally, I managed to wrap bootstrap-select into a (minimal, nonperfect) custom element which automatically refreshes on updates. Here it is:

import { LitElement, html, customElement, property } from'lit-element';
import * as $ from'jquery';
import'bootstrap';
import'bootstrap-select';

@customElement('lit-select')
exportclassLitSelectextendsLitElement {

    @property({ type : Array }) items = []

    updated() {
        $(this).find(".selectpicker").selectpicker('refresh');
    }

    createRenderRoot() {
        returnthis;
    }

    private renderItem(item: string) {
        return html`<option>${item}</option>
        `;
    }

    render() {
        return html`<selectclass="selectpicker"data-live-search = "true">${this.items.map(item => this.renderItem(item))}</select>
        `;
    }
}

This element can be created from HTML as

<lit-selectitems='["foo", "bar"]'></lit-select>

or from elm as

node "lit-select" [ attribute "items""[\"foo\",\"bar\"]" ] []

and it also works in dynamic situations as above. However, an obvious drawback is that the item list has to be given to a lit-select attribute encoded as a json string. So the markup possibilities are rather limited (for example, the user cannot decide wether to give lit-select a bunch of options or a bunch of option groups).

I would be happy to see better solutions but since this is another topic, I will start a followup question soon.