Question

是否可以使用在索引页面上链接但不在元素本身中的外部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文件中设置所有这些元素，就像在示例中一样。

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 docs，这个方法执行效率不高，这意味着如果大量使用它可能会减慢页面的渲染速度。

有关::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的自定义元素的样式

1 个答案: