twitter-bootstrap - Bootstrap.js 在 Polymer 组件中不起作用

Question

我目前正在将我们当前的 Dart Web UI 项目翻译成 Polymer.dart。我们将 Bootstrap 3 用于前端样式和许多 Web 动画(例如下拉菜单、模式、工具提示)。

然而，在我将一个 Web UI 组件翻译成 Polymer 后，所有的 Bootstrap JavaScript 都停止了对子组件的工作，因为它现在被封装在 ShadowDOM 中。要从 Dart 访问 ShadowDOM 中的元素，我必须使用 shadowRoot 字段，而从 Chrome 中的 JavaScript 我必须使用 webkitShadowRoot 属性，但我仍然无法让单个下拉菜单正常工作。

首先，在 bootstrap 中调用 dropdown('toggle') API 后，下拉菜单出现但永远不会消失。此外，似乎不可能检测到单击事件触发了哪个链接，因为该事件是在窗口级别触发的。这意味着我找不到要显示的下拉菜单。

有人有一起使用 twitter-bootstrap 和 Polymer 的经验吗？

Answer 1

您的问题是关于 Polymer.dart 端口，但也适用于 Polymer.js 开发人员:)

正如您所指出的，问题出在 Bootstrap 的 JS 上。它不了解 ShadowDOM，并尝试使用全局选择器从 DOM 中获取节点。例如，在 bootstrap-carousel.js 中，我看到如下内容:

$(document).on('click.carousel.data-api', ...', function (e) { ...});

不久前，我们探索了在 Polymer 内部使用 Bootstrap 组件:
https://github.com/Polymer/more-elements/tree/stable/Bootstrap

你最感兴趣的是 <bs-accordion-item> ( Demo)

该过程基本上是将 Bootstrap 内容包装在自定义元素中并调用其 API。

对于 CSS :如果你在你的元素中包含他们的样式表，事情通常应该工作:

<polymer-element name="my-element">
  <template>
    <link rel="stylesheet" href="bootstrap.css">
    ...
  </template>
  <script>...</script>
</polymer-element>

请记住，如果 bootstrap.css 来自 CDN，则需要启用 CORS 才能使 polyfill 正常工作。当原生 HTML Imports 登陆时，这个要求就消失了。