試圖從外部設計陰影DOM

我試圖在沒有成功的陰影dom中設置樣式。唯一的事情是我想從影子DOM之外做到這一點。另一件重要的事情是，Shadow dom造型應該只適用於'bar'元素中的影子dom。這裏是我的測試代碼：試圖從外部設計陰影DOM

<!doctype html> 

<html> 
    <head> 
    <style> 
     :host(bar) span:first-child { 
     text-transform: uppercase; 
     color: green; 
     } 
    </style> 
    </head> 

    <body> 
    <bar></bar> 

    <script> 
     var bar = document.querySelector('bar'); 
     var root = bar.createShadowRoot(); 
     root.innerHTML = '<span>bar</span><span>foo</span>'; 
    </script> 
    </body> 
</html>

和獎金的問題，究竟是什麼

:host(bar:host) { ... }

嗎？

來源

2013-12-20 Jeanluca Scaljeri

影子DOM規範目前仍在開發中，其大部分功能從一個時刻到另一個時刻都在發生根本性變化。

款式從它依賴於外部的陰影DOM元素，如果你的瀏覽器依賴於（過時）peusdo元素曝光或新的CSS陰影DOM選擇^^（貓）和^（帽子）如果瀏覽器支持新的語法，你可以簡單地使用帽子（^）選擇器輸入一個元素陰影dom，或者如果你想跨越所有陰影邊界，你可以使用cat（^^）選擇器來實現。

如果瀏覽器還不支持它，你需要通過向它的僞屬性添加僞屬性<shadow-element peusdo="myname" />，然後在你的CSS中引用這個僞元素，將你想要的樣式暴露爲其父類的僞元素shadow-host::myname

至於你的「紅利」的問題，你引用的影子主機元素，但只有當影子主機是<bar>元素，如果你忽略第二:host你引用一個影子主機是<bar>元素或有一個作爲它的祖先。

請注意，由於API處於持續發展狀態，上述信息在超過一個月左右的時間內可能無法保持可靠。

來源

2013-12-20 22:08:25 Entoarox

不錯，thnx。我只注意到** bar^span {...} **確實有效，但是** bar^span：first-child {...} **不會（Chrome v34）。這可能與所有這些「實驗」有關 –

@JeanlucaScaljeri現在陰影dom中的CSS順序現在很陰暗，所以如果你想要定位第一個跨度，你可能希望嘗試'span：first-of-type'相反，將你的影子DOM包裝在父元素中也可能解決很多問題。 – Entoarox

我嘗試了父節點建議，它確實修復了它，thnx。我也嘗試過使用[polyfill]（https://github.com/Polymer/ShadowDOM），但這似乎不起作用。他們不支持CSS中的**^**嗎？ –

試圖從外部設計陰影DOM

回答

相關問題