Description
Version
1.0.0-beta.21
Reproduction link
https://github.com/benm-eras/VueDemo
Steps to reproduce
I have used the latest version of Vue CLI to scaffold and app, and added a simple component to demonstrate my issue. Clone the repo, then just run the tests with yarn run test. The mounted function on MyComponent.vue will write a couple of NodeLists to the console. The first is all the children of the root element, the second should be only those with the page class.
What is expected?
In both tests 3 div elements with the class page are added to the default slot. In the second test a single div with the class shade is added before the pages. In both tests it would be expected that .querySelectorAll(".page") would return the 3 .page divs, and they would be printed to the console.
What is actually happening?
In the second test .querySelectorAll(".page") is not returning anything at all. Printing all the child nodes to the console (the first console.info(...) in each test) shows the following:
NodeList {
'0': HTMLDivElement { _prevClass: 'shade' },
'1': HTMLDivElement { _prevClass: 'shade' },
'2': HTMLDivElement { _prevClass: 'shade' },
'3': HTMLDivElement { _prevClass: 'shade' }
}
I don't know what _prevClass really represents, but if I change the selector from .querySelectorAll(".page") to .querySelectorAll(".shade") it actually returns all 4 divs still, so I assume its the class of the returned elements.
Changing the class of the first div added to the slot or removing it entirely results in the same thing (but different class in the output obviously).
It should be noted that the component works as expected when viewed in the browser. Run yarn run serve then click on MyComponent at the top of the page. Open the dev tools and you'll see the node lists written to the console.