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

注意：我也尝试将上面的 link 标签放在模板标签之外的一级，但那没有用。

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

Answer 1

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

<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 元素？

How can I dynamically include stylesheets to apply to Polymer 2 element?

javascript

shadow-dom

polymer

polymer-2.x