app-theme.html 在自定义元素中不起作用

Question

我正在使用 polymer 创建一个网络应用程序，我正在使用一个名为 side-bar 的自定义元素，并且我有一个 app-theme.html 包含该应用程序的所有样式。但是当我尝试将 side-bar 放入它自己的 side-bar.html 模板中并导入 app-theme.html 时，它不会使用 app-theme.html 中的样式，但如果我保留它在 index.html 中，它使用应用程序主题。我尝试将 app-theme.html 转换为 css 并使用

<style is="custom-style">
    @import url("path/to/theme.css");
</style>

但是原生 css 不能使用 polymer 使用的自定义样式。我将如何继续这样做？这是我的代码：

边-bar.html:

<link rel="import" href="../bower_components/polymer/polymer.html">
<link rel="import" href="../styles/app-theme.html">
<link rel="import" href="elements.html">
<dom-module id="side-bar">
      <template>
        <paper-tabs id="tabs" selected="0" scrollable>
          <paper-tab>NAVIGATION</paper-tab>
          <paper-tab>FRIENDS</paper-tab>
          <paper-tab>NOTIFICATIONS</paper-tab>
        </paper-tabs>
        <div>
           <iron-pages selected="0">
              <div id="navigation">
                  <paper-menu id="navMenu">
                      <paper-icon-item>
                          <iron-icon icon="home" item-icon></iron-icon>
                          <paper-item-body two-line selected>
                          <div>Home Page</div>
                          <div secondary>Site home page</div>
                      </paper-item-body>
                  </paper-icon-item>
                  <paper-icon-item>
                      <iron-icon icon="speaker-notes" item-icon></iron-icon>
                      <paper-item-body two-line>
                          <div>Chats</div>
                          <div secondary>Chats you are in.</div>
                      </paper-item-body>
                  </paper-icon-item>
                      <paper-icon-item>
                          <iron-icon icon="question-answer" item-icon></iron-icon>
                          <paper-item-body two-line>
                              <div>Forum</div>
                              <div secondary>Site Name Forum</div>
                          </paper-item-body>
                      </paper-icon-item>
                      <paper-icon-item>
                          <iron-icon icon="archive" item-icon></iron-icon>
                          <paper-item-body two-line>
                              <div>News & Announcements</div>
                              <div secondary>News & Announcements Archive</div>
                          </paper-item-body>
                      </paper-icon-item>
                      <paper-icon-item onclick="document.querySelector('#poll').toggle();">
                          <iron-icon icon="help" item-icon></iron-icon>
                          <paper-item-body two-line>
                              <div>Poll</div>
                              <div secondary>Most recent site poll.</div>
                          </paper-item-body>
                      </paper-icon-item>
                  </paper-menu>
                  <iron-collapse id="poll">
                      <div class="horizontal center-justified layout">
                          <div>
                              <get-poll></get-poll>
                          </div>
                      </div>
                      <center><paper-button onclick="submitForm()" class="ripple" tabindex="0"><iron-icon icon="check" style="margin-right:5px;">    </iron-icon>Submit</paper-button></center>
                      <br />
                  </iron-collapse>
                  </div>
              <div id="friend">
                  <paper-icon-item>
                      <div class="avatar" style="background:url(images/gXegaUt.png)" item-icon></div>
                      <paper-item-body two-line>
                          <div>Joseph</div>
                          <div secondary>Online</div>
                      </paper-item-body>
                      <paper-checkbox></paper-checkbox>
                  </paper-icon-item>
                  <friends-lists></friends-lists>

                  <center><paper-button id="sumbitChatRequest" onclick="submitForm()" class="ripple" tabindex="0"><iron-icon icon="speaker-notes" style="margin-right:5px;"></iron-icon>Chat With Selected Users</paper-button></center>
              </div>
              <div id="notification">Page 3</div>
          </iron-pages>
      </div>
    </template>
</dom-module>
<script>
  Polymer({
    is: "side-bar"
  });
</script>

应用-theme.html

<link rel="import" href="../bower_components/polymer/polymer.html">
<style is="custom-style">
    :root {
        --dark-primary-color:       #303F9F;
        --default-primary-color:    #3F51B5;
        --light-primary-color:      #C5CAE9;
        --text-primary-color:       #FFFFFF;
        --accent-color:             #FF4081;
        --primary-background-color: #C5CAE9;
        --primary-text-color:       #212121;
        --secondary-text-color:     #727272;
        --disabled-text-color:      #BDBDBD;
        --divider-color:            #B6B6B6;
    }

#mainToolBar {
--paper-toolbar: {
     background-color: var(--default-primary-color);\
     color: rgba(255,255,255,.84)
     font-size: 18px;
     padding: 0 0 0 16px;
     font-weight: 500;
     color: #fff;
     margin: 0;
 };
}

#userHeader {
--paper-toolbar: {
     background: #616161;
     font-size: 18px;
     padding: 0 0 0 16px;
     font-weight: 500;
     color: #fff;
     margin: 0;
 };
}
#drawerPanel {
--paper-drawer-panel-left-drawer-container: {
     background-color: #fff;
     /*-webkit-box-shadow: 4px 0px 5px 0px rgba(173,173,173,0.87);
     -moz-box-shadow: 4px 0px 5px 0px rgba(173,173,173,0.87);
     box-shadow: 4px 0px 5px 0px rgba(173,173,173,0.87);*/
 };
}
#drawer paper-tab {
--paper-tab-ink: {
     background-color: var(--accent-color);
     color: var(--accent-color);
 };
}
#drawer paper-tabs {
--paper-tabs-selection-bar-color: {
     color: #fff;
     background-color: #fff
 };
--paper-tabs: {
     background-color: var(--dark-primary-color) /*rgba(0, 0, 0, 0.5)*/;
     color: white;
     width: 100%
 box-shadow: inset 0px 5px 6px -3px rgba(0, 0, 0, 0.4);
 };
}
#navMenu {
--paper-menu-background-color: {
     background-color: #eee;
 };
--paper-menu-selected-item: {
     color: var(--dark-primary-color);
     background-color:rgba(225, 225, 225, 0.2);
 };

}
</style>

它在自定义元素中的样子

当它不在自定义元素中而仅在 index.html 中时它看起来像什么，它应该像什么。

Answer 1

像这样导入 app-theme.html 将始终将样式应用于主文档，并且不会限定为元素的本地 dom 样式，因此包括 css在你的元素中就是你要走的路。

您可以通过直接在您的元素中包含样式来做到这一点...

<dom-module id="side-bar">
  <style>
    #navMenu {
      --paper-menu: {
         background-color: #eee;
      };
      --paper-menu-selected-item: {
        color: var(--dark-primary-color);
        background-color:rgba(225, 225, 225, 0.2);
      };
    }
    ...
  </style>
  <template>
    ....
  </template>
  <script>

  </script>
</dom-module>

...或者如您尝试将其放在外部 css 文件中一样，在这种情况下，您必须使用 special way to include the stylesheet 来确保所有自定义样式功能正常工作：

<dom-module id="side-bar">

  <link rel="import" type="css" href="side-bar.css">

  <template>
    ....
  </template>
  <script>

  </script>
</dom-module>

app-theme.html 在自定义元素中不起作用

app-theme.html not working in custom element

html

css

polymer

polymer-1.0