聚合物风格模块不工作

我想在聚合物元素中使用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

聚合物风格模块不工作

回答

相关问题