Polymer 2.0-引导类不起作用

我试图在polymer2.0中使用引导CSS类，但它正在工作

HTML:

代码笔-

没有在网上找到太多帮助，也没有找到polymer 1的结果，我找到的最接近的结果是，但它是在2015年发布的

---

我尝试了不同的链接导入选项，但没有多大帮助，因为当您创建dom模块时，您创建的dom是一个阴影dom，这意味着外部操作和样式对dom中的这些元素无效

如果你真的想使用我不推荐的引导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>

---

有没有办法在内部导入引导css而不是完整的引导css@NagaSaiA尝试使用inside，但它已被弃用，因此可能无法使用。我不知道。@NagaSaiA你有没有尝试在外面添加？在？@NagaSaiA中或尝试在这两种情况下写入。尝试将内部模板添加到外部样式-

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

<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>