具有 Web 组件的应用程序的全局 CSS

【问题标题】：Global CSS for an app with web components具有 Web 组件的应用程序的全局 CSS
【发布时间】：2016-11-26 03:46:13
【问题描述】：

我正在开发一个使用 HTML 5 本机 Web 组件的 Web 应用程序。我的问题是我有很多通用的 CSS 用于所有这些，我使用 font awesome 来制作漂亮的图标。现在，我将所有样式都放在“/deep”阴影穿孔中，但 Chrome 显示：“/deep/ 组合器已弃用。”您对如何在整个应用程序上使用全局 CSS 和 CSS 库（如 font awesome）有什么建议吗？

谢谢:)

【问题讨论】：

标签： css html web-component shadow-dom custom-element

【解决方案1】：

您可以使用 <link rel="stylesheet"> 元素全局包含 CSS 字体文件。

您必须使用@import url CSS 规则，在每个自定义元素的<template>、<style> 元素中本地导入它。

this answer 中有一个运行示例。

【讨论】：

感谢您的回复，我认为这确实是更清洁的解决方案。我不想这样做，因为我需要将它包含在我的所有组件中。