我正在尝试将bootstrap CSS类与polymer2.0一起使用，但是它正在工作
HTML:
<head> <base href="polygit/polymer+v2.0.0/shadycss+webcomponents+1.0.0/moment-js+saeidzebardast+0.7.2/components/"> <script src="webcomponentsjs/webcomponents-lite.js"></script> <link rel="import" href="polymer/polymer.html"> <link rel="import" href="moment-js/moment-js.html"> </head> <link rel="import" href="polymer/polymer-element.html"> <link rel="stylesheet" href="maxcdn.bootstrapcdn/bootstrap/3.3.7/css/bootstrap.min.css"> <script src="ajax.googleapis/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <script src="maxcdn.bootstrapcdn/bootstrap/3.3.7/js/bootstrap.min.js"></script> <polymer-header></polymer-header> <dom-module id="polymer-header"> <template> <style> :host { display: block; } </style> <div class="navbar"> [[result.header.name]] </div> <nav class="navbar navbar-default"> <div class="container-fluid"> <div class="navbar-header"> <a class="navbar-brand" href="#">WebSiteName</a> </div> <ul class="nav navbar-nav"> <li class="active"><a href="#">Home</a></li> <li><a href="#">Page 1</a></li> <li><a href="#">Page 2</a></li> <li><a href="#">Page 3</a></li> </ul> </div> </nav> <!-- navigation strip with descriptive text --> </template> </dom-module>JS:
/** * @customElement * @polymer */ class PolymerHeader extends Polymer.Element { static get is() { return 'polymer-header'; } static get properties() { return {}; } } window.customElements.define(PolymerHeader.is, PolymerHeader);Codepen- codepen.io/nagasai/pen/BZwjqq
在网上可以找到很多帮助，并找到聚合物1的结果，而我找到的最接近的是 https: //github/Polymer/polymer/issues/3156 ，但它于2015年发布.
我尝试了链接导入的不同选项，但并没有太大帮助
解决方案它不起作用，因为当您创建dom-module时，创建的dom是 shadow-dom ，即意味着外部操纵和样式对dom内部的这些元素无效.
如果您真的想使用bootstrap css类(我不建议这样做，因为Polymer已经具有良好的自定义元素，可以帮助您设计应用程序)，请尝试以下操作:
制作一个名为bootstrap-classes.html的新HTML文件，其中包含:
<dom-module id="bootstrap-classes"> <template> <style> <!-- copy paste all your bootstrap classes that you are interested in --> </style> </template> </dom-module>现在在您的dom模块中:
<link rel="import" href="bootstrap-classes.html"> <!-- include the style module --> <dom-module id="polymer-header"> <template> <style include="bootstrap-classes"> <!-- add the include --> :host { display: block; } </style> <!-- now the classes should work --> <div class="navbar"> [[result.header.name]] </div> <nav class="navbar navbar-default"> <div class="container-fluid"> <div class="navbar-header"> <a class="navbar-brand" href="#">WebSiteName</a> </div> <ul class="nav navbar-nav"> <li class="active"><a href="#">Home</a></li> <li><a href="#">Page 1</a></li> <li><a href="#">Page 2</a></li> <li><a href="#">Page 3</a></li> </ul> </div> </nav> <!-- navigation strip with descriptive text --> </template> <script> ... </script> </dom-module>I am trying to use bootstrap CSS classes with polymer2.0 but it is working
HTML:
<head> <base href="polygit/polymer+v2.0.0/shadycss+webcomponents+1.0.0/moment-js+saeidzebardast+0.7.2/components/"> <script src="webcomponentsjs/webcomponents-lite.js"></script> <link rel="import" href="polymer/polymer.html"> <link rel="import" href="moment-js/moment-js.html"> </head> <link rel="import" href="polymer/polymer-element.html"> <link rel="stylesheet" href="maxcdn.bootstrapcdn/bootstrap/3.3.7/css/bootstrap.min.css"> <script src="ajax.googleapis/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <script src="maxcdn.bootstrapcdn/bootstrap/3.3.7/js/bootstrap.min.js"></script> <polymer-header></polymer-header> <dom-module id="polymer-header"> <template> <style> :host { display: block; } </style> <div class="navbar"> [[result.header.name]] </div> <nav class="navbar navbar-default"> <div class="container-fluid"> <div class="navbar-header"> <a class="navbar-brand" href="#">WebSiteName</a> </div> <ul class="nav navbar-nav"> <li class="active"><a href="#">Home</a></li> <li><a href="#">Page 1</a></li> <li><a href="#">Page 2</a></li> <li><a href="#">Page 3</a></li> </ul> </div> </nav> <!-- navigation strip with descriptive text --> </template> </dom-module>JS:
/** * @customElement * @polymer */ class PolymerHeader extends Polymer.Element { static get is() { return 'polymer-header'; } static get properties() { return {}; } } window.customElements.define(PolymerHeader.is, PolymerHeader);Codepen- codepen.io/nagasai/pen/BZwjqq
Didnt find much help online and finding results for polymer 1 and the closest i found is github/Polymer/polymer/issues/3156 but it was posted back in 2015.
I tried different options of link import but didnt help much
解决方案It doesn't work because when you make a dom-module, the dom that you create is a shadow-dom, that means outer manipulations and stylings are ineffective to these elements inside the dom.
If you really want to use bootstrap css classes (which I don't recommend, because Polymer already has good custom elements that will help to design your applications), try the following :
make a new html file called bootstrap-classes.html that contains :
<dom-module id="bootstrap-classes"> <template> <style> <!-- copy paste all your bootstrap classes that you are interested in --> </style> </template> </dom-module>now in your dom-module :
<link rel="import" href="bootstrap-classes.html"> <!-- include the style module --> <dom-module id="polymer-header"> <template> <style include="bootstrap-classes"> <!-- add the include --> :host { display: block; } </style> <!-- now the classes should work --> <div class="navbar"> [[result.header.name]] </div> <nav class="navbar navbar-default"> <div class="container-fluid"> <div class="navbar-header"> <a class="navbar-brand" href="#">WebSiteName</a> </div> <ul class="nav navbar-nav"> <li class="active"><a href="#">Home</a></li> <li><a href="#">Page 1</a></li> <li><a href="#">Page 2</a></li> <li><a href="#">Page 3</a></li> </ul> </div> </nav> <!-- navigation strip with descriptive text --> </template> <script> ... </script> </dom-module>
更多推荐
聚合物2.0
发布评论