@revoloo/cypress6
Version:
Cypress.io end to end testing tool
56 lines (45 loc) • 1.54 kB
HTML
<html>
<head>
<title>Dangling element</title>
</head>
<body>
<div>Some content</div>
</body>
<script>
// Simplified version of what vue-fragment do.
// https://github.com/y-nk/vue-fragment/blob/master/src/component.js
const freeze = (object, property, value) => {
Object.defineProperty(object, property, {
configurable: true,
get () {
return value
},
set (v) {
// eslint-disable-next-line no-console
console.warn(`tried to set frozen property ${property} with ${v}`)
},
})
}
// If you want to see what's going on here visually,
// check https://github.com/cypress-io/cypress/pull/6787
// 1. What vue does by default:
// Create component and append it to the DOM tree.
const parent = document.getElementsByTagName('body')[0]
const container = document.createElement('div')
container.classList.add('container')
const p = document.createElement('p')
p.innerText = 'hello world'
p.classList.add('hello')
parent.appendChild(container)
container.appendChild(p)
// 2. vue-fragment adds the p to the parent.
// but forcefully set the p's parentNode to container.
parent.appendChild(p)
freeze(p, 'parentNode', container)
// 3. vue-fragment removes container from the parent.
// but forcefully set the container's parentNode to parent.
parent.removeChild(container)
freeze(container, 'parentNode', parent)
</script>
</html>