How do I style the content in a child element?

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;
}