enabling ShadowDOM not working with aurelia 2

Question

I created a new aurelia app using both cli and npx

au2 new 
//or
npx makes aurelia

both of these commands created the same boilerplate code.

Next time, you can try to create similar project in silent mode:
 npx makes aurelia new-project-name -s typescript,shadow-dom,sass,cypress,app-with-router 

but once you run the app, it renders the page in browser but console displays a warning

about.html:1 WARN: ShadowDOM is disabled for /my-app/src/about.html. ShadowDOM requires element name to contain at least one dash (-), you have to refactor <about> to something like <lorem-about>.

warning is fair enough. so I renamed the about.html to about-page.html

and now I have an error in the console.

projectors.js:41 Uncaught (in promise) DOMException: Failed to execute 'attachShadow' on 'Element': Shadow root cannot be created on a host which already hosts a shadow tree.
    at new ShadowDOMProjector (http://localhost:9000/entry-bundle.js:19668:32)
    at HTMLProjectorLocator.getElementProjector (http://localhost:9000/entry-bundle.js:19643:20)
    at Controller.hydrateCustomElement (http://localhost:9000/entry-bundle.js:31845:43)
    at Function.forCustomElement (http://localhost:9000/entry-bundle.js:31780:20)
    at ViewportContent.loadComponent (http://localhost:9000/entry-bundle.js:15138:92)
    at Viewport.canEnter (http://localhost:9000/entry-bundle.js:15958:32)
    at async http://localhost:9000/entry-bundle.js:13433:38
    at async Promise.all (index 0)
    at async Router.processNavigations (http://localhost:9000/entry-bundle.js:13432:27)

which seems like a router trying to create a conflicting shadowDOM as the error says.

but for the life of me I am unable to figure out how to fix this error.

any clues?

if you would like to give it a test run

https://github.com/jsyspk/au2-shadow-dom-sample