Files
ladybird/Tests/LibWeb/Text/input/css/shadow-root-replacesync-slot-style-invalidation.html
Andreas Kling 928a5247ff LibWeb: Narrow stylesheet add/remove invalidation
Avoid broad document invalidation when adding or removing ordinary
document-owned or shadow-owned stylesheets. Reuse the targeted
StyleSheetInvalidation path for style rules, including shadow-host
escapes, pseudo-element-only selectors, and trailing-universal cases.

Keep the broad path for sheet contents whose effects are not captured
by selector invalidation alone, including @property, @font-face,
@font-feature-values, @keyframes, imported sheets, and top-level @layer
blocks. Broad-path shadow-root sheets still reach host-side consumers
through their active-scope effects.
2026-04-23 16:45:22 +02:00

23 lines
809 B
HTML

<!DOCTYPE html>
<script src="../include.js"></script>
<div id="host"><span id="slotted">slotted</span></div>
<script>
test(() => {
const host = document.getElementById("host");
const slotted = document.getElementById("slotted");
const shadowRoot = host.attachShadow({ mode: "open" });
const sheet = new CSSStyleSheet();
shadowRoot.innerHTML = "<slot></slot>";
shadowRoot.adoptedStyleSheets = [sheet];
println(`before replaceSync: ${getComputedStyle(slotted).color}`);
sheet.replaceSync("slot { color: rgb(255, 0, 0); }");
println(`after slot replaceSync: ${getComputedStyle(slotted).color}`);
sheet.replaceSync("");
println(`after slot replaceSync removal: ${getComputedStyle(slotted).color}`);
});
</script>