Hi.
I need to use Polymer 2.0 (for creating Web components), and Bootstrap (as
a framework for styling). I've created simple web component and added
dropdown element into it:
<dom-module id="my-component">
<template>
<link rel="stylesheet" type="text/css"
href="../bower_components/bootstrap/dist/css/bootstrap.css">
<div class="dropdown">
<button class="btn btn-primary dropdown-toggle" type="button"
data-toggle="dropdown" id="dropTest">Dropdown Example
<span class="caret"></span>
</button>
<ul class="dropdown-menu">
<li><a href="#">Item1</a></li>
<li><a href="#">Item2</a></li>
<li><a href="#">Item3</a></li>
</ul>
</div>
</template>
<script>
class MyComponent extends Polymer.Element {
static get is() { return 'my-component' }
constructor() {
super();
}
}
customElements.define(MyComponent.is, MyComponent);
</script></dom-module>
But, when I click on dropdown it is not working correctly. I can see that
Bootstrap's styles are being applied, but dropdown doesn't expand.
I think it could be because Polymer uses Shadow DOM, and Bootstrap JS cannot
use it.
Bootstrap CSS works. But my main problem is Bootstrap JS doesn't work. Is it
possible to use Bootstrap JS with Polymer, despite on Shadow DOM? –
Could anyone please clarify how to correctly use Polymer and Bootstrap together?
Thank you in advance.
Follow Polymer on Google+: plus.google.com/107187849809354688692
---
You received this message because you are subscribed to the Google Groups
"Polymer" group.
To unsubscribe from this group and stop receiving emails from it, send an email
to [email protected].
To view this discussion on the web visit
https://groups.google.com/d/msgid/polymer-dev/72843eb5-b914-4d47-aede-366d51a82203%40googlegroups.com.
For more options, visit https://groups.google.com/d/optout.
