Skip to content

Instantly share code, notes, and snippets.

@rniwa

rniwa/slotchange-removal.html

Created August 30, 2018 23:45
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save rniwa/1a24c77317a50785ae8885e58f35966c to your computer and use it in GitHub Desktop.
Save rniwa/1a24c77317a50785ae8885e58f35966c to your computer and use it in GitHub Desktop.
Download ZIP
Demonstrating the problem that the setter of textContent creates a superfluous slotchange events
Raw
slotchange-removal.html
<!DOCTYPE html>
<html>
<body>
<pre id="result"></pre>
<script>
async function createTree(shadowContent)
{
const host = document.createElement('div');
host.innerHTML = '<span></span>';
const shadowRoot = host.attachShadow({mode: 'closed'});
shadowRoot.innerHTML = shadowContent;
await Promise.resolve();
const targets = [];
for (const existingSlots of shadowRoot.querySelectorAll('slot'))
existingSlots.addEventListener('slotchange', (event) => targets.push(event.target.id));
shadowRoot.targets = targets;
log('shadowRoot', shadowRoot.innerHTML);
return shadowRoot;
}
function log(label, text) {
document.getElementById('result').textContent += label + ': ' + text + '\n';
}
async function runTests() {
let shadowRoot = await createTree('<p><slot id="slot1"></slot><b><slot id="slot2"></slot></b><slot id="slot3"></slot></p>');
shadowRoot.querySelector('p').remove();
await Promise.resolve();
log('Removing p results in slotchange events on', JSON.stringify(shadowRoot.targets));
shadowRoot = await createTree('<p><slot id="slot1"></slot><slot id="slot2"></slot><slot id="slot3"></slot></p>');
shadowRoot.querySelector('p').textContent = '';
await Promise.resolve();
log('Setting p.textContent to "" results in slotchange events on', JSON.stringify(shadowRoot.targets));
}
runTests();
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment