具有Web组件的应用程序的全局CSS [英] Global CSS for an app with web components

问题描述

我正在开发一个使用HTML 5本机Web组件的Web应用程序.我的问题是，所有这些都有很多通用的CSS，并且我使用超赞的字体来显示漂亮的图标.现在，我将所有样式放入"/deep"阴影穿孔中，但Chrome表示:"/deep/combinator已弃用."您是否对如何在整个应用程序中使用全局CSS和CSS库(例如超棒的字体)有任何建议?

I'm developing a web application that uses HTML 5 native web components. My problem is that I have a lot of common CSS for all of these and I use font awesome to have nice icons. Right now I put all my styles inside "/deep" shadow piercing but Chrome says : "/deep/ combinator is deprecated." Do you have any suggestions on how can I have global CSS and CSS libraries (like font awesome) available on the whole app ?

谢谢:)

推荐答案

您可以使用< link rel ="stylesheet"> 元素在全球范围内包含CSS字体文件.

You could include the CSS font file globally, with the <link rel="stylesheet"> element.

您必须使用 @import将其本地导入每个自定义元素的< template> 中的< style> 元素中url CSS规则.

That you'll have to import it locally in every Custom Element's <template>, in a <style> element, using the @import url CSS rule.

此答案中有一个正在运行的示例.

There's a running example in this answer.

这篇关于具有Web组件的应用程序的全局CSS的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！