1

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

Supersharp
  • 29,002
  • 9
  • 92
  • 134
Emil Billberg
  • 83
  • 5

1 Answers1

1

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

Supersharp
  • 29,002
  • 9
  • 92
  • 134
  • Yes you are right it will work in shadow dom (only Chrome supporting right now). Does that mean we have to define unique names to all keyframe animations we create. I thought this was something Polymers shady dom handled for you behind the scenes? – Emil Billberg Oct 28 '16 at 10:23
  • Yes... or maybe you can try the shadycss polyfill (which will do that automatically) but I didn't test it with keyframes – Supersharp Oct 28 '16 at 10:29
  • Ok I will accept your answer then if this is the expected behaviour in shady dom. I have one more question though. If I use shadow dom and define the keyframe animation in the parent, it is still possible for me to use the keyframe animation in the child. This cannot be an expected behaviour in shadow dom? – Emil Billberg Oct 28 '16 at 10:36
  • I edited the previous example using shadow dom instead and define the keyframe animation in the parent element. Still, the child element (orange) animates. http://jsbin.com/vigarusama/edit?html,output – Emil Billberg Oct 28 '16 at 10:52
  • that means that this @-rule is inherited between shadows (which is a good practice for that purpose) – Supersharp Oct 28 '16 at 11:05
  • Yeah, it seems to be inherited like you said. I did not expect that to happen. I expected a custom element with shadow dom to be completely independent. But I guess you should always define the keyframe inside of your custom element anyways and not depend on inheriting from a parent. I appreciate your help this makes more sense to me now. – Emil Billberg Oct 28 '16 at 11:37
  • Actually there are many things inherited in Shadow DOM: the inherited by default CSS properties, like `background-color` (http://stackoverflow.com/a/38748679/4600982) or other @-rule like `@font-face` (http://stackoverflow.com/a/35879636/4600982) – Supersharp Oct 28 '16 at 12:08