Select阴影DOM与JavaScriptand/orCSS？

Question

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

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

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

我试过 el.shadowRoot 但它 returns 为 null 并且它的 docs 非常稀疏。

Answer 1

您只能访问通过调用 attachShadow( { mode: 'open' } ) 创建的元素的影子 DOM。如果是这样，那么调用 shadowRoot 应该可以。

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

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

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

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 伪 class :placeholder-shown 可用于在显示占位符时设置元素样式。

Answer 2

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

Polymer.dom(el.root)

据我所知，还没有决定 >>> 和 ::shadow 是否会从 JS 中删除。因此 querySelector('x >>> y') 可能会得到更长时间的支持。对于 CSS，它肯定会被删除。

Select阴影DOM与JavaScriptand/orCSS？

Select Shadow DOM with JavaScript and/or CSS?

javascript

css

shadow-dom

polymer