如何让用户使用自己的 CSS 样式化 Web 组件？

Question

我知道我们可以使用 CSS 来设置 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/

如何让用户使用自己的 CSS 样式化 Web 组件？

How to let the users style a web component with their own CSS?

css

web-component