Re: [csswg-drafts] [css-shared-element-transitions-1] when to update the pseudo element styles (#7812)

Summarizing an offline discussion:

1. It's ok to synchronously generate the UA stylesheet for the pseudo DOM when the developer callback is done and before resolving the ready promise. This ensures that developers have a hook in script to customize based on this style information.

   **Proposed Resolution**: Synchronously generate styles for pseudo-DOM after DomUpdateCallback and before resolving ready promise.

3. We will also need to re-generate the UA stylesheet after ResizeObserver (when all script mutations are done) to ensure the pseudo-elements reflect the state the DOM is painted with. For example if the DOM element's painting is at a size which is inconsistent with the pseudo-element's style (because its UA stylesheet is stale) then we'll get incorrect rendering.

   **Proposed Resolution**: Generate styles for pseudo-DOM after [step 14 of update the rendering](https://html.spec.whatwg.org/multipage/webappapis.html#update-the-rendering:~:text=For%20each%20fully%20active%20Document%20doc%20in%20docs%3A) of every frame after resolving ready promise.

5. It's unclear whether we should regenerate the UA stylesheet for all script APIs like getComputedStyle. The reason is implementation complexity. We'll need to run one style/layout pass over author DOM to compute the requisite state, then generate a UA stylesheet using these values, then trigger another style/layout pass for the pseudo-DOM.

   The downside is that style values on the pseudo-element observed by script will always be a frame late. For example, in the following case the style value will be wrong:

   ```js
      function prepareFirstFrame() {
         // Change the width of a tagged element.
         target.style.width = "100px";

         // This value is based on the stylesheet generated before resolving ready promise.
         console.log(window.getComputedStyle(document.documentElement, "::page-transition-container(target)").style.width);
      }

      async function doTransition() {
         await document.createDocumentTransition(...).ready;
         requestAnimationFrame(prepareFirstFrame);
      }
   ```

   It's possible that the the first frame of the new DOM depends on script callbacks which run during update the rendering (like ResizeObserver). So the developer won't be able to use that information in customizing their animations.

   **Proposed Resolution**: UA styles on the pseudo-DOM stay in sync with author DOM for any developer observable API after the ready promise is resolved.

-- 
GitHub Notification of comment by khushalsagar
Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/7812#issuecomment-1286272051 using your GitHub account


-- 
Sent via github-notify-ml as configured in https://github.com/w3c/github-notify-ml-config

Received on Thursday, 20 October 2022 23:31:25 UTC