Open Bug 1784204 Opened 2 years ago Updated 2 years ago

slotchange event isn't fired on a slot if one of the assigned nodes is assigned to a slot in another shadow tree

Categories

(Core :: DOM: Core & HTML, defect)

Product:
Core
Component:
DOM: Core & HTML
Type:
defect

Tracking

()

People

(Reporter: rniwa, Unassigned)

References

(Blocks 1 open bug,
URL
)

Details

Consider the following markup. Firefox doesn't fire any slotchange events whereas Chrome fires slotchange events in the expected order:

<!DOCTYPE html>
<html>
<body>
<div id="hostA"><div id="childA1"></div><div id="childA2"></div><div id="childA3"></div><div id="childA4"></div></div>
<div id="hostB"><div id="childB1"></div><div id="childB2"></div></div>
<div id="hostC"></div>
<script src="/resources/testharness.js"></script>
<script>

promise_test(async () => {
    let logs = [];
    function logger(event) { logs.push(this); }

    const shadowRootB = hostB.attachShadow({mode: 'closed', slotAssignment: 'manual'});
    const slotB = shadowRootB.appendChild(document.createElement('slot'));
    slotB.id = 'B';
    slotB.assign(childB1, childB2);
    slotB.addEventListener('slotchange', logger);

    const shadowRootA = hostA.attachShadow({mode: 'closed', slotAssignment: 'manual'});
    const slotA1 = shadowRootA.appendChild(document.createElement('slot'));
    slotA1.id = 'A1';
    slotA1.assign(childA1, childA2);
    slotA1.addEventListener('slotchange', logger);

    const slotA2 = shadowRootA.appendChild(document.createElement('slot'));
    slotA2.id = 'A2';
    slotA2.assign(childA3, childA4);
    slotA2.addEventListener('slotchange', logger);

    await new Promise((resolve) => setTimeout(resolve, 0));

    assert_array_equals(logs, [slotB, slotA1, slotA2]);
    logs = [];

    const slotC = document.createElement('slot');
    slotC.assign(childB1, childA3, childA2);

    await new Promise((resolve) => setTimeout(resolve, 0));
    assert_array_equals(logs, [slotB, slotA2, slotA1]);
});

</script>
</body>
</html>

This is actually a bug in the spec: https://github.com/whatwg/html/issues/8179

Blocks: shadowdom
You need to log in before you can comment on or make changes to this bug.