While developing a web app with polymer, I encountered an issue with a custom element called side-bar. I have a separate file named app-theme.html where all the styles for the app are defined. However, when I moved the side-bar element into its own template in side-bar.html and imported app-theme.html, the styles from app-theme.html were not being applied. Surprisingly, when I kept the side-bar in the index.html, the app-theme styles were working perfectly. I attempted to convert app-theme.html to CSS and used the following code:
<style is="custom-style">
@import url("path/to/theme.css");
</style>
Unfortunately, native CSS cannot utilize the custom styles that Polymer uses. What would be the best approach to resolve this issue? Below is the code snippet:
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>
<!-- Content of the side bar -->
</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">
<!-- Custom theme styles -->
</style>
Custom element appearance: https://i.sstatic.net/4dOow.png
Expected appearance when the custom element is not used and only in index.html:
https://i.sstatic.net/9Di5n.png