Style modules not working in <slot> element

Flow
1

Hi,

I defined a style module src/my-style.html like:

<dom-module id="my-style">
	.header {
		width: 100%;
		height: 50px;
		background-color: #4679FA;
	}
</dom-module>

And another layout module like:

<link rel="import" href="src/styles/my-styles.html">
<dom-module id="layout">
	<template>
		<style include="my-styles">
		.....
		</style>
		<div class="header">
			<slot name="logo"></slot>
		</div>
		.....
	</template>
</dom-module>

However, when layout deployed, the background-color wasn’t shown as expected. Any advices of where went wrong?

Best regards,
Joey

2

src/styles/my-styles.html vs src/my-style.html?

3

Sorry for typo in the question. It should be src/styles/my-style.html. The file paths are correct in my code.

Best regards,
Joey

4

Another typo. src/styles/my-styles.html. Joey

5

Hi,

Here is what I found from trying. The “header” class doesn’t get effect when defining in polymer template. However, if I add the class to the div which is going to replace the , it works. I don’t know reason, but it works.

Best regards,
Joey

6

Did you also notice the typo of id="my-style" vs include="my-styles"?

7

Lots of typos. Thanks.