Search code examples
transitionpolymerweb-component

polymer hero transition in shadow dom

I have a hero transition sitting within a polymer element. The documentation states that the transition will work for up to 1 level of shadow root. (https://www.polymer-project.org/docs/elements/core-elements.html#core-animated-pages). However, it doesn't work.

If I move the element outside of the shadow dom, it works as expected.

<polymer-element name="x-el" noscript>
  <template>
    <div hero-id="hero-test" hero> GO HERO </div>
  </template>
</polymer-element>

<core-animated-pages transitions="hero-transition cross-fade">
        <section>
            // works
            <div hero-id="hero-test" hero> GO HERO </div>

            // doesn't work
            <x-el></x-el>
        </section>

        <section>
            <div hero-id="hero-test" hero> YAY </div>
        </section>
</core-animated-pages>

Live demo: http://codepen.io/nicolasrannou/pen/zxNYMw

Am I missing something?

Thanks

Solution

  • Just remove "section" outside your custom element then it's gonna work!

        <!--<section>-->
        <x-el onclick="stuff(1);"></x-el>
    <!--</section>-->

    Check this: http://codepen.io/anon/pen/yygydK

    Goodluck