应该如何将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复位应用于聚合物组件？

回答

相关问题