Search code examples
animationpolymerweb-componentshadow-domshady-dom

Polymer @keyframes leak out

I have a simple Polymer app consisting of two elements. The first, x-app, element has the second element, x-inner, inside its local dom. Inside the x-inner element I define a keyframe animation that is called spin that I apply on the :host. Inside the x-app I also apply the same animation name, spin, but the keyframe animation is not defined. Although, the spin animation works on both elements. It seems to me that the @keyframe leaks out from the inner element.

Is this the behaviour that is expected? Or do I define the @keyframe animation incorrectly?

Please see my jsbin for an example: jsbin

Solution

  • It is because you are using "Shady" DOM, which doen't really isolate the components CSS styles, as a real Shadow DOM would do.

    Try defining shadow instead of shady and it will work.

    jsbin example