Question

在Chromium上开发一段时间后，我意识到Chrome正确地实现了影子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网格布局？

Answer 1

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

直到大约0.3.x版本，聚合物在组件中有一个选项，称为＆＃34; applyAuthorStyles ＆＃34;，设置这个＆＃39; true ＆＃39;使组件继承文档级别的任何样式。

例如，如果你有：

<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分支中最大的变化之一是＆＃34; applyAuthorStyles ＆＃34;现在已经弃用，所以使用最新版本，上面的代码不再有效。

有一些随机的博客文章，聚合物谷歌团队中的一些线索在处理这个问题的最佳方式上提出了不同的想法和建议，但目前最简单的方法是添加一个链接组件内的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>

同时仍然保留原始链接在您的页面范围样式的文档中。

我同意许多人所说的，这是疯狂的（Esp，因为你必须将这个链接放在每个使用它的组件中），并且需要找到一种更好的方式来分享风格。

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

虽然在这里，您还需要了解其中涉及引导程序的其他内容，但您目前无法使用任何JavaScript功能。

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

我拥有良好的权威，那些知情人士一直在寻求让BS适应聚合物（以及x标签）

使用Polymer的Shadow DOM工作Boostrap的布局

1 个答案: