title: How to programmatically update an input inside shadow dom?
body: <p><strong>Fiddle:</strong> <a href="https://jsfiddle.net/5zrwdjy7/2/" rel="nofollow noreferrer">https://jsfiddle.net/5zrwdjy7/2/</a></p>
  
  <p>I'm trying to automate keystrokes using a script inside Cypress, but the target website uses web components as inputs. The input elements are nested inside <strong>shadow dom</strong> therefor.</p>
  
  <p>I am trying to trigger the input event as per a regular input as follows:</p>
  
  <pre><code>const input = document.querySelector('input')
  input.value = 'new value'
  input.dispatchEvent(new Event('input'))
  </code></pre>
  
  <p>Nothing happens, the value remains unchanged and there is no text displayed in the input. Is it possible to programmatically update input inside shadow dom?</p>