title: Form input field not clearing. Where is this "inner-editor" Shadow DOM coming from?
body: <p>Here is the simple form I'll be working from in this question...</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;form method="get"&gt;
   &lt;input type="text" value="test"&gt;
  &lt;/form&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>It works fine here or on jsfiddle. Notice how if you click "Run code snippet" and click in the field then the text remains in the field along with the cursor?
  <a href="https://i.stack.imgur.com/KVF2W.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/KVF2W.png" alt="enter image description here"></a></p>
  
  <p>However, on my custom WordPress website, the field's value is behaving like a <em>placeholder</em> value. Hopefully these images will demonstrate what I mean by that.</p>
  
  <p>When I click in the field the existing text disappears...
  <a href="https://i.stack.imgur.com/p5ote.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/p5ote.png" alt="enter image description here"></a></p>
  
  <p>... and when I click away from the field it reappears...
  <a href="https://i.stack.imgur.com/pjFrr.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/pjFrr.png" alt="enter image description here"></a></p>
  
  <p>You can see from the form HTML above that the field has a value assigned and does <em>not</em> have a placeholder. My first thought was there must be some placeholder value being assigned dynamically at runtime via javascript. However, Safari's web inspector shows this...
  <a href="https://i.stack.imgur.com/UaI0s.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/UaI0s.png" alt="enter image description here"></a></p>
  
  <p>It appears that it's not a placeholder but some Shadow DOM code being added, and that new code is making it function like a placeholder. To view the Shadow DOM code I enabled Shadow DOM in Chrome's web inspector. This is what I found.</p>
  
  <p>When the field isn't highlighted the Shadow DOM shows this...
  <a href="https://i.stack.imgur.com/06rtk.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/06rtk.png" alt="enter image description here"></a></p>
  
  <p>When I click in the field to highlight it the Shadow DOM shows this...
  <a href="https://i.stack.imgur.com/FSkIL.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/FSkIL.png" alt="enter image description here"></a></p>
  
  <p>It appears that something is creating a shadow root and adding this div to it...</p>
  
  <pre class="lang-html prettyprint-override"><code>&lt;div id="inner-editor"&gt;&lt;/div&gt;
  </code></pre>
  
  <p>Then it's setting the innerHTML of that div to "" or "test" based on the highlight state.</p>
  
  <p>I don't work with the Shadow DOM much and I'm not sure how to determine where this code is coming from. I've searched my entire code base through the web inspector and done several different recursive grep (e.g. grep -r "inner-editor" *) from the root of my project to try to find any code in the css, javascript or php that might be adding this Shadow DOM code at runtime. There are no instances of "createShadowRoot" or "inner-editor" or "parent-focus" or "parent-active" or "text-active" anywhere in my project. I'm not sure if these might be coming from the browser code itself or through some obfuscated code from one of the js libraries I'm using like jQuery, or a dynamic browser rewrite of some library code.</p>
  
  <p>How can I get this text field to behave normally on my site rather than like an empty text field with a placeholder value?</p>
  
  <p>Thank you for taking the time.</p>