使用JavaScript和/或CSS选择阴影DOM?

您只能访问通过调用创建的元素的Shadow DOM attachShadow( { mode: 'open' } ) 。如果是这种情况,请致电 shadowRoot 应该起作用。

无法从用户代理控件访问Shadow DOM( <input> , <select> ),由浏览器添加。

要检查占位符是否显示,我会验证它是否存在,以及输入值是否为空:

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">

使现代化

Chrome和Safari支持CSS伪类 :placeholder-shown 可以用于在显示占位符时设置元素的样式。

如果使用阴影DOM(默认)而不是阴影DOM,则需要使用Polymer API来访问DOM。

Polymer.dom(el.root)

AFAIK尚未决定是否 >>> 和 ::shadow 将从JS中删除。因此 querySelector('x >>> y') 可能支持更长时间。对于CSS,它肯定会被删除。