Polymer 2.0 - bootstrap 类不工作

Question

我正在尝试将 bootstrap CSS 类与 polymer2.0 一起使用，但它正在工作

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

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

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

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 类不工作

Polymer 2.0 - bootstrap classes are not working

polymer

polymer-2.x

Polymer 2.0 - bootstrap 类 不工作

Polymer 2.0 - bootstrap classes are not working

polymer

polymer-2.x

Polymer 2.0 - bootstrap 类不工作