Selenium Automation motif-select shadow dom with select all and given options

In this post I want to share one of the problem faced with selenium and motif-select with shadow DOM. I tried many options but couldn't get the required, as per the requirement here are the two methods I wrote

public void SelectMultipleOptions(IWebDriver driver, WebDriverWait wait, string sectionLabel, string commaSeparatedValues)
{
IJavaScriptExecutor js = (IJavaScriptExecutor)driver; var values = commaSeparatedValues .Split(',') .Select(v => v.Trim()) .Where(v => !string.IsNullOrEmpty(v)) .ToList(); // Open dropdown dynamically var dropdown = driver.FindElement(By.XPath($"//span[contains(text(),'{sectionLabel}')]/following::motif-select[1]")); dropdown.Click(); foreach (var val in values) { wait.Until(d => { return (bool)js.ExecuteScript(@" const section = arguments[0]; const select = [...document.querySelectorAll('motif-select')] .find(el => el.closest('.pushdown-filter')?.innerText.includes(section)); return select && select.querySelectorAll('motif-select-option').length > 0; ", sectionLabel); }); var element = js.ExecuteScript(@" const label = arguments[0]; const section = arguments[1]; const select = [...document.querySelectorAll('motif-select')] .find(el => el.closest('.pushdown-filter')?.innerText.includes(section)); if (!select) return null; const options = [...select.querySelectorAll('motif-select-option')]; return options.find(o => o.textContent.trim() === label ); ", val, sectionLabel); if (element != null) { js.ExecuteScript(@" const opt = arguments[0]; const cb = opt.shadowRoot?.querySelector('motif-checkbox'); if (cb) cb.click(); else opt.click(); ", element); } else { Console.WriteLine($"[WARN] Option not found: {val}"); } } // Close dropdown try { dropdown.SendKeys(Keys.Escape); } catch { js.ExecuteScript("document.body.click();"); } }