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

Question

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

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

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

Answer 1

能够在原生不支持 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/