0

I have the following html:

 <div class='contact section-two'>
      <input class='info' type='email' name='email' placeholder='email' 
      value="">
      <span class='alerts hidden'>Please enter your email</span>
 </div>

but when I check developer tools I'm getting:

<div class='contact section-two'>
      <input class='info' type='email' name='email' placeholder='email' value="">
          #shadow-root (user-agent)
             <div pseudo="-internal-input-suggested" id="placeholder" 
             style='display:block!important; user-select:none!important;"> 
             abc@gmail.com</div>
             <div></div>
       </input>
      <span class='alerts hidden'>Please enter your email</span>
 </div>



 How do I prevent the shadow-root element?  Also, why the heck is this 
 shadow element being added in the first place?

when I run the html on localhost it works fine. When I run it live on bluehost I get the shadowhost problem

DCR
  • 14,737
  • 12
  • 52
  • 115
  • Does this answer your question? [What is shadow root](https://stackoverflow.com/questions/34119639/what-is-shadow-root) – MarioZ Jun 30 '21 at 19:46
  • no, not even close – DCR Jun 30 '21 at 19:50
  • Have you tried with different browsers? My first guess would be that the browser itself is injecting a custom component on every email input field at runtime. Perhaps because of a plugin. Does it do so only with your app? – Crono Jun 30 '21 at 20:00
  • no on other pages it's not doing that. It seems to only be a problem with chrome – DCR Jun 30 '21 at 20:02
  • no on other pages it's not doing that. It works correctly on firefox but not with ms edge or chrome – DCR Jun 30 '21 at 20:09
  • @DCR are you able to try with Chrome / MS Edge on a different computer? – Crono Jul 01 '21 at 19:21
  • it's not the computer. It seems to be autofill of passwords and emails from the browsers saved list of passwords being applied to a shadow-root element – DCR Jul 01 '21 at 20:42

0 Answers0