Do not duplicate the root element when not using ID property. For example, without this PR, when simply targeting the HEAD tag it gets duplicated because there is no associated ID. This PR simply gives the selId variable a default value of empty string, which correlate it with the default value of empty string given to the ID property of the rootElement object by document.querySelector.

• There exists an issue discussing the need for this PR
• I added new tests for the issue I fixed or built
• I used make commit instead of git commit

Discussions here: #792 #540

This fix broke two other tests:

DOMSource.events() should catch bubbling events in a DocumentFragment
DOMSource.events() should catch non-bubbling events in a DocumentFragment with useCapture

These tests worked before because the root tag was duplicated since there was no ID assigned to either the root element nor the parent VDOM object. After fixing the "duplicate bug" the root tag was no longer duplicated causing the tests to fail.

...

return {
  DOM: xs.of(div([div('.clickable', 'Hello')])), // <-- no ID
};

...

const renderTarget = fragment.appendChild(document.createElement('div')); // <-- no ID

I added an ID to the root VDOM objects—now all tests pass.

...

return {
  DOM: xs.of(div('#bubpar',[div('.clickable', 'Hello')])), // <-- add ID 'bubpar'
};

Also, to get a working test I added a <footer> tag to the test index.html file, in order to be able to get a "clean" root element and parent VDOM object. My attempts to use createRenderTarget failed to test the fix, my guess is because dynamically adding a DOM object for the root element always created an (empty string) ID, rather than the needed undefined—and using the HEAD tag broke most tests.

I realize the broke "bubbling" tests showed me how to test the fix without adding the <footer> tag to the test index.html file. So I cleaned the test up.

Glad to be learning these tools so thanks for the guidance and let me know if I need to do anything different.