Twitter bootstrap 工作助推器'；使用聚合物的s布局'；s阴影DOM_Twitter Bootstrap_Layout_Polymer_Shadow Dom

Twitter bootstrap 工作助推器'；使用聚合物的s布局'；s阴影DOM

twitter-bootstrap layout polymer

Twitter bootstrap 工作助推器'；使用聚合物的s布局'；s阴影DOM,twitter-bootstrap,layout,polymer,shadow-dom,Twitter Bootstrap,Layout,Polymer,Shadow Dom,在Chromium上开发了一段时间后，我意识到Chromium可以正确地实现ShadowDOM，而Chromium（目前）还不能，并破坏了封装不太好的组件。这与网格布局相关，但更具体地说是针对网格布局，而不仅仅是CSS 如果布局是在顶层文档中完成的，那么它可以工作，但是如果布局是在自定义元素中完成的，那么它就不能工作。正如在另一个问题中所建议的，我在我的组件中插入了相关的引导代码，但它们似乎仍然没有正确布局。下面是一个有效的布局示例：  <

在Chromium上开发了一段时间后，我意识到Chromium可以正确地实现ShadowDOM，而Chromium（目前）还不能，并破坏了封装不太好的组件。这与网格布局相关，但更具体地说是针对网格布局，而不仅仅是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>

有没有一种方法可以在聚合物自定义元素中使用引导网格布局？

您还没有显示完整的元素代码，因此我只能进行有根据的猜测，但现在开始

直到版本0.3.x之前，polymer在组件内的JS global中有一个选项，称为“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>


聚合物（“x-MyPolymerement”{
applyAuthorStyles：正确
});

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

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

有一些随机的博客帖子，谷歌团队中的一些帖子对如何处理这个问题提出了不同的想法和建议，但目前最简单的方法就是在组件中添加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>


聚合物（“x-MyPolymerement”{
});

同时在文档中保留页面样式的原始链接

我同意许多人所说的，这是疯狂的（尤其是因为你必须在每个使用它的组件中都添加此链接），需要找到更好的方式来共享样式

目前，这是使其工作的最简单方法，对于记录，链接必须位于模板内，否则将无法工作

在这里，您还需要了解引导涉及的其他方面，但您目前无法使用任何JavaScript特性

Bootstraps JS操纵使用成熟的文档dom（而不是web组件轻型dom）查找全脂元素，因此如果不对BS JavaScript文件进行大量修改，JS功能也不会在聚合元素中工作，至少目前还不能

我有很好的权威性，那些有知识的人一直在寻找让BS在polymer内部工作（对于这个问题，x-tags）

+1，以明确目前没有JavaScript函数工作。知道这一点让我很沮丧。为此花了8个小时：（没问题，我很高兴它能帮上忙：-）谢谢你清理这个！但是，即使将链接标记放置在模板中，我仍然会遇到样式设置问题。在我的存储库中可以找到一个例子，我试图在纯Dart中创建一个引导模式：恐怕不能帮助您使用Dart，我不知道它，没有使用它，老实说，我不打算使用它。编辑：我发现了问题，我还必须在顶级自定义元素中包含样式表导入（在测试应用程序元素中）现在它开始工作了。这真的很烦人，我希望他们能尽快找到更好的解决办法！