将 Polymer 2.0 与 Bootstrap JS 一起使用答案

【问题标题】：Using Polymer 2.0 with Bootstrap JS将 Polymer 2.0 与 Bootstrap JS 一起使用
【发布时间】：2017-06-28 09:53:11
【问题描述】：

我需要使用 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>

但是，当我单击下拉菜单时，它无法正常工作。我可以看到正在应用 Bootstrap 的样式，但下拉菜单没有展开。

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

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

谁能说明如何正确使用 Polymer 和 Bootstrap？

【问题讨论】：

Polymer 2.0 - bootstrap classes are not working的可能重复
在 dom-module 对象的模板中包含您的脚本是错误的。不要那样做。只需将框架包含在文档的核心或 <head> 部分中即可。
首先，感谢您的回答。我这样做了：将 js 文件包含到 index.html 的 head 部分。但是，它不起作用。我明白了，我看到我的下拉菜单是有样式的，但是当我点击它时，它并没有展开。
引导 CSS 工作。但我的主要问题是 Bootstrap JS 不起作用。尽管在 Shadow DOM 上，是否可以将 Bootstrap JS 与 Polymer 一起使用？
您必须为这些 js 文件创建一个导入文件。创建一个名为 bootrap-import.html 的新 html 文件，在其中放置加载 bootstrap js 文件的脚本标记。然后在你的 web 组件中导入新创建的 html 文件。

标签： polymer bootstrap-4

【解决方案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>

【讨论】：