Styling a Polymer element and its content inside nested Polymer elements - polymer

Question

I have this template in my code:
<template is="auto-binding" id="app">
<style>
core-header-panel core-toolbar{
height: 100px;
}
[drawer] div{
padding: 20px;
color: #fff;
}
[drawer] core-toolbar div{
font-size: 24px;
}
[main] div{
padding: 20px;
}
[main] core-toolbar {
background: #A319A3;
color: #fff;
font-size: 24px;
}
.login_dialog {
background: red
}
</style>
<core-drawer-panel>
<core-header-panel drawer>
<core-toolbar>
<div>Admin Managment</div>
</core-toolbar>
<div>
<core-menu selected="{{page}}" valueattr="data-category">
<core-submenu data-category="Dashboard" label="Dashboard">
<core-item label="Dashboard 1" horizontal="" center="" layout=""></core-item>
<core-item label="Dashboard 2" horizontal="" center="" layout=""></core-item>
<core-item label="Dashboard 3" horizontal="" center="" layout=""></core-item>
</core-submenu>
<core-submenu data-category="Topics" label="Topics" class="core-selected">
<core-item label="Topic 1" horizontal="" center="" layout=""></core-item>
<core-item label="Topic 2" horizontal="" center="" layout=""></core-item>
</core-submenu>
<core-submenu data-category="Favorites" label="Favorites">
<core-item label="Favorite 1" horizontal="" center="" layout=""></core-item>
<core-item label="Favorite 2" horizontal="" center="" layout=""></core-item>
<core-item label="Favorite 3" horizontal="" center="" layout=""></core-item>
</core-submenu>
</core-menu>
</div>
</core-header-panel>
<core-header-panel main>
<core-toolbar>
<core-icon-button icon="menu" core-drawer-toggle></core-icon-button>
<div>{{page}}</div>
</core-toolbar>
<core-pages selected="{{page}}" valueattr="data-category">
<section data-category="Dashboard">
<div>
Dashboard
<paper-action-dialog class="login_dialog" transition="core-transition-bottom" opened backdrop="" autoclosedisabled="">
<div>
<h1>Admin Login</h1>
<paper-input class="width100" floatingLabel label="Username"></paper-input>
<paper-input class="width100" floatingLabel label="Password"></paper-input>
<paper-button affirmative="" autofocus="" role="button" tabindex="0">Login</paper-button>
</div>
</paper-action-dialog>
</div>
</section><section data-category="Topics">
<div>Topics</div>
</section>
<section data-category="Favorites">
<div>Favorites</div>
</section>
</core-pages>
</core-header-panel>
</core-drawer-panel>
What is the best way to style this section of code:
<paper-action-dialog class="login_dialog" transition="core-transition-bottom" opened backdrop="" autoclosedisabled="">
<div>
<h1>Admin Login</h1>
<paper-input class="width100" floatingLabel label="Username"></paper-input>
<paper-input class="width100" floatingLabel label="Password"></paper-input>
<paper-button affirmative="" autofocus="" role="button" tabindex="0">Login</paper-button>
</div>
</paper-action-dialog>
I have tried to give it a class and change it but it doesn't seem to work. I have also looked up in the styling docs but nothing there is working for me.

Answer 1

You need to punch the shadow DOM to propagate down the styles. Something like this selector in the template style should work:
::host /deep/ paper-action-dialog.login_dialog {
...
}