From 0cefbee90b31499f0b0f8fc70cb9ecb90b457974 Mon Sep 17 00:00:00 2001 From: Wesley Luyten Date: Sun, 5 Mar 2023 09:52:56 -0600 Subject: [PATCH] fix: iterate --- extended.html | 88 +++++++++++++++++++++++++++++++++++++++++++++++ index.html | 82 +++++++++++++++++++++++++++++++++++++++++++ src/selectmenu.js | 34 +++++++++++++----- 3 files changed, 196 insertions(+), 8 deletions(-) create mode 100644 extended.html diff --git a/extended.html b/extended.html new file mode 100644 index 0000000..8fdd71f --- /dev/null +++ b/extended.html @@ -0,0 +1,88 @@ + + +selectmenu polyfill + + + + +

SelectMenu Polyfill

+ + + +
+ Choose a plant + + +
+
+
+
+

Flowers

+ + + + +
+
+

Trees

+ + + +
+
+
+ + +
+
+ +Back diff --git a/index.html b/index.html index 0704a83..3593984 100644 --- a/index.html +++ b/index.html @@ -1,10 +1,92 @@ selectmenu polyfill + + +

SelectMenu Polyfill

+ + +

Default behavior

+ + + +

Styling parts of the control

+ + + + + + + + + +

Use your own markup

+ + + +
+ + Choose an option +
+ + + + + +
+
+ +Extended diff --git a/src/selectmenu.js b/src/selectmenu.js index 0352dca..181f05c 100644 --- a/src/selectmenu.js +++ b/src/selectmenu.js @@ -105,19 +105,37 @@ class SelectMenuPolyfill { selectmenu.addEventListener('click', this.#handleClick); document.addEventListener('click', this.#handleBlur); - this.#defaultSlot.addEventListener('slotchange', this.#handleSlot); + this.#defaultSlot.addEventListener('slotchange', this.#handleDefaultSlot); + this.#listboxSlot.addEventListener('slotchange', this.#handleListboxSlot); + } + + #select() { + const selected = this.#options + .find(el => el.hasAttribute('selected')) ?? this.#options[0]; + + this.#selectOption(selected); } #selectOption(option) { this.#selectedValue.textContent = option.value; } - #handleSlot = () => { - this.#options = this.#defaultSlot.assignedElements(); + #handleDefaultSlot = () => { + this.#options = [...this.#selectmenu.querySelectorAll('option')]; + this.#select(); + } - const selected = this.#options.find(el => el.hasAttribute('selected')) ?? this.#options[0]; + #handleListboxSlot = () => { + this.#options = [...this.#selectmenu.querySelectorAll('option')]; + this.#select(); + } - this.#selectOption(selected); + get #buttonSlot() { + return this.#selectmenu.shadowRoot.querySelector('slot[name=button]'); + } + + get #listboxSlot() { + return this.#selectmenu.shadowRoot.querySelector('slot[name=listbox]'); } get #defaultSlot() { @@ -125,7 +143,7 @@ class SelectMenuPolyfill { } get #selectedValue() { - let selectedValue = this.#selectmenu.querySelector(':scope > [behavior=selected-value]'); + let selectedValue = this.#selectmenu.querySelector('[behavior=selected-value]'); if (!selectedValue) { selectedValue = this.#selectmenu.shadowRoot.querySelector('[behavior=selected-value]'); } @@ -133,7 +151,7 @@ class SelectMenuPolyfill { } get #button() { - let button = this.#selectmenu.querySelector(':scope > [behavior=button]'); + let button = this.#selectmenu.querySelector('[behavior=button]'); if (!button) { button = this.#selectmenu.shadowRoot.querySelector('[behavior=button]'); } @@ -141,7 +159,7 @@ class SelectMenuPolyfill { } get #listbox() { - let listbox = this.#selectmenu.querySelector(':scope > [behavior=listbox]'); + let listbox = this.#selectmenu.querySelector('[behavior=listbox]'); if (!listbox) { listbox = this.#selectmenu.shadowRoot.querySelector('[behavior=listbox]'); }