使用Polymer 2.0和Bootstrap JS

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

<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>

下拉示例





类MyComponent扩展了Polymer.Element{
静态get是（）{return'my component'}
构造函数（）{
超级（）；
}
}
customElements.define（MyComponent.is，MyComponent）；

但是，当我点击下拉菜单时，它不能正常工作。 我可以看到Bootstrap的样式正在被应用，但下拉列表并没有扩展

我认为这可能是因为Polymer使用了ShadowDOM，而Bootstrap JS无法使用它

可能我导入的引导JS不正确

---

任何人都可以澄清如何正确使用Polymer和Bootstrap吗？

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

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>

https://github.com/LostInBrittany/granite-bootstrap/blob/master/demo/index.html
：host{display:block；}
你好
聚合物（{is:'x-foo'}）；

在dom模块对象的模板中包含脚本的可能重复错误。不要那样做。只需将框架包含在文档的核心部分或

部分即可。首先，感谢您的回答。我做到了：将js文件包含到index.html的头部分。但是，它不起作用。我看到，我看到我的下拉列表是样式化的，但当我点击它时，它不会展开。引导CSS工作。但我的主要问题是引导JS不起作用。尽管在ShadowDOM上，是否可以将引导JS与Polymer一起使用？您必须为这些JS文件创建一个导入文件。创建一个名为bootrap-import.html的新html文件，在其中放置脚本标记，加载引导js文件。然后im您的网络组件导入新创建的html文件。