选择带有JavaScript和/或CSS的Shadow Dom? [英] Select Shadow DOM with JavaScript and/or CSS?
本文介绍了选择带有JavaScript和/或CSS的Shadow Dom?的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
似乎Chrome已弃用/deep/
和>>>
和::shadow
:https://www.chromestatus.com/features/6750456638341120
有没有人知道是否有其他方法可以访问影子DOM?
我的用例是尝试确定输入的样式。具体地说,我正在尝试检测是否显示占位符。
我已尝试el.shadowRoot
,但它返回空值,并且它的docs非常稀疏。
推荐答案
您只能访问通过调用attachShadow( { mode: 'open' } )
创建的元素的影子DOM。如果是这样,那么调用shadowRoot
应该可以。
您无法从浏览器添加的用户代理控件(<input>
、<select>
)访问Shadow DOM。
要检查是否显示占位符,我要验证它是否存在以及输入值是否为空:
if ( myInput.getAttribute( "placeholder" ) && !myInput.value.length )
//the placeholder is being displayed
数据-lang="js"数据-隐藏="真"数据-控制台="假"数据-巴贝尔="假">
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
,该伪类可用于在显示占位符时设置元素的样式。
这篇关于选择带有JavaScript和/或CSS的Shadow Dom?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文