應該如何將CSS復位應用於聚合物組件？

例如這裏是superfly-css Foundation一個復位：應該如何將CSS復位應用於聚合物組件？

/** 
    * [SB] Suppress the focus outline on elements that cannot be accessed via keyboard. 
    * This prevents an unwanted focus outline from appearing around elements that 
    * might still respond to pointer events. 
    */ 

    [tabindex="-1"]:focus { 
     outline: none !important; 
    }

我想這個復位適用於所有元素，無論他們是否在「影子DOM」或「光DOM」。有沒有辦法確保這種情況 - 尤其是使用第三方組件時？

TIA，奧萊

來源

2016-08-05 Ole

您不能修改陰影第三方Web組件的CSS樣式，爲它的影子DOM的主要特徵之一：

CSS被陰影邊界關閉。唯一的標準shadow-piercing combinator不適用於CSS規則。

聚合物不提供應用此類全球重置的常用解決方案。 Custom Properties只有在第三方提供商在其Web組件中實施它們時才能應用，而在大多數情況下並非如此。

CSS重置將自動傳播到Light DOM，並且您必須逐個將它們插入到具有Shadow DOM的組件上。

來源

2016-08-05 23:30:26 Supersharp

@Supersharp注意上下文是聚合物--css重置用於確保html元素在不同瀏覽器上呈現一致的呈現，因此我們需要它來確保Web組件在不同瀏覽器間呈現一致。 – Ole

@Supersharp - 最後它只是html，css和javascript。有一種方法。它可能是醜陋的，討厭的，駭人聽聞的，但有一種方法。我提交了一個問題聚合物來請求進一步的澄清：https://github.com/Polymer/polymer/issues/3842 – Ole

@ Ole hackish的方式是直接在源代碼中更改代碼，或者訪問Shadow的DOM通過Javascript插入組件並修改裏面的樣式。 – Supersharp

應該如何將CSS復位應用於聚合物組件？

回答

相關問題