how to use part style in polymer?

[joo]

<style>
  x-foo::part(heading) {
    color: black;
    background: yellow;
  }
</style>


<polymer-element name="x-foo" noscript>
  <template>
    <h1 part="heading">I'm an x-foo!</h1>
  </template>
</polymer-element>


<x-foo></x-foo>

above code run meet expectation, but follow code not:

<style>
  x-foo::part(heading) {
    span {
      color: black;
      background: yellow;
    }
  }
</style>


<polymer-element name="x-foo" noscript>
  <template>
    <h1 part="heading"><span>I'm an span!</span> I'm an x-foo!</h1>
  </template>
</polymer-element>


<x-foo></x-foo>

Part style hooks are can not nested?

[sorvell]

::part has been removed from the spec in favor of the ^ and ^^ combinators.
Use:

  x-foo ^ .heading /* targets header elements inside x-foo's shadowRoots */

  body ^^ x-foo /* targets any x-foo in any nested shadowRoot */

  body ^^ x-foo ^ .heading /* targets any x-foo's heading in any nested
  shadowRoot */

On Mon, Dec 16, 2013 at 10:46 AM, joo [email protected] wrote:

<style> x-foo::part(heading) { color: black; background: yellow; }</style>

I'm an x-foo!

above code run meet expectation, but follow code not:

<style> x-foo::part(heading) { span { color: black; background: yellow; } }</style>

I'm an span! I'm an x-foo!

Part style hooks are can not nested?

—
Reply to this email directly or view it on GitHubhttps://github.com//issues/376
.

[joo]

Thanks sorvell, but i do not understand your example, there document links?

[sorvell]

Good question. I'm not sure what documentation exists for this yet. The ^
combinator descends one level of shadowRoot. In other words, x-foo ^ .bar
styles elements that match .bar inside x-foo's shadowRoot. The ^^
combinator styles all descendants, traversing into all shadowRoots. So,
body ^^ x-foo styles all x-foo's anywhere in any descendant of body or in
any shadowRoot, no matter how nested. Here's one quick writeup:

http://robdodson.me/blog/2013/11/15/the-cat-and-the-hat-css-selectors/

On Mon, Dec 16, 2013 at 11:27 PM, joo [email protected] wrote:

Thanks sorvell, but i do not understand your example, there document links?

—
Reply to this email directly or view it on GitHubhttps://github.com//issues/376#issuecomment-30731103
.

[joo]

Thanks sorvell, issue solving! but did not fully understand.

[ebidel]

Closing this as ::part is now gone. There's info on ^ and ^^ here: http://www.polymer-project.org/articles/styling-elements.html#style-fromoutside