使用 Polymer 的 shadow DOM 处理 Boostrap 的布局答案

【问题标题】：Working Boostrap's layout with Polymer's shadow DOM使用 Polymer 的 shadow DOM 处理 Boostrap 的布局
【发布时间】：2014-09-19 16:42:01
【问题描述】：

在 Chromium 上开发了一段时间后，我意识到 Chrome 正确地实现了 shadow DOM，而 Chromium （还没有）并破坏了我封装得不太好的组件。这与 this other SO question 有关，但更具体地针对网格布局而不仅仅是 CSS。

如果布局是在顶级文档中完成的，它可以工作，但如果它是在自定义元素中完成的，它就不起作用。正如另一个问题中所建议的，我在我的组件中插入了相关的引导代码，但它们似乎仍然没有正确布局。这是一个有效的示例布局：

<!-- index.html -->
<div class="container-fluid">
  <div class="row">
    <my-element-a class="col-md-6">
    <my-element-b class="col-md-6">
  </div>
</div>

这是一个不起作用的例子：

<!-- custom-element-c.html -->
<div class="container-fluid">
  <div class="row">
    <my-element-a class="col-md-6">
    <my-element-b class="col-md-6">
  </div>
</div>

有没有办法在 Polymer 自定义元素中使用 Bootstrap 网格布局？

【问题讨论】：

标签： twitter-bootstrap layout polymer shadow-dom

【解决方案1】：

你没有展示你的完整元素代码，所以我只能做出有根据的猜测，但这里是。

直到大约 0.3.x 版本，Polymer 在组件内的 JS 全局选项中有一个选项，称为“applyAuthorStyles”，将其设置为“true”使得组件继承文档级别的任何样式。

例如，如果您有：

<html>
  <head>
    <title>....</title>
    ....
    <link rel="stylesheet" type="text/css" href="/some/path/to/bootstrap.css" />
    <script ... links to polymer & platform js />
  </head>
  <body>
    <x-mypolymerelement></x-mypolymerelement>
  </body>
</html>

那么在您的聚合物组件中，您将能够做到这一点：

<link rel="import" href="polymer.html">

<polymer-element name="x-mypolymerelement">
  <template>
    <.... html mark up here .....>
  </template>

  <script>
    Polymer('x-mypolymerelement', {
      applyAuthorStyles: true
    });
  </script>
</polymer-element>

所有这一切的最终结果是，包含在模板中的内部组件标记将毫无问题地使用 Bootstrap 样式，并且您在组件中实现的任何额外样式或 JS 将仅在内部可见。

不幸的是，0.3.x 分支中最大的变化之一是“applyAuthorStyles”现已被弃用，因此在最新版本中，上述代码不再有效。

有一些随机的博客文章，以及聚合物 Google 群组中的一些线程，就处理此问题的最佳方法提出不同的想法和建议，但目前最简单的方法是添加一个链接你的组件中的 css 如下所示：

<link rel="import" href="polymer.html">

<polymer-element name="x-mypolymerelement" attributes="dataUrl">
  <template>
    <link rel="stylesheet" href="/some/path/to/bootstrap.css">

    <.... html mark up here .....>
  </template>

  <script>
    Polymer('x-mypolymerelement', {
    });
  </script>
</polymer-element>

同时仍将原始链接保留在文档中以适应页面范围的样式。

我同意许多人的说法，这太疯狂了（尤其是因为您必须将此链接放在使用它的每个组件中）并且需要找到更好的方法来共享样式。

目前，这是使其正常工作的最简单方法，并且作为记录，链接必须在模板内，否则将无法正常工作。

虽然在此处，您还需要了解有关引导程序的其他内容，但您目前无法使用任何 JavaScript 功能。

Bootstraps JS 操作使用完整的文档 dom 而不是 web 组件的 light dom 来查找完整的元素，因此如果不对 BS JavaScript 文件进行大量更改，那么任何 JS 功能都不会在聚合物元素中工作，好吧至少现在还没有。

据我所知，知情人士一直在寻求使 BS 适应聚合物内部（以及就此而言的 x-tags）

【讨论】：

+1 表明当前没有任何 JavaScript 函数可以工作。知道这一点，让我很沮丧。为此花了 8 个小时 :(
没问题，我很高兴它有帮助:-)
感谢您解决这个问题！但是，即使将链接标签放在模板中，我仍然遇到样式问题。可以在我的存储库中找到一个示例，我尝试在纯 Dart 中制作 Bootstrap Modal：github.com/Turbots/bs-modal-dart/commit/…
在 Dart 方面帮不了你，我不知道，没用过，老实说我也不想用。
edit：我发现了问题，我必须将样式表导入也包含在顶级自定义元素中（在 test-app 元素中），现在它可以工作了。这真的很烦人，我希望他们能尽快找到更好的出路！