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

【问题标题】：How can I dynamically include stylesheets to apply to Polymer 2 element?如何动态包含样式表以应用于 Polymer 2 元素？
【发布时间】：2018-01-23 16:59:33
【问题描述】：

我有一个自定义的 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 样式表。

【问题讨论】：

我不认为你可以限定 CSS（在当前浏览器中）。您可以在样式表中添加[theme=2016] 吗？

标签： javascript polymer shadow-dom polymer-2.x

【解决方案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;
      }

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

【讨论】：