选择具有JavaScript和/或CSS的Shadow DOM？

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.

Answer 1

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.

Answer 2

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.