選擇具有JavaScript和/或CSS的Shadow DOM？

Question

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

有誰知道是否還有另一種訪問Shadow DOM的方法？

我的用例試圖弄清楚輸入的樣式。 具體來說，我正在嘗試檢測是否正在顯示占位符。

我試過el.shadowRoot但是它返回null，並且它的文檔相當稀疏。

Answer 1

您只能訪問通過調用attachShadow( { mode: 'open' } )創建的元素的Shadow 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偽類:placeholder-shown ，可在顯示占位符時對元素進行樣式設置。

Answer 2

如果使用陰影DOM（默認值）而不是陰影DOM，則需要使用Polymer API來訪問DOM。

Polymer.dom(el.root)

AFAIK尚未決定是否將>>>和::shadow從JS中刪除。 因此，可能會更長地支持querySelector('x >>> y') 。 對於CSS，將其刪除是絕對的。