gpt4 book ai didi

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

转载 作者:行者123 更新时间:2023-11-28 08:10:30 25 4
gpt4 key购买 nike

是否可以使用在索引页面上链接但不在元素本身中的外部 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 */

我知道我可以在 polymer 元素本身内使用 css,但我不想这样做。我有多个元素,我想在我链接到索引文件的一个 css 文件中设置所有元素的样式,就像示例中那样。

最佳答案

可以使用 ::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 - 是否可以使用外部 css 文件设置 Polymer 的自定义元素的样式,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/29300903/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com