将CSS应用于动态命名的聚合物元素

Question

我们一直在讨论如何在NPM上获取Polymer组件,并且上下文的一部分是如果最终结果与传递组件依赖性一起工作将会很好.这是讨论链接以及Rob Dodson/Domenic Denicola Publish子项目在npm上建议的一种可能的解决方案,将它们添加到package.json

这建议将元素的注册保留给开发人员,以便开发人员可以避免元素注册冲突.我们可以编写一个像Element注册包装器一样的聚合物:

• 使用新元素名称重新编译传递依赖性模块
• 在浏览器中使用新元素名称注册元素
• 亲吻Bower再见,永远幸福地生活

接下来的问题是CSS会如何影响这个？以下是Shadow DOM v1的一个示例:使用自定义元素fancy-tabs选择器的自包含Web组件 :

主页

<style>
  fancy-tabs {
    margin-bottom: 32px;
    --fancy-tabs-bg: black;
  }
</style>
<fancy-tabs background>...</fancy-tabs>

CSS Shadow Dom实施:

:host([background]) {
  background: var(--fancy-tabs-bg, #9E9E9E);
  border-radius: 10px;
  padding: 10px;
}

因此,如果自定义元素在主页面中用作变量容器来设置具有传递依赖关系的组件,那么我们会因组件重命名而遇到问题.有没有解决的办法？例如,说使用.fancy-tabs选择器.

任何人都可以想到CSS之外可能因尝试这种方法而出现的任何其他问题吗？

TIA,Ole