Skip to content
Fix Code Error

app-theme.html not working in custom element

May 1, 2021 by Code Error
Posted By: Anonymous

I’m using polymer to create a web app, and I’m using a custom element named side-bar, and I have an app-theme.html that has all the styles for the app. But when I try to put the side-bar in it’s own template in side-bar.html and import app-theme.html it doesn’t use the styles that are in app-theme.html, but if I keep it in index.html it uses the app-theme. I have tried converting app-theme.html to css and use

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

But native css can’t use custom styles that polymer uses. How would I go on about doing this? Here is my code:

side-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="submitChatRequest" 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>

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

What it looks like in the custom element
What it looks like in the custom element

What it looks like when it’s not in the custom element and just in index.html, what it’s suppose to look like.
What it looks like when it's not in the custom element and just in index.html, what it's suppose to look like.

Solution

Importing the app-theme.html like this will always apply the style to the main document, and won’t be scoped to style the local dom of your element, so including the css in your element is the way you go.

You can either do this by including the style directly in your element…

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

…or as you tried by having it in an external css file, in which case you would have to use a special way to include the stylesheet to make sure all the custom style features work:

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

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

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

  </script>
</dom-module>
Answered By: Anonymous

Related Articles

  • How to solve Internal Server Error in Next.Js?
  • Error: undefined Unable to resolve module
  • Aurelia UX showcase app fails to load
  • How to prevent scrolling the whole page?
  • Polymer Dom-Repeat Binding to Content
  • Comparison between Corona, Phonegap, Titanium
  • Am I paranoid? "Brutally" big Polymer website after…
  • For-each over an array in JavaScript
  • How do I keep only the first map and when the game is…
  • Multipart File Upload Using Spring Rest Template + Spring…

Disclaimer: This content is shared under creative common license cc-by-sa 3.0. It is generated from StackExchange Website Network.

Post navigation

Previous Post:

aurelia browser loading main.ts not main.js

Next Post:

How to style Angular4 custom components based on attribute?

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

  • Get code errors & solutions at akashmittal.com
© 2022 Fix Code Error