javascript - 如何动态包含样式表以应用于 Polymer 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;
      }

请注意，您仍然可以包含与她共享样式一起使用的组件独有的样式。