聚合物 - 造型第三方（非聚合物）部件

Question

如何创建第三方（非聚合物）代码的范围造型？

我正在打包visjs时间线，但在我的聚合物包装元素中创建样式时间轴的样式不起作用，因为它们的范围有限。我必须修改全局样式。

有没有办法做本地造型？

Answer 1

在你的CSS中使用::content前缀，那么你应该能够逃避范围，并做一个正常的CSS。

任何方式，如果这不起作用。你能提供代码吗？

Answer 2

我通常使用一种可能因为CSS特性而可能出现的技巧。当你需要在某些元素上设置样式并且不希望在任何地方重要时，它非常方便。在你的情况下，它也可以帮助。这里是我发现时间线看起来像http://visjs.org/examples/timeline/styling/customCss.html基本上所有的造型都是在这个例子中。因此，我们有一些带有ID

<div id="visualization"></div> 

这里的div和它内部产生的所有时间表，它可以与常规的CSS定义样式像

.vis-timeline { 
/* some properties goes here */ 
} 

.vis-item { 
/* some properties goes here */ 
} 
... 

但它也可以面包车用少量设置样式更具体一点选择是这样的：

#visualization .vis-timeline { 
/* some properties goes here */ 
} 

#visualization .vis-item { 
/* some properties goes here */ 
color: red; 
} 
... 
#second_visualization .vis-item { 
color: green; 
/* some properties goes here */ 
} 

然后只要你喜欢通过更改ID和添加另一个选择可以让尽可能多的不同风格的一页。事实上，通过使用这种特殊性，您可以设计出许多Web组件 - 这是一种超越任何内置风格的超级简单方法 - 只需在选择器中添加更重要的内容即可。