Hero-p CoreAnimatedPages attribute

While I was looking at the core-animated-pages

examples , I noticed the attribute hero-p

on some elements.

I can't find any mention of this in the documentation .

What does this attribute hero-p



source to share

1 answer

When a hero transition occurs, elements with the hero-p attribute get the following rules (see core-animated-pages / transition / hero-transition.html):

  polyfill-next-selector { content: ':host > * [hero-p]'; }
  ::content > * /deep/ [hero-p] {
    -webkit-transition: box-shadow 100ms ease-out;
    transition: box-shadow 100ms ease-out;

  polyfill-next-selector { content: ':host > [animate] [hero-p]'; }
  ::content > [animate] /deep/ [hero-p] {
    box-shadow: none !important;


Which removes any shadow they applied when performing the transition.



All Articles