1

I was looking at Twitter's login page and noticed that in Chrome with autofill turned on the pseudoelement inside the shadowDOM attached to the input element changes depending on whether the suggestion is hovered on or not.

When it's the normal placeholder, the pseudoelement "-webkit-input-placeholder" is present, when my email address is hovered on (not clicked), the "-internal-input-suggested" pseudoelement is there instead.

I've attached screenshots on what I'm describing.

Screenshots:

-webkit-input-placeholder screenshot

-internal-input-suggested pseudoelement

Both of these elements are in the user agent shadowDOM. How can I check which of those pseudoelements is present using javascript?

Jack Bashford
  • 43,180
  • 11
  • 50
  • 79
ASG
  • 213
  • 4
  • 9
  • Not exactly a duplicate - asking specifically about the user agent shadow DOM. While an answer there does address that, it was over two years ago so wanted to see if things had potentially changed. I am able to add styles to the -webkit-input-placeholder pseudoelement so wanted to see if the internal-input-suggested pseudoelement is also somehow accessible – ASG Oct 28 '18 at 18:01
  • Actually the linked question is about user-agent too: the Sadow DOM in is a user-agent Shadow DOM. – Supersharp Oct 29 '18 at 10:57

1 Answers1

0

You'd do this:

var pseudo = document.getElementById("placeholder").getAttribute("pseudo")
if (pseudo == "web-input-placeholder") {
    //Do something
} else if (pseudo == "internal-input-suggested") {
    //Do something else
}
Jack Bashford
  • 43,180
  • 11
  • 50
  • 79
  • Unfortunately that gives me an error that it can't getAttribute of null - I think this might have something to do with not being able to find the element since it's in the shadowDOM – ASG Oct 28 '18 at 00:52
  • @ASG that would make sense – Jack Bashford Oct 28 '18 at 01:31