如何动态地将样式表应用于Polymer 2元素？

我有一个自定义的Polymer 2视频播放器元素，我希望能够将属性传递给每个元素实例，以便定义应用于它的样式表（每年发布不同的主题名称，并且每个样式集当前存在于服务器中的文件中，它具有可预测的命名格式）。我看到了一些内联标签的例子，但这似乎只是小样式的可接受的解决方案（否则它会失去控制，因为我会将所有样式都塞进去，其中有很多）。我如何正确地执行主题？如何动态地将样式表应用于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样式表。

来源

2017-08-15 DecafJava

我不认为你可以范围CSS（在当前的浏览器）。你可以在样式表中添加'[theme = 2016]'吗？ – user3080953

要添加外部样式表，您需要创建一个包含所需样式的自定义组件。然后，您可以链接的“风格”组件到使用的样式像这样的成分（S）：

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

注意，您仍然可以包括独有的她共享样式正在与所使用的组件样式。

来源

2017-08-16 03:01:29

如何动态地将样式表应用于Polymer 2元素？

回答

相关问题