1852834 - Can't set animation using ::part() from outside of component's shadow DOM

Status: RESOLVED FIXED

(Core :: CSS Transitions and Animations, defect)

Description

[Mark Striemer [:mstriemer]]

When using components with Shadow DOM you may end up with a parent component wanting to modify a child component's styles, using ::part(name).

This however does not work when setting an animation, since the @keyframes for the animation can't be passed into the shadow DOM of the child component.

In this example there should be a green box that spins, but it doesn't spin. Moving @keyframes to display-el makes it start spinning.

I don't know if this is supposed to work, but it seems like something that should be possible to do without modifying display-el.

// https://jsbin.com/didaladupi/edit?html,js,output
class WrapperEl extends HTMLElement {
  constructor() {
    super();
    this.attachShadow({ mode: "open" });
    this.shadowRoot.innerHTML = `
      <style>
        @keyframes spin {
          from { transform: rotate(0); }
          to { transform: rotate(360deg); }
        }

        display-el::part(icon) {
          animation: spin 1s linear infinite;
          background: green;
        }
      </style>
      <display-el></display-el>
    `;
  }
}
customElements.define("wrapper-el", WrapperEl);

class DisplayEl extends HTMLElement {
  constructor() {
    super();
    this.attachShadow({ mode: "open" });
    this.shadowRoot.innerHTML = `
      <style>
        div {
          width: 16px; height: 16px; background: red;
        }
      </style>
      <p><div part="icon"></div> Some text</p>
    `;
  }
}
customElements.define("display-el", DisplayEl);

Comment 1

[Emilio Cobos Álvarez (:emilio)]

Attachment: Bug 1852834 - Look for animations in all trees where the name might come from. r=boris,hiro,#style

This is mostly what we were doing, except this handles ::part()
correctly.

Comment 2

[Pulsebot]

Pushed by [e-mail]:
https://hg.mozilla.org/integration/autoland/rev/cb29b79c8842
Look for animations in all trees where the name might come from. r=boris

Comment 3

[Iulian Moraru]

Backed out for causing wpt failures on keyframes-004.html.
This failed on multiple platforms. So far, it failed on linux, osx and android.

• Push with failures

• Failure log

• Backout link

[task 2023-09-16T01:43:28.074Z] 01:43:28     INFO - TEST-START | /css/css-scoping/keyframes-004.html
[task 2023-09-16T01:43:28.084Z] 01:43:28     INFO - Closing window 9cf0bd54-1d4f-499c-8e40-84dd9c7c74b2
[task 2023-09-16T01:43:28.243Z] 01:43:28     INFO - 
[task 2023-09-16T01:43:28.243Z] 01:43:28     INFO - TEST-UNEXPECTED-PASS | /css/css-scoping/keyframes-004.html | @keyframes in shadow tree applies to the slotted element - expected FAIL
[task 2023-09-16T01:43:28.243Z] 01:43:28     INFO - TEST-INFO | expected FAIL
[task 2023-09-16T01:43:28.243Z] 01:43:28     INFO - TEST-OK | /css/css-scoping/keyframes-004.html | took 170ms
[task 2023-09-16T01:43:28.245Z] 01:43:28     INFO - PID 30214 | 1694828608245	Marionette	INFO	Stopped listening on port 55267
[task 2023-09-16T01:43:28.679Z] 01:43:28     INFO - PID 30214 | console.error: ({})
[task 2023-09-16T01:43:28.842Z] 01:43:28     INFO - Browser exited with return code 0
[task 2023-09-16T01:43:28.843Z] 01:43:28     INFO - Closing logging queue
[task 2023-09-16T01:43:28.843Z] 01:43:28     INFO - queue closed
[task 2023-09-16T01:43:28.856Z] 01:43:28     INFO - Application command: /builds/worker/workspace/build/application/firefox/firefox --marionette about:blank -profile /tmp/tmp4juae5t5
[task 2023-09-16T01:43:28.867Z] 01:43:28     INFO - Starting runner
[task 2023-09-16T01:43:29.462Z] 01:43:29     INFO - PID 30580 | ATTENTION: default value of option mesa_glthread overridden by environment.
[task 2023-09-16T01:43:29.476Z] 01:43:29     INFO - PID 30580 | 1694828609475	Marionette	INFO	Marionette enabled
[task 2023-09-16T01:43:29.530Z] 01:43:29     INFO - PID 30580 | ATTENTION: default value of option mesa_glthread overridden by environment.
[task 2023-09-16T01:43:29.547Z] 01:43:29     INFO - PID 30580 | 1694828609547	Marionette	INFO	Listening on port 42680
[task 2023-09-16T01:43:29.803Z] 01:43:29     INFO - PID 30580 | console.error: (new Error("Unexpected content-type \"text/plain;charset=US-ASCII\"", "resource://services-settings/Utils.sys.mjs", 399))
[task 2023-09-16T01:43:31.011Z] 01:43:31     INFO - PID 30580 | console.error: (new Error("Unexpected content-type \"text/plain;charset=US-ASCII\"", "resource://services-settings/Utils.sys.mjs", 399))
[task 2023-09-16T01:43:32.600Z] 01:43:32     INFO - PID 30580 | console.error: ({})
[task 2023-09-16T01:43:33.739Z] 01:43:33     INFO - PID 30580 | console.error: (new Error("Unexpected content-type \"text/plain;charset=US-ASCII\"", "resource://services-settings/Utils.sys.mjs", 399))
[task 2023-09-16T01:43:33.741Z] 01:43:33     INFO - PID 30580 | console.error: (new Error("Unexpected content-type \"text/plain;charset=US-ASCII\"", "resource://services-settings/Utils.sys.mjs", 399))
[task 2023-09-16T01:43:33.741Z] 01:43:33     INFO - PID 30580 | console.error: (new Error("Unexpected content-type \"text/plain;charset=US-ASCII\"", "resource://services-settings/Utils.sys.mjs", 399))
[task 2023-09-16T01:43:33.741Z] 01:43:33     INFO - PID 30580 | console.error: (new Error("Unexpected content-type \"text/plain;charset=US-ASCII\"", "resource://services-settings/Utils.sys.mjs", 399))
[task 2023-09-16T01:43:33.943Z] 01:43:33     INFO - TEST-START | /css/css-scoping/keyframes-005.html

Comment 4

[Pulsebot]

Pushed by [e-mail]:
https://hg.mozilla.org/integration/autoland/rev/30e5713cc250
Look for animations in all trees where the name might come from. r=boris

Comment 5

[Atila Butkovits]

https://hg.mozilla.org/mozilla-central/rev/30e5713cc250

Comment 6

[Web Platform Test Sync Bot [:wpt-sync] (Matrix: #interop:mozilla.org)]

Created web-platform-tests PR https://github.com/web-platform-tests/wpt/pull/42024 for changes under testing/web-platform/tests

Comment 7

[Web Platform Test Sync Bot [:wpt-sync] (Matrix: #interop:mozilla.org)]

Upstream PR merged by moz-wptsync-bot