twitter-bootstrap – 使用Polymer的shadow DOM处理Boostrap的布

发布时间：2020-12-17 20:38:48 所属栏目：安全来源：网络整理

导读：在Chromium上开发一段时间之后,我意识到Chrome正确地实现了阴影DOM,而Chromium(尚未)并且打破了我的不太好的封装组件.这与 this other SO question有关,但更具体地针对网格布局而不仅仅是CSS. 如果布局是在顶级文档中完成的,那么它可以工作,但是如果它在自定

在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网格布局？

解决方法

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

直到大约0.3.x版本,聚合物在组件中的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”现在已经弃用,所以对于最新版本,上面的代码不再有效.

有一些随机的博客文章,聚合物谷歌团队中的一些线索在处理这个问题的最佳方式上提出了不同的想法和建议,但是现在最简单的方法就是为你的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查找完整的fat元素,而不是web组件轻量级,因此如果不对BS JavaScript文件进行大量更改,JS功能都不会在聚合物元素内部工作,至少不会但无论如何.

我有很好的权威,那些知情人士一直在寻找适应BS在聚合物内部工作(以及x-tags)

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!