It seems like Chrome deprecated /deep/ and >>> and ::shadow:

Does anyone know if there is another way to access the Shadow DOM?

My use case is trying to figure out the style of an input. Specifically I'm trying to detect if a placeholder is being displayed or not.

I've tried el.shadowRoot but it returns null and the docs for it are pretty sparse.

It seems like Chrome deprecated /deep/ and >>> and ::shadow: https://www.chromestatus./features/6750456638341120

Does anyone know if there is another way to access the Shadow DOM?

My use case is trying to figure out the style of an input. Specifically I'm trying to detect if a placeholder is being displayed or not.

I've tried el.shadowRoot but it returns null and the docs for it are pretty sparse.

• javascript
• css
• polymer
• shadow-dom

• I hope you aren't trying to do this in a cross browser sort of way.. if so I believe you are out of luck. Your best bet would be to check for a :selected state, at this time you know the placeholder will not be showing because a selection has been made. All other times it should be. – AlphaG33k Commented Mar 5, 2016 at 3:51
• If you must style the select element or any other shadow DOM element you should hide the real select but use a fake select to manipulate the hidden dropdown's selection. This helps with accessibility. select2.github.io select2 is a widely used one that is coded well. – AlphaG33k Commented Mar 5, 2016 at 3:53
• 1) I'm not operating on a <select>, I'm operating on an input[type="text"]. 2) :selected isn't a pseudo selector, it's :focus, and I'm using that but when you originally load the page the field is invalid. codepen.io/corysimmons/pen/XdmqeY?editors=1100 – corysimmons Commented Mar 5, 2016 at 4:18

2 Answers 2

You can only access Shadow DOM of the elements created via a call to attachShadow( { mode: 'open' } ). If it is the case then calling shadowRoot should work.

You cannot access Shadow DOM from user agent controls (<input>, <select>), added by the browser.

To check if a placeholder is displayed or not, I would verify if it exists and if the input value is empty or not:

if ( myInput.getAttribute( "placeholder" ) && !myInput.value.length )
    //the placeholder is being displayed

myInput.oninput = function() {
  if (myInput.getAttribute("placeholder") && !myInput.value.length)
    myInput.classList.add("empty")
  else
    myInput.classList.remove("empty")
}

 body {
   padding: 100px;
 }
 input {
   border: 2px solid;
   padding: 10px;
   outline: none;
 }
 input:valid {
   border-color: springgreen;
 }
 input:invalid {
   border-color: tomato;
 }
 input[placeholder].empty {
   border-color: darkturquoise
 }

<input type="text" required placeholder="the placeholder" id="myInput" class="empty">

Update

Chrome and Safari support the CSS pseudo-class :placeholder-shown that can be used to style your element when the placeholder is displayed.

If you use shady DOM (default) instead of shadow DOM, then you need to use Polymer API to access the DOM.

Polymer.dom(el.root)

AFAIK it's not decided yet if >>> and ::shadow will be removed from JS. Therefore querySelector('x >>> y') might be supported longer. For CSS it's definitive that it will be removed.