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

时间:2016-08-22 18:49:27

标签: javascript css polymer polymer-1.0

我们一直在讨论如何在NPM上获取Polymer组件,并且上下文的一部分是如果最终结果与传递组件依赖性一起工作将会很好。这里是讨论链接以及Rob Dodson / Domenic Denicola提出的一种可能的解决方案Publish sub-projects on npm, add them to package.json

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

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

接下来的问题是CSS会如何影响这个?以下是Shadow DOM v1: self-contained web components 中使用自定义元素fancy-tabs选择器的示例:

主页

<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, 奥莱

0 个答案:

没有答案