template-patchfor-innerHTML-ambiguous.html

Enable keyboard shortcuts

<!DOCTYPE HTML>

<meta charset="utf-8" />

<title>HTML partial updates: patching via innerHTML with ambiguous target</title>

<link rel=help href="https://github.com/WICG/declarative-partial-updates">

<script src="/resources/testharness.js"></script>

<script src="/resources/testharnessreport.js"></script>

<div id="container"></div>

<div id="placeholder">Old content in light DOM</div>

<script>

// The ID "container" appears both after the container on which innerHTML is

// set, and in created fragment. Which element should be updated depends on the

// details of how this is spec'd.

test(() => {

    const container = document.getElementById("container");

    const outerPlaceholder = document.getElementById("placeholder");

    container.innerHTML = `<div id="placeholder">Old content in innerHTML</div><template patchfor="placeholder">New content</template>`;

    const innerPlaceholder = container.firstChild;

    assert_equals(innerPlaceholder.id, "placeholder");

    // This is the surprising part, that the outer placeholder is updated even

    // though it appears after the updated placeholder in the final tree order.

    assert_equals(outerPlaceholder.textContent, "New content");

    assert_equals(innerPlaceholder.textContent, "Old content in innerHTML");

}, "<template patchfor> in innerHTML patching inner element");

</script>