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

看起来Chrome不推荐使用

/deep/

和

>

和

：：shadow

：

有人知道是否有其他方法可以访问阴影DOM吗

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

---

我尝试了

el.shadowRoot

，但它返回null，并且它的值非常稀疏。

您只能通过调用

attachShadow（{mode:'open'}）

访问创建的元素的阴影DOM。如果是这种情况，那么调用

shadowRoot

应该可以工作

无法从浏览器添加的用户代理控件（

，

）访问卷影DOM

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

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

myInput.oninput=function（）{
if（myInput.getAttribute（“占位符”）&&&！myInput.value.length）
myInput.classList.add（“空”）
其他的
myInput.classList.remove（“空”）
}

正文{
填充：100px；
}
输入{
边框：2倍实心；
填充：10px；
大纲：无；
}
输入：有效{
边框颜色：春绿色；
}
输入：无效{
边框颜色：番茄；
}
输入[placeholder]。为空{
边框颜色：暗绿色
}

如果使用shady DOM（默认）而不是shadow DOM，则需要使用Polymer API访问DOM

Polymer.dom(el.root)

---

好吧，还没有决定是否从JS中删除

>

和

：：shadow

。因此，

querySelector（'x>>>y'）

的支持时间可能更长。对于CSS，它是确定的，它将被删除

我希望您不要试图以跨浏览器的方式进行此操作。。如果是这样的话，我相信你运气不好。您最好检查：selected状态，此时您知道占位符将不会显示，因为已进行选择。如果必须设置select元素或任何其他shadow DOM元素的样式，则应隐藏真正的select，但使用假select来操纵隐藏下拉列表的选择。这有助于提高可访问性。select2是一种使用广泛、编码良好的方法。1）我不是在a上操作，而是在输入[type=“text”]上操作。2） ：selected不是伪选择器，它是：focus，我正在使用它，但当您最初加载页面时，该字段无效。谢谢你的解决办法。这就是我最终要做的。