title: retrieve data by CSS selector from a dropdown list behind a shadow-root with selenium
body: <p>So, given the code below:</p>
  <pre><code>driver = webdriver.Chrome(options=options, desired_capabilities=capabilities)
  
  def expand_shadow_element(element):
    shadow_root = driver.execute_script('return arguments[0].shadowRoot', element)
    return shadow_root
  
  # open url:
  driver.get('https://www.transfermarkt.us/')
  
  # switch to cookies frame
  wait(driver, 3).until(EC.frame_to_be_available_and_switch_to_it((By.ID, &quot;sp_message_iframe_575847&quot;)))
  
  # click &quot;Accept&quot; cookies button
  driver.find_element(By.XPATH, '//button[@title=&quot;ACCEPT ALL&quot;]').click()
  
  # go back to main frame
  driver.switch_to.default_content()
  
  # find shadow-room
  root1 = driver.find_element(By.TAG_NAME, 'tm-quick-select-bar')
  
  # expand shadow-root
  shadow_root1 = expand_shadow_element(root1)
  
  # click the selector dropdown to make the HTML code of the list appear
  shadow_root1.find_element(By.CSS_SELECTOR, 'div &gt; tm-quick-select:nth-child(2) &gt; div &gt; div.selector-title &gt; strong').click()
  </code></pre>
  <p>Pic below is the final result of my code above:</p>
  <p><a href="https://i.stack.imgur.com/bovat.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/bovat.png" alt="enter image description here" /></a></p>
  <p><strong>!! What I want now !!</strong></p>
  <p>Extracting all the countries <code>By.CSS_SELECTOR</code>(<em>because IIRC we can't use <code>XPATH</code> inside shadow-room?</em>) into a list.</p>
  <p>Doing this:</p>
  <pre><code>countries = shadow_root1.find_elements(By.CSS_SELECTOR, 'div &gt; tm-quick-select:nth-child(2) &gt; div &gt; div.selector-dropdown &gt; ul &gt; tm-quick-select-item &gt; li &gt; span')
  </code></pre>
  <p>For <code>i</code> in <code>countries</code> print <code>i.text</code> or <code>i.get_attribute('innerHTML')</code> doesn't work.</p>
  <p>Thank you! :)</p>