是否可以使用外部 css 文件为 Polymer 的自定义元素设置样式

Question

是否可以使用在索引页上 link 编辑但不在元素本身中的外部 css 文件来设置自定义元素的样式。我还没有找到任何关于使用元素本身之外的 css 文件的文档。

我有这样的例子。

<head>

/* Use of only 1 css for all elements */
<link href="css/custom.less" rel="stylesheet/less" type="text/css">


</head>
<body>

<my-element></my-element>

<my-other></my-other>
<my-other2></my-other>

</body>

问题是样式已在 Firefox 中完成，但未在 Chrome 中完成。所以我知道 css.

不是问题

Css 看起来像这样。

my-element {
    header {
        background-color: @article-color;
        text-align: center;
        margin-bottom: 25px;

        h1 {
            color: #ffffff;
        }
    }
}

/* Styling of other elements */

我知道我可以在聚合物元素本身中使用 css，但我不想这样做。我有多个元素，我想在一个 css 文件中设置所有元素的样式，我在索引文件中 link 就像示例中那样。

Answer 1

可以使用 ::shadow 或 /deep/ 伪元素为索引文件中的自定义元素设置样式。

示例：

<head>
<style>
// This is thinking there is a 'p' in 'my-element'
my-element::shadow p{
 color: red
}
</style>
</head>
<body>

<my-element></my-element>

</body>

但是请在使用之前了解这一点，根据 Polymer 文档，此方法的执行效率不是很高，这意味着如果使用过多，它可能会减慢页面的呈现速度。

有关 ::shadow 和自定义元素样式的更多信息，请访问：
https://www.polymer-project.org/0.5/articles/styling-elements.html
https://www.polymer-project.org/0.5/docs/polymer/styling.html

是否可以使用外部 css 文件为 Polymer 的自定义元素设置样式

Is it possible to style an custom element of Polymer with an external css file

css

polymer