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中调用下拉列表('toggle')后,会出现下拉菜单,但永远不会消失.此外,由于事件是在窗口级别触发的,因此似乎无法检测click事件触发了哪个链接.这意味着我无法找到要显示的下拉菜单.

有没有人有使用twitter-bootstrap和Polymer的经验？

Answer 1

您的questison是关于Polymer.dart端口,但也适用于Polymer.js devs :)

正如您所指出的,问题出在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>(演示)

该过程基本上是将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登陆时,此要求消失.