Question

我目前正致力于将当前的Dart Web UI项目翻译为Polymer.dart。我们使用Bootstrap 3作为前端样式和许多网络动画（例如下拉菜单，模态，工具提示）。

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

首先，在bootstrap中调用dropdown（'toggle'）API后，会出现下拉菜单，但永远不会消失。此外，由于事件是在窗口级别触发的，因此似乎无法检测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>（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登陆时，此要求就消失了。

Answer 2

其他答案中指出的问题是影子dom。 Bootstrap没有看到那里的元素，因此无法发挥其魔力。您可以禁用shadowdom并应用以下作者样式：

import 'package:polymer/polymer.dart';
import 'dart:html';

@CustomTag('main-messages')
class MainMessagesElement extends PolymerElement {
  MainMessagesElement.created() : super.created();

  //This enables the styling via bootstrap.css
  bool get applyAuthorStyles => true;
  //This enables the bootstrap javascript to see the elements
  @override
  Node shadowFromTemplate(Element template) {
    var dom = instanceTemplate(template);
    append(dom);
    shadowRootReady(this, template);
    return null; // no shadow here, it's all bright and shiny
  }   
}

您还需要删除所有父元素的shadowdom。

警告：您将使用lightdom来使用点击事件处理程序：（

Answer 3

我设法让bootstrap.js为我的聚合物组件工作，方法是将lightdom属性添加到他们的定义中。

<polymer-element name="my-element-with-bootstrap-js" lightdom 
apply-author-styles> 
<template>
<div>fancy template markup here</div>
</template> 
<script type="application/dart" src="my-element-with-bootstrap-js.dart"></script> 
</polymer-element>

主机HTML可能如下所示：

<!DOCTYPE html>
<html>
<head>
<title>Unarin</title>
<meta name="viewport"
  content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />


<link rel="import" href="elements/my-element-with-bootstrap-js.html">

<script type="application/dart">export 'package:polymer/init.dart';</script>
<script src="packages/browser/dart.js" type="text/javascript"></script>

<link rel="stylesheet"
  href="//netdna.bootstrapcdn.com/bootstrap/3.0.2/css/bootstrap.min.css">
<script
  src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"
  type="text/javascript"></script>
<script
  src="//netdna.bootstrapcdn.com/bootstrap/3.0.2/js/bootstrap.min.js"
  type="text/javascript"></script>
</head>

<body>
  <my-element-with-bootstrap-js></my-element-with-bootstrap-js>
</body>
</html>

请注意：使用lightdom属性会将您的组件从shadow DOM替换为light DOM，这可能会导致组件的样式与全局上下文的现有样式之间发生冲突。

相关讨论：https://groups.google.com/a/dartlang.org/forum/#!topic/web-ui/ps6b9wlg1Vk

根据讨论，我不能100％确定光稳定剂是否能够成为实现聚合物组分这种功能的标准方法。也许作者可以就此发表评论？

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

3 个答案: