聚合物風格模塊不工作

我想在聚合物元素中使用Selectize jQuery插件，將selectize CSS和JS文件封裝在selectize-css.html和selectize-js.html中以便導入。 JS導入工作，但CSS的樣式模塊（https://www.polymer-project.org/1.0/docs/devguide/styling#style-modules）沒有。選擇性CSS規則與Polymer元素內部選擇生成的HTML不匹配。聚合物風格模塊不工作

這裏是我的元素：

<link rel="import" href="https://polygit.org/components/polymer/polymer.html"> 
<!-- <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/selectize.js/0.12.4/css/selectize.bootstrap3.css"> --> 
<link rel="import" href="./selectize-css.html"> 
<link rel="import" href="./selectize-js.html"> 

<dom-module id="subject-picker"> 
    <template> 
    <style include="selectize-css"></style> 
    <select id="selector" value="{{selection::change}}"> 
     <option value="" disabled selected>Pick a number...</option> 
     <option value="1">One</option> 
     <option value="2">Two</option> 
     <option value="3">Three</option> 
     <option value="4">Four</option> 
     <option value="5">Five</option> 
    </select> 

</template> 

<script> 
    Polymer({ 
     is: 'subject-picker', 

     properties: { 
      selection: { 
       type: String, 
       notify: true 
      } 
     }, 
     attached: function() { 
      var _this = this; 
      $(this.$.selector).selectize({ 
       // When the user selects a different option, update the selection property. 
       onChange: function (newValue) { 
        if (_this.selection != newValue) { 
         _this.selection = newValue; 
        } 
       } 
      }); 
     } 
    }); 
</script> 
</dom-module>

這裏是selectize-css.html風格模塊：

<link rel="import" href="https://polygit.org/components/polymer/polymer.html"> 

<dom-module id="selectize-css"> 
<template> 
    <style> 
     // contents of selectize.bootstrap3.css go here 
    </style> 
</template> 
</dom-module>

如果我包括CSS，而不是直接與風格模塊（取消註釋第二元素代碼行），CSS可以正常工作。在其他情況下，我已經獲得了樣式模塊，但無法弄清楚我在這裏做錯了什麼。有任何想法嗎？

感謝，丹尼斯

來源

2016-11-21 Dennis McCarthy

嗯，你能添加一個''也包含在共享樣式之後的模板中？我不明白爲什麼這不應該工作，也許這是一個錯誤？ – adaliszk

聚合物風格模塊開始工作後，我將全局DOM設置爲「影子」：

<head> 
<script> 
    /* see https://www.polymer-project.org/1.0/docs/devguide/styling#style-modules */ 
    window.Polymer = { 
     dom: 'shadow' 
    }; 
</script>

來源

2017-03-06 18:39:04

這不是一個答案，因此不應該發佈爲一個。您最好編輯原始問題並添加此信息。 – ytk

聚合物風格模塊不工作

回答

相關問題