How do I style the content in a child element? - dart

Question

I have:
<x-dialog><p>Whatever</p></x-dialog>
The <p>Whatever</p> stuff is of course passed into the x-dialog element's <content></content> tags:
<polymer-element name="x-dialog">
<template>
<link rel="stylesheet" href="dialog.css">
<core-overlay id="overlay" layered backdrop opened="{{opened}}" autoCloseDisabled="{{autoCloseDisabled}}" transition="core-transition-center">
<content></content>
</core-overlay>
</template>
<script type="application/dart" src="dialog.dart"></script>
</polymer-element>
How and where do I style my <p>, i.e. the content passed to my element? Note that this content is itself in a child element, core-overlay in this case, but I don't think that made a difference (it was the same result when I moved it out of core-overlay).
The style guide at http://www.polymer-project.org/articles/styling-elements.html didn't get me to a solution (I'm assuming Dart is up to par w/ this JS guide).

Answer 1

If you want to add the style rules to your x-dialog element the related section in the styling guide are Styling distributed nodes
add this to your dialog.css
content::content p {
background-color: blue;
}
Otherwise you can style it like any child element of normal DOM elements
x-dialog p {
background-color: blue;
}