以下html在文字左侧显示了一个漂亮的相机图标。在尝试对聚合物组件进行样式设置时，这是如何实现的？
<!doctype html>
<html>
<head>
<link rel="stylesheet" id="font-awesome-4-css" href="http://astronautweb.co/wp-content/themes/astro2012/css/font-awesome-4.0.3.css?ver=4.0.3" type="text/css" media="all">
</head>
<body>
<p><i class="fa fa-camera-retro fa-lg"></i> Cool camera</p>
</body>
具体来说，应该在哪里包含链接，应将authorstyles设置为什么，模板中的样式应设置为什么。
最佳答案
编辑
不推荐使用applyAuthorStyles或已将其删除。
我还没有尝试过它，但是如果将超棒的字体添加到组件中，它应该可以工作。这很麻烦，因为需要将样式添加到使用FA的每个组件中。
Pixelate将SASS与以下变量一起使用:https://github.com/donny-dont/Pixelate-Flat/blob/master/lib/stylesheets/fonts/_variables.scss
我尚未使用SASS，因此无法提供更多详细信息。
另一种解决方案是在每个选择器的前面添加* /deep/。
您可以使用以下代码来构建执行此操作的脚本:
import 'package:csslib/parser.dart';
import 'package:csslib/visitor.dart';
String transform(String src){
var printer = new ShadowDOMTransformPrinter();
printer.visitTree(parse(src), pretty: true);
return printer.toString();
}
class ShadowDOMTransformPrinter extends CssPrinter {
void visitSelector(Selector selector){
emit(' * /deep/ ');
super.visitSelector(selector);
}
}
此修改后的CSS在shadowDOM之外不起作用，因此需要修改和未修改的样式(每个选择器一次使用
/deep/，一次使用bool get applyAuthorStyles => true;另请参见this discussion和this one
-------
如果您在页面上有样式表引用，则需要
<template>在您的自定义元素中。如上所述，在custom元素中引用样式表存在一个错误。
该错误已修复，但尚未发布包含该修复程序的Dart版本。
同时，您可以在自定义元素
applyAuthorStyles内的样式标签中复制样式表的内容。在这种情况下，您不需要ojit_code。