qnc_checkbox_dropdown

Usage

Import our module into one of your modules. It has the side effect of calling customElements.define(...).

<qnc-checkbox-dropdown>
    <label><input type=checkbox checked> Apple</label>
    <label><input type=checkbox> Banana</label>

    ... arbitrary other checkboxes
    ... arbitrary other content
</qnc-checkbox-dropdown>

This renders an inline summary of the selected options. Clicking that summary opens the wrapped content in a drop-down menu.

Styling

You can select our shadow-dom elements using ::part() pseudo elements:

• qnc-checkbox-dropdown::part(summary-button): the summary button
• qnc-checkbox-dropdown::part(qnc-dialog): the qnc-dialog wrapper element

Minimizing FOUC

You cannot completely eliminiate FOUC if your initial html includes any qnc-checkbox-dropdown elements.

You can minimize it, however, by adding:

    qnc-checkbox-dropdown:not(:defined) {
        display: none;
    }

Events

We dispatch the following custom events ({bubbles: true, cancelable: false})

• qnc-checkbox-dropdown-opening (may not yet be fully visible/focused)
• qnc-checkbox-dropdown-opened (fully visible and focused)
• qnc-checkbox-dropdown-closed (fully closed, focus has returned to something outside our dialog)

You might want to listen to lock page scrolling between the opening and closed events.