如何動態地將樣式表應用於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元素？

回答

相關問題