Styling issue of combining template and Element API

Hi,

I have a polymer template which has codes like:

<vertical-sidebar id="sidebar_container" class="sidebar_container">
	<div class="sidebar_item">
		<div class="sidebar_item_title">[[sideBarTitle]
]<img src="/images/sidebar_collapse.gif" title="" on-click="_toggleSideBar"/></div>
	</div>
	<slot name="generic_sidebar_user" class="sidebar_item"></slot>
</vertical-sidebar>

and I use element APIs to generate the slotted elements. The question is that the slotted elements I created using element APIs could not use the styles defiend in the template, but the custom styles defined in the document level. The static element defined in the template could not apply the custom styles defined in the documents level. Therefore, for the same component (which is “vertical-sidebar” in the above case), I need to define styles in different places. Any ways that I can consolidate the styles definitions and the whole project looks cleaner.

Many thanks,
Joey