Hi Andrii,
This is my problem also. Did you find a solution for this so far?
2017. június 28., szerda 16:17:33 UTC+2 időpontban Andrii La a következőt
írta:
>
> 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/ae69c280-e526-4e78-a1a1-d7dc867d37fa%40googlegroups.com.
For more options, visit https://groups.google.com/d/optout.
