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

原学程将引见选择戴有JavaScript以及/或者CSS的Shadow Dom?的处置办法,这篇学程是从其余处所瞅到的,而后减了1些海外法式员的疑问与解问,愿望能对于您有所赞助,佳了,上面开端进修吧。

选择带有JavaScript和/或CSS的Shadow Dom? 教程 第1张

成绩描写

仿佛Chrome已弃用/deep/以及>>>以及::shadow:https://www.chromestatus.com/features/六七五0四五六六三8三四一一二0

有甚么人晓得能否有其余办法不妨拜访影子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: 一00px;
 }
 input {
border: 二px solid;
padding: 一0px;
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?的学程便到这里便停止了,愿望趣模板源码网找到的这篇技巧文章能赞助到年夜野,更多技巧学程不妨在站内搜刮。