title: I want to change the HTML text displayed by: #shadow root (user-agent)
body: <p>Thanks for your help. After looking everywhere on the web I didn't find help to change (not to create) an html text in a #shadow-root: delete the comma (for french format). (Big numbers: Thousand separator for US numbers format)</p>
  
  <p>Here is the html source code:</p>
  
  <pre><code>&lt;div id="numbers"&gt;
      &lt;input type="text"  id="sleeping"&gt;&lt;/input&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Here is the code in the browser DevTools (F12) in Chrome!</p>
  
  <pre><code>&lt;div id="numbers"&gt;
      &lt;span class="e-widget e-pinch e-numeric e-valid"&gt;
          &lt;span class="e-in-wrap e-box e-padding"&gt;
              &lt;input type="text" data-role="none" tabindex="0" accesskey="" value="8000" class="e-input" style="display: block;"&gt;
                  #shadow-root (user-agent)
                  &lt;div&gt;8,000&lt;/div&gt;
              &lt;/input&gt;
              &lt;input type="text" id="sleeping" class="e-numerictextbox e-js e-input" tabindex="" accesskey="" name="sleeping" role="spinbutton" aria-valuemin="0" aria-valuemax="10000" aria-valuenow="8000" aria-live="assertive" value="8000" style="display: none;"&gt;
                  #shadow-root (user-agent) == $0
                  &lt;div&gt;8000&lt;/div&gt;
              &lt;/input&gt;
              &lt;span class="e-select"&gt;
                  &lt;span class="e-spin e-spin-up " role="button" "aria-label"="Increase Value" unselectable="on"&gt;
                      &lt;span class="e-icon e-arrow e-arrow-sans-up" role="presentation" unselectable="on"&gt;
                          ::before
                      &lt;/span&gt;
                  &lt;/span&gt;
                  &lt;span class="e-spin e-spin-down" role="button" "aria-label"="Decrease Value" unselectable="on"&gt;
                      &lt;span class="e-icon e-arrow e-arrow-sans-down" role="presentation" unselectable="on"&gt;
                          ::before
                      &lt;/span&gt;
                  &lt;/span&gt;
              &lt;/span&gt;
          &lt;/span&gt;
      &lt;/span&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>So I want to delete the comma: 8,000 to 8000 with a Javascript code. But I do not know how to access the div <code>&lt;div&gt;8,000&lt;/div&gt;</code> under #shadow-root
  Thanks for the help!</p>