Source code
Revision control
Copy as Markdown
Other Tools
<!DOCTYPE HTML>
<meta charset="utf-8" />
<title>HTML partial updates: patching inside a declarative shadow tree</title>
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<div id="placeholder">Old content in light DOM</div>
<div id="container">
<template shadowrootmode="open">
<section id="placeholder">Old content in shadow DOM</section>
<template patchfor="placeholder">New content</template>
</template>
</div>
<script>
test(() => {
assert_equals(document.querySelector("#placeholder").innerText, "Old content in light DOM");
const {shadowRoot} = document.querySelector("#container");
assert_equals(shadowRoot.querySelector("#placeholder").innerText, "New content");
assert_equals(shadowRoot.querySelector("template[patchfor=placeholder]"), null);
}, "<template patchfor> inside a <template shadowrootmode> should apply directly to its target");
</script>