愿所有的美好和期待都能如约而至

选择带有JavaScript和/或CSS的Shadow Dom?

发布时间:  来源:互联网  作者:匿名  标签:css error Select Shadow DOM with JavaScript and/or CSS? exception IT资讯 javascrip  热度:37.5℃

本文介绍了选择带有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?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,

勇敢去编程!

勇敢的热爱编程,未来的你一定会大放异彩,未来的生活一定会因编程更好!

TOP