mirror of
https://github.com/LadybirdBrowser/ladybird
synced 2026-05-14 10:59:24 +02:00
6eeafd3d7a
The CSS Scoping spec says ::slotted() represents elements assigned "after flattening" to a slot. When a slot element is itself slotted into another slot (nested slots), the flattened tree resolves the chain so that the inner content appears in the outermost slot. Previously, we only collected ::slotted() rules from the directly assigned slot's shadow root. This meant that styles defined in an outer shadow DOM's ::slotted() rules would not apply to elements that were transitively slotted through intermediate slots. Fix this by walking up the slot assignment chain when collecting and matching ::slotted() rules, so that rules from every shadow root in the chain are considered.
36 lines
957 B
HTML
36 lines
957 B
HTML
<!DOCTYPE html>
|
|
<link rel="match" href="../expected/slotted-through-nested-slots-ref.html">
|
|
<p>Test passes if you see a green box below.</p>
|
|
<style>
|
|
* { margin: 0; padding: 0; }
|
|
</style>
|
|
<outer-host>
|
|
<div slot="content" class="item">FAIL</div>
|
|
</outer-host>
|
|
<script>
|
|
// outer-host has a shadow DOM that contains inner-host.
|
|
// inner-host has a shadow DOM with a ::slotted() rule.
|
|
// The <div> is slotted through: outer-host's slot -> inner-host's slot.
|
|
let outerRoot = document.querySelector('outer-host').attachShadow({ mode: 'open' });
|
|
outerRoot.innerHTML = `
|
|
<inner-host>
|
|
<slot name="content"></slot>
|
|
</inner-host>
|
|
`;
|
|
|
|
let innerRoot = outerRoot.querySelector('inner-host').attachShadow({ mode: 'open' });
|
|
innerRoot.innerHTML = `
|
|
<style>
|
|
.container ::slotted(.item) {
|
|
width: 100px;
|
|
height: 100px;
|
|
background: green;
|
|
color: green;
|
|
}
|
|
</style>
|
|
<div class="container">
|
|
<slot></slot>
|
|
</div>
|
|
`;
|
|
</script>
|