Question

我正在尝试使用带有Polymer2.0的bootstrap CSS类，但它正在运行

HTML：

<head>
  <base href="https://polygit.org/polymer+v2.0.0/shadycss+webcomponents+1.0.0/moment-js+saeidzebardast+0.7.2/components/">
  <script src="webcomponentsjs/webcomponents-lite.js"></script>
  <link rel="import" href="polymer/polymer.html">
  <link rel="import" href="moment-js/moment-js.html">
</head>

<link rel="import" href="polymer/polymer-element.html">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

<polymer-header></polymer-header>

<dom-module id="polymer-header">
  <template>
    <style>
      :host {
        display: block;
      }
    </style>



    <div class="navbar">
      [[result.header.name]]
    </div>

    <nav class="navbar navbar-default">
      <div class="container-fluid">
        <div class="navbar-header">
          <a class="navbar-brand" href="#">WebSiteName</a>
        </div>
        <ul class="nav navbar-nav">
          <li class="active"><a href="#">Home</a></li>
          <li><a href="#">Page 1</a></li>
          <li><a href="#">Page 2</a></li>
          <li><a href="#">Page 3</a></li>
        </ul>
      </div>
    </nav>



      <!-- navigation strip with descriptive text -->

  </template>


</dom-module>

JS：

/**
     * @customElement
     * @polymer
     */
    class PolymerHeader extends Polymer.Element {
      static get is() { return 'polymer-header'; }
      static get properties() {
      return {};
    }


    }

    window.customElements.define(PolymerHeader.is, PolymerHeader);

Codepen- https://codepen.io/nagasai/pen/BZwjqq

Didnt在网上找到了很多帮助，找到了聚合物1的结果，而我发现的最接近的是https://github.com/Polymer/polymer/issues/3156，但它是在2015年发布的。

我尝试了不同的链接导入选项，但没有多大帮助

Answer 1

它没有用，因为当你制作dom-module时，你创建的dom是 shadow-dom ，这意味着外部操作和样式对这些元素无效在dom里面。

如果你真的想使用bootstrap css类（我不推荐使用它，因为Polymer已经有了很好的自定义元素，有助于设计你的应用程序），请尝试以下方法：

创建一个名为bootstrap-classes.html的新html文件，其中包含：

<dom-module id="bootstrap-classes">
  <template>
    <style>
      <!-- copy paste all your bootstrap classes that you are interested in -->
    </style>
  </template>
</dom-module>

现在在您的dom模块中：

<link rel="import" href="bootstrap-classes.html"> <!-- include the style module -->
<dom-module id="polymer-header">
  <template>
    <style include="bootstrap-classes"> <!-- add the include -->
      :host {
        display: block;
      }
    </style>


    <!-- now the classes should work -->
    <div class="navbar">
      [[result.header.name]]
    </div>

    <nav class="navbar navbar-default">
      <div class="container-fluid">
        <div class="navbar-header">
          <a class="navbar-brand" href="#">WebSiteName</a>
        </div>
        <ul class="nav navbar-nav">
          <li class="active"><a href="#">Home</a></li>
          <li><a href="#">Page 1</a></li>
          <li><a href="#">Page 2</a></li>
          <li><a href="#">Page 3</a></li>
        </ul>
      </div>
    </nav>



      <!-- navigation strip with descriptive text -->

  </template>

  <script>
    ...
  </script>

</dom-module>

Polymer 2.0 - bootstrap类不起作用

1 个答案: