Question

我需要使用Polymer 2.0（用于创建Web组件）和Bootstrap（作为样式的框架）。我创建了简单的Web组件并在其中添加了dropdown元素：

<dom-module id="my-component">
  <template>
    <script type="text/javascript" 
      src="../bower_components/jquery/dist/jquery.js"></script>
    <script type="text/javascript" 
      src="../bower_components/bootstrap/dist/js/bootstrap.min.js"></script>
    <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>

但是，当我点击下拉列表时，它无法正常工作。我可以看到正在应用Bootstrap的样式，但下拉列表不会扩展。

我认为这可能是因为Polymer使用Shadow DOM，而Bootstrap JS无法使用它。

也许我错误地导入了Bootstrap JS？

请问有谁可以澄清如何正确使用Polymer和Bootstrap？

Answer 1

使用下面的代码，我将在下面附上一个示例代码：

https://github.com/LostInBrittany/granite-bootstrap/blob/master/demo/index.html


<!-- import the module  -->
<link rel="import" href="../granite-bootstrap/granite-bootstrap.html">
<dom-module id="x-foo">
  <template>
    <!-- include the style module by name -->
    <style include="granite-bootstrap"></style>
    <style>:host { display: block; }</style>
    Hi
  </template>
  <script>Polymer({is: 'x-foo'});</script>
</dom-module>

使用Polymer 2.0和Bootstrap JS

1 个答案: