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

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

<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;
      }

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

如何动态包含样式表以应用于Polymer 2元素？

1 个答案: