Animations for slotted styles are ignored

[loucyx]

Description

When an animation defined on the current element is applied in a ::slotted() element, it's ignored. Maybe because of out of scope keyframes.

Live Demo

http://plnkr.co/edit/uHlKBlQxmLSuoVmi1KYQ?p=preview

Steps to Reproduce

1. Create an element and add any animation keyframes.
2. Use that animation on a ::slotted() style block.
3. The animation is ignored (any other styles are applied as expected).

Expected Results

The animation should play as expected (the keyframes should be in the scope of the slotted styles).

Actual Results

The animation is ignored.

Browsers Affected

• [ x ] Chrome

Versions

• Polymer: v2.0.1
• webcomponents: v1.0.1

[arthurevans]

I think you're exactly right, it's a scope problem. The keyframes are defined inside the shadow DOM, and the slotted content is outside of it.

To verify this, you can move the keyframes definition to the parent scope (in this case, index.html) and you'll see the animation.

I realize that's not a very satisfying answer, but styling slotted content is pretty limited.

The other alternative to moving the keyframes out of the shadow DOM is to move the animation into shadow DOM. The simplest way to do this is to place the animation on :host itself.

http://plnkr.co/edit/bvEyIlcoE4Re6iQkUVro?p=preview

Alternately, wrap the slot in a container element, like a <div>, and animate the div. This is how elements like iron-dropdown and friends animate their distributed children.

[loucyx]

I already moved the animation to the :host, my concern was mainly with "consistency", in the matter that some styles are applied as expected on the ::slotted elements, while some other styles aren't. If this will not be "fixed" because of platform limitations, it'll be good to add a warning of some kind to the ::slotted styles section of the docs.

[dfreedm]

@lukeshiru Yeah, I'm not sure if this is just a platform bug, or a fundamental limitation of the spec. I'll reach out to the chrome team to see what can be done here.

[dfreedm]

@arthurevans fwiw, using display: inline-block on the slot container is a little closer: http://plnkr.co/edit/O7eeFKQjHMvjce7K8aqX?p=preview

[govis]

Same issue here. Suggested workaround don't seem to work when for applying animation based on attributes of the slotted content:

::slotted(*) {
    @keyframes rotate {
        to { transform: rotate(360deg); }
    }
}

::slotted([animation="rotate"]) {
    animation: rotate;
}

[loucyx]

@govis I ended up applying the animation to the host ... the alternative solution is to wrap the <slot> element with something like a <span> or a <div> and apply the animation to that.

[govis]

I am trying to apply animations to the slotted content. My current workaround is to put keyframes in a separate dom-module and then use style include in components that are distributed through the slot.

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

[jlove73071]

Still an issue guys.

[castastrophe]

Cross-posting this here if it's helpful: https://codepen.io/castastrophe/pen/rNKjLVj?editors=0010

This shows defining the keyframe in the shadow DOM styles and referencing them on either ::slotted(*) or slot content. Appears to be working? Are there adjustments to the demo I can make to replicate the issue you were seeing?

[castastrophe]

Could part of the issue be how the keyframe is defined? It's a CSSRule so it can't be nested inside a selector. i.e.,

::slotted(*) {
    @keyframes rotate {...}
}

Is not valid but:

:host ::slotted(*) {
   animation: 3s infinite rotate;
}
@keyframes rotate {...}

would be valid.

[castastrophe]

Great discussion the summary of which is that results vary by browser on whether or not a shadow DOM-defined keyframe can be applied to ::slotted or slot. Also variances in whether a light DOM-defined keyframe can be applied.