I am still learning the ropes, so please bear with me...
Currently, I am attempting to customize a Polymer 2.0 custom element by utilizing an external stylesheet. However, for some reason, the styles from the external stylesheet are not being applied to the element.
This is the specific element that I am trying to style (web-app.html):
<link rel="import" href="../elements/Styles/style-web-app.html">
<dom-module id="web-app">
<template>
<div id="header-container" class="header-container">
<div id="logo">
<img id="Mono" class="logo" src="../img/mono_primary_white_RGB.png"
height="75px" width="75px" />
</div>
<div id="header">
<h1 id="title">ICR</h1>
</div>
</div>
<div id="tabs">
<paper-tabs selected="{{selected}}">
<paper-tab name="Name">Name</paper-tab>
<paper-tab name="Type">Type</paper-tab>
<paper-tab name="Usages">Usages</paper-tab>
</paper-tabs>
</div>
</template>
Below is the code from the external Stylesheet file (style-web-app.html):
<dom-module id="style-web-app">
<template>
<style>
:host{
#title {
font-size: 30px;
/* text-align: center; */
width: 500px;
color: #FFFFFF;
}
#header-container, #tabs {
background-color: #01579B;
display: flex;
color: #FFFFFF;
}
#header {
display: inline-block;
}
}
</style>
</template>
</dom-module>
Can someone point out where it seems to be going off track?
TIA