Polymer 2.0 - bootstrap classes are not working

问题

I am trying to use bootstrap CSS classes with polymer2.0 but it is working

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 find much help online and finding results for polymer 1 and the closest i found is https://github.com/Polymer/polymer/issues/3156 but it was posted back in 2015.

I tried different options of link import but didnt help much

回答1:

It doesn't work because when you make a dom-module, the dom that you create is a shadow-dom, that means outer manipulations and stylings are ineffective to these elements inside the dom.

If you really want to use bootstrap css classes (which I don't recommend, because Polymer already has good custom elements that will help to design your applications), try the following :

make a new html file called bootstrap-classes.html that contains :

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

now in your 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>

来源：https://stackoverflow.com/questions/44743275/polymer-2-0-bootstrap-classes-are-not-working

标签

polymer

polymer-2.x