eliott/ladybird
1
0
Fork 0
mirror of https://github.com/LadybirdBrowser/ladybird synced 2026-05-01 12:07:14 +02:00
Code Issues Packages Projects Releases Wiki Activity

LibWeb: Fix style inheritance for slotted elements

Browse Source 
Two issues prevented slotted elements from correctly inheriting
styles from their assigned slot:

1. Element::element_to_inherit_style_from() was skipping the slot
   element and returning the shadow host instead. This meant slotted
   elements inherited from the host, completely ignoring any styles
   on the slot itself.

2. When a slot element's style changed during the style tree walk,
   its assigned (slotted) nodes were never marked for recomputation.
   The tree walk follows the DOM tree, but slotted elements are DOM
   children of the shadow host, not the slot, so they were missed.

Fix (1) by returning the slot directly as the inheritance parent.
Fix (2) by marking assigned nodes dirty in update_style_recursively
when a slot's style changes.
This commit is contained in:
Andreas Kling
2026-02-12 20:12:12 +01:00
committed by Andreas Kling
parent 8804eb89e0
commit fb11732526
Notes: github-actions[bot] 2026-02-13 09:23:49 +00:00 
Author: https://github.com/awesomekling
Commit: https://github.com/LadybirdBrowser/ladybird/commit/fb117325263
Pull-request: https://github.com/LadybirdBrowser/ladybird/pull/7913
Reviewed-by: https://github.com/AtkinsSJ
4 changed files with 20 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
Tests/LibWeb/Text/input/css/getComputedStyle-targeted-style-update.html
View File

@@ -65,9 +65,6 @@
// 5. Slotted element: changing the slot's style must affect the slotted child,
// since the slot is the flat tree parent and inheritance follows the flat tree.
// FIXME: Ladybird doesn't currently propagate inherited style changes through
// slots to slotted elements. When that bug is fixed, these should show
// red and green respectively instead of black.
const shadowRoot = slotHost.shadowRoot;
const theSlot = shadowRoot.getElementById("the-slot");
theSlot.style.color = "red";