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

Chrome 似乎已被弃用/deep/ and >>> and ::shadow: https://www.chromestatus.com/features/6750456638341120 https://www.chromestatus.com/features/6750456638341120

有谁知道是否还有其他方法来访问 Shadow DOM？

我的用例是试图找出输入的样式。具体来说，我试图检测占位符是否正在显示。

我试过了el.shadowRoot但它返回 null 并且docs https://developer.mozilla.org/en-US/docs/Web/API/Element/shadowRoot因为它非常稀疏。

您只能访问通过调用创建的元素的 Shadow DOMattachShadow( { 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">

Update

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