Question

Chrome似乎已弃用/deep/和>>>以及::shadow：https://www.chromestatus.com/features/6750456638341120

有没有人知道是否有其他方法可以访问Shadow DOM？

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

我已经尝试了el.shadowRoot，但它返回null，docs非常稀疏。

Answer 1

您只能访问通过调用attachShadow( { mode: 'open' } )创建的元素的Shadow DOM。如果是这种情况，那么调用shadowRoot应该有效。

您无法从浏览器添加的用户代理控件（<input>，<select>）访问Shadow DOM。

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

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

＆＃13;

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

＆＃13;

 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
 }

＆＃13;

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

＆＃13;

<强>更新

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

Answer 2

如果你使用shady DOM（默认）而不是shadow DOM，那么你需要使用Polymer API来访问DOM。

Polymer.dom(el.root)

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

用JavaScript和/或CSS选择Shadow DOM？

2 个答案: