聚合物2.0-引导程序类不起作用 [英] Polymer 2.0 - bootstrap classes are not working
问题描述
我正在尝试将bootstrap CSS类与polymer2.0一起使用，但是它正在工作
HTML:
<head>
<base href="https://polygit.org/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="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/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- https://codepen.io/nagasai/pen/BZwjqq
在网上可以找到很多帮助，并找到聚合物1的结果，而我找到的最接近的是 https: //github.com/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="https://polygit.org/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="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/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- https://codepen.io/nagasai/pen/BZwjqq
Didnt find much help online and finding results for polymer 1 and the closest i found is https://github.com/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-引导程序类不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
