Question

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

我正在努力包装visjs时间轴，但是在我的聚合物包装元素中创建的样式为时间轴设计不起作用，因为它们是作用域的。我必须修改全局样式。

有没有办法做局部造型？

Answer 1

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

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

Answer 2

由于CSS的特殊性，我通常使用一种可能的技巧。当你需要在某个元素上设置样式并且不想在任何地方放置时，它非常方便。在你的情况下它也可以帮助。以下是我发现时间轴看起来像http://visjs.org/examples/timeline/styling/customCss.html基本上所有样式都在这个例子中。所以我们在这里有一个id

的div

<div id="visualization"></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组件的样式 - 这是一种覆盖任何内置样式的超级简单方法 - 只需将更重要的内容添加到选择器中，您就可以了。

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

2 个答案: