Polymer 2.0 — классы начальной загрузки не работают

Я пытаюсь использовать загрузочные классы CSS с полимером 2.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 году.

Я пробовал разные варианты импорта ссылок, но не очень помогло


polymer polymer-2.x
person Naga Sai A    schedule 25.06.2017    source источник

Ответы (1)


arrow_upward
1
arrow_downward

Это не работает, потому что, когда вы создаете dom-module, создаваемый дом является теневым домом, что означает, что внешние манипуляции и стили неэффективны для этих элементов внутри дома.

Если вы действительно хотите использовать классы bootstrap css (которые я не рекомендую, потому что у Polymer уже есть хорошие пользовательские элементы, которые помогут разработать ваши приложения), попробуйте следующее:

создайте новый html-файл с именем bootstrap-classes.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>
person vdegenne    schedule 25.06.2017
comment
есть ли способ импортировать bootstrap css внутри ‹style›‹/style› вместо полного bootstrap css - person Naga Sai A; 25.06.2017
comment
@NagaSaiA попробуйте использовать <link rel="import" href="../path/to/bootstrap.css"> внутри <style></style>, но это устарело, поэтому может не работать. Я не знаю. - person vdegenne; 26.06.2017
comment
@NagaSaiA, вы пытались добавить <link rel="import" href="../path/to/bootstrap.css"> вне <style></style>? в <template></template> ? - person vdegenne; 26.06.2017
comment
@NagaSaiA или попробуйте написать <link rel="import" type="css" href="../path/to/bootstrap.css"> в обоих случаях. - person vdegenne; 26.06.2017
comment
Попытался добавить внутренний шаблон вне стиля - ‹ссылка rel=import type=css href=maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css› - person Naga Sai A; 26.06.2017
comment
Пожалуйста, проверьте мой обновленный codepen - codepen.io/nagasai/pen/BZwjqq - person Naga Sai A; 26.06.2017
comment
Спасибо, ballangddang, это работает.. только один последний вопрос, чтобы js работал, мне нужно использовать его так же, как jquery и bootstrap.min.js - person Naga Sai A; 26.06.2017
comment
@NagaSaiA Я не уверен, что понял ваш последний вопрос. вы имеете в виду, как вы используете JavaScript? вам следует попытаться прочитать дополнительную документацию по полимерам, если вы когда-либо не имели ни малейшего представления об этом. Если вы добавите несколько скриптов в свой документ (или в раздел ‹head›), вы сможете использовать фреймворки в любом месте вашего приложения (например, в определении пользовательского элемента). - person vdegenne; 26.06.2017
comment
Спасибо, ballangddang, мой вопрос заключался в том, что некоторые из классов начальной загрузки зависят от jquery, требуется ли определять так же, как классы начальной загрузки. - person Naga Sai A; 27.06.2017
comment
@NagaSaiA нет, вам не нужно делать классы начальной загрузки для сценариев, сценарии имеют оконную область, это означает, что вам не нужно делать какие-то хакерские действия, чтобы получить к ним доступ из теневых домов. все хорошо - person vdegenne; 27.06.2017
comment
Спасибо @ballangddang - person Naga Sai A; 27.06.2017