如何动态包含样式表以应用于聚合物 2 元素?

Question

我有一个自定义的 Polymer 2 视频播放器元素，我希望能够将属性传递给每个元素实例，以便定义要应用于它的样式表(每年发布不同的主题名称，每组样式当前存在于服务器上自己的文件中，该文件具有可预测的命名格式(。我看到了一些带有内联标签的示例，但这似乎只是较小样式的可接受解决方案(否则我将所有样式都塞进去会失控，其中有很多(。如何正确设置主题？

以下是到目前为止我在两个单独的 HTML 文件中得到的内容：

演示文件 (demo-page.html(

<link rel="import" href="../my-video-player.html">
<my-video-player data="{...}" theme="2016"></my-video-player>
<my-video-player data="{...}" theme="2017"></my-video-player>

组件文件 (my-video-player.html(

<dom-module id="my-video-player">
<template>
<link type="css" rel="import" href="css/[[theme]]/styles.css">
</template>
<script>
class MyVideoPlayer extends Polymer.Element {
...
}
</script>
</dom-module>

注意：我也尝试将上面的链接标签放在模板标签之外的一级，但这不起作用。

现在发生的事情是两个主题样式表中只有一个应用于我的两个组件。相反，我需要的是第一个组件应用2016.css样式表，而第二个组件获取2017.css样式表。

Answer 1

要添加外部样式表，您需要创建一个包含所需所有样式的自定义组件。然后，您可以使用如下所示的样式将"样式"组件链接到组件中：

<link rel="import" href="/shared-styles.html">
<dom-module id="sus-app">
<template>
<style include="shared-styles"></style>
<style>
neon-animated-pages {
height: 500px;
}
neon-animatable {
padding-top: 2em;
padding-left: 10em;
padding-right: 10em;
}

请注意，您仍然可以包含她共享样式所使用的组件所特有的样式。