css - 如何让用户使用自己的 CSS 来设计 Web 组件的样式？

Question

我知道我们可以使用 CSS 来设置 Web 组件元素的样式。但是我怎样才能让用户为我的网络组件设计样式呢？

例如，假设我正在制作一个视频播放器，但我希望使用我的组件的人能够将播放按钮或进度条设置为他们品牌的颜色。 <强> shadow boundary 似乎永远阻止了它。但是，如果我想要它怎么办？

如果用户不必为此类样式任务使用属性，那就太好了。标准 CSS 会很棒，但我不确定到 2015 年 1 月下旬是否可行？

Answer 1

在 native 不支持 ShadowDOM 的浏览器中，可以填充所请求的功能。这将通过在样式声明中使用 shim-shadowdom 指令来实现:

  <style shim-shadowdom>
    #mine::shadow .classname { width: 100px; background: red; }
    #mine /deep/ .classname { width: 200px; background: blue; }
  </style>

第一个在影子主机下传播一级，后者应用于嵌套的所有内容。

此实时预览探讨了所有可能性:http://plnkr.co/edit/rdSukYbEnPHQAphiwIG9?p=preview

请注意，FF 当前将样式应用于嵌套的阴影元素，因此应重新检查所有内容两次。也就是说，FF 将第三个嵌套选项卡填充为黄色，这通常是错误的。

进一步阅读:http://robdodson.me/shadow-dom-css-cheat-sheet/