title: Accessing elements in the shadow DOM
body: <p>Is it possible to <em>find elements inside the Shadow DOM</em> with python-selenium?</p>
  
  <p><strong>Example use case:</strong></p>
  
  <p>I have this <code>input</code> with <code>type="date"</code>:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="false" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;input type="date"&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>And I'd like to click <em>the date picker button</em> on the right and choose a date from the calendar.</p>
  
  <p>If you would inspect the element in Chrome Developer Tools and expand the shadow-root node of the date input, you would see the button is appearing as:</p>
  
  <pre><code>&lt;div pseudo="-webkit-calendar-picker-indicator" id="picker"&gt;&lt;/div&gt;
  </code></pre>
  
  <p>Screenshot demonstrating how it looks in Chrome:</p>
  
  <p><img src="https://i.stack.imgur.com/6B8Hi.png" alt="enter image description here"></p>
  
  <p>Finding the "picker" button by id results into <code>NoSuchElementException</code>:</p>
  
  <pre><code>&gt;&gt;&gt; date_input = driver.find_element_by_name('bday')
  &gt;&gt;&gt; date_input.find_element_by_id('picker')
  ...
  selenium.common.exceptions.NoSuchElementException: Message: no such element
  </code></pre>
  
  <p>I've also tried to use <code>::shadow</code> and <code>/deep/</code> locators as suggested <a href="http://www.html5rocks.com/en/tutorials/webcomponents/shadowdom-201/" rel="nofollow noreferrer">here</a>:</p>
  
  <pre><code>&gt;&gt;&gt; driver.find_element_by_css_selector('input[name=bday]::shadow #picker')
  ...
  selenium.common.exceptions.NoSuchElementException: Message: no such element
  &gt;&gt;&gt;
  &gt;&gt;&gt; driver.find_element_by_css_selector('input[name=bday] /deep/ #picker')
  ...
  selenium.common.exceptions.NoSuchElementException: Message: no such element
  </code></pre>
  
  <hr>
  
  <p>Note that I can change the date in the input by sending keys to it:</p>
  
  <pre><code>driver.find_element_by_name('bday').send_keys('01/11/2014')
  </code></pre>
  
  <p>But, I want to set the date specifically by choosing it from a calendar.</p>