Select Shadow DOM with JavaScript and/or CSS?

Question

It seems like Chrome deprecated /deep/ and >>> and ::shadow: https://www.chromestatus.com/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.

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
– 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
– 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
– corysimmons, Commented Mar 5, 2016 at 4:18

Supersharp · Accepted Answer · 2016-12-03 21:51:22Z

4

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.

edited Dec 3, 2016 at 21:51

answered Mar 5, 2016 at 17:03

Supersharp

31.5k11 gold badges105 silver badges149 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

corysimmons Over a year ago

Thanks for the workaround. That's what I ended up doing after all.

Günter Zöchbauer · Accepted Answer · 2016-03-23 05:05:29Z

1

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.

edited Mar 23, 2016 at 5:05

answered Mar 5, 2016 at 17:09

Günter Zöchbauer

661k235 gold badges2.1k silver badges1.6k bronze badges

Collectives™ on Stack Overflow

Select Shadow DOM with JavaScript and/or CSS?

2 Answers 2

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related