Bug 300385

Created attachment 477026 [details] Native example of the described issue CSS transitions within the Shadow DOM are interrupted and reset unexpectedly when the content (Light DOM children) is replaced, but they work correctly in Firefox and Chrome. ## Steps to Reproduce: - Create a Web Component with Shadow DOM containing an element with CSS transition - Include a <slot> element in the Shadow DOM template - Place content in the slot from Light DOM - Simultaneously trigger: - A property change that starts a CSS transition on an element in Shadow DOM - A replacement of the slotted content (not just property updates, but full node replacement) ## Expected Result: The CSS transition in Shadow DOM should complete normally, independent of changes to slotted content. ## Actual Result: The CSS transition is interrupted and the element immediately jumps to the end state without animation. ## Environment: I have tested this on a few devices and the issue always occurs: ### Device 1 Safari Version: 18.0 (19619.1.26.111.10, 19619) macOS Version: 14.6.1 (23G93) ### Device 2 (Emulator) iPhone 15 Pro, iOS 17.5 ## Technical Notes: - The issue occurs specifically when slotted content nodes are replaced (e.g., replaceChild()) - Simple property updates to slotted content don't trigger the issue ## Real world impact This bug has severe implications for web applications using component-based page layouts. A common pattern is: ```html <main-layout> #shadow-root <main-menu activeItem="..."></main-menu> <slot></slot> <my-page> </main-layout> ``` When users navigate between pages, the <my-page> component in the slot is replaced, which breaks ALL animations in the main menu (highlighting active items, hover effects, transitions, etc.). ## Attachments - [Live demo using Lit framework](https://lit.dev/playground/#project=W3sibmFtZSI6ImFuaW1hdGlvbi1kZW1vLnRzIiwiY29udGVudCI6ImltcG9ydCB7aHRtbCwgY3NzLCBMaXRFbGVtZW50fSBmcm9tICdsaXQnO1xuaW1wb3J0IHtjdXN0b21FbGVtZW50LCBzdGF0ZX0gZnJvbSAnbGl0L2RlY29yYXRvcnMuanMnO1xuaW1wb3J0IHtjYWNoZX0gZnJvbSAnbGl0L2RpcmVjdGl2ZXMvY2FjaGUuanMnO1xuaW1wb3J0ICcuL3Nsb3QtZGVtby5qcyc7XG5cbkBjdXN0b21FbGVtZW50KCdhbmltYXRpb24tZGVtbycpXG5leHBvcnQgY2xhc3MgQW5pbWF0aW9uRGVtbyBleHRlbmRzIExpdEVsZW1lbnQge1xuICBzdGF0aWMgc3R5bGVzID0gY3NzYFxuICAgIGRpdiB7XG4gICAgICB3aWR0aDogMjAwcHg7XG4gICAgICBoZWlnaHQ6IDIwMHB4O1xuICAgIH1cbiAgYDtcblxuICBAc3RhdGUoKVxuICB0ZXN0ID0gZmFsc2U7XG5cbiAgcmVuZGVyKCkge1xuICAgIHJldHVybiBodG1sYFxuICAgICAgPGJ1dHRvbiBAY2xpY2s9JHt0aGlzLm9uQ2xpY2t9PkFuaW1hdGU8L2J1dHRvbj5cbiAgICAgIFxuICAgICAgPHNsb3QtZGVtbyA_dGVzdD0ke3RoaXMudGVzdH0-XG4gICAgICAgICR7dGhpcy50ZXN0ID9cbiAgICAgICAgICBodG1sYDxkaXYgc3R5bGU9XCJiYWNrZ3JvdW5kLWNvbG9yOiByZWRcIj48L2Rpdj5gIDpcbiAgICAgICAgICBodG1sYDxkaXYgc3R5bGU9XCJiYWNrZ3JvdW5kLWNvbG9yOiBibHVlXCI-PC9kaXY-YH1cbiAgICAgIDwvc2xvdC1kZW1vPmA7XG4gIH1cblxuICBvbkNsaWNrKCkge1xuICAgIHRoaXMudGVzdCA9ICF0aGlzLnRlc3Q7XG4gIH1cbn1cbiJ9LHsibmFtZSI6ImluZGV4Lmh0bWwiLCJjb250ZW50IjoiPCFET0NUWVBFIGh0bWw-XG48aGVhZD5cbiAgPHNjcmlwdCB0eXBlPVwibW9kdWxlXCIgc3JjPVwiLi9hbmltYXRpb24tZGVtby5qc1wiPjwvc2NyaXB0PlxuPC9oZWFkPlxuPGJvZHk-XG4gIDxhbmltYXRpb24tZGVtbz48L2FuaW1hdGlvbi1kZW1vPlxuPC9ib2R5PlxuIn0seyJuYW1lIjoicGFja2FnZS5qc29uIiwiY29udGVudCI6IntcbiAgXCJkZXBlbmRlbmNpZXNcIjoge1xuICAgIFwibGl0XCI6IFwiXjMuMC4wXCIsXG4gICAgXCJAbGl0L3JlYWN0aXZlLWVsZW1lbnRcIjogXCJeMi4wLjBcIixcbiAgICBcImxpdC1lbGVtZW50XCI6IFwiXjQuMC4wXCIsXG4gICAgXCJsaXQtaHRtbFwiOiBcIl4zLjAuMFwiXG4gIH1cbn0iLCJoaWRkZW4iOnRydWV9LHsibmFtZSI6InNsb3QtZGVtby50cyIsImNvbnRlbnQiOiJpbXBvcnQge2h0bWwsIGNzcywgTGl0RWxlbWVudH0gZnJvbSAnbGl0JztcbmltcG9ydCB7Y3VzdG9tRWxlbWVudCwgcHJvcGVydHl9IGZyb20gJ2xpdC9kZWNvcmF0b3JzLmpzJztcblxuQGN1c3RvbUVsZW1lbnQoJ3Nsb3QtZGVtbycpXG5leHBvcnQgY2xhc3MgU2xvdERlbW8gZXh0ZW5kcyBMaXRFbGVtZW50IHtcbiAgc3RhdGljIHN0eWxlcyA9IGNzc2BcbiAgICA6aG9zdCB7XG4gICAgICBkaXNwbGF5OiBibG9jaztcbiAgICB9XG4gIFxuICAgIHAge1xuICAgICAgY29sb3I6IGJsdWU7XG4gICAgICB0cmFuc2l0aW9uOiBjb2xvciAwLjVzIGVhc2UtaW4tb3V0O1xuICAgIH1cbiAgICBwLmFjdGl2ZSB7IGNvbG9yOiByZWQgfWA7XG5cbiAgQHByb3BlcnR5KHsgdHlwZTogQm9vbGVhbiB9KVxuICB0ZXN0ID0gZmFsc2U7XG5cbiAgcmVuZGVyKCkge1xuICAgIHJldHVybiBodG1sYFxuICAgICAgPHAgY2xhc3M9XCIke3RoaXMudGVzdCA_ICdhY3RpdmUnIDogJyd9XCI-SGVsbG8gV29ybGQhPC9wPlxuICAgICAgPHNsb3Q-PC9zbG90PlxuICAgIGA7XG4gIH1cbn1cbiJ9XQ) - Also, there is a native implementation (without any frameworks) in the attached HTML file.