更改显示的自定义元素

Change custom element displayed

我制作了一个使用多个页面的网络应用程序。要从一页转到另一页,我使用的是 window.location.href。由于我不喜欢这种方法,所以我想使用自定义元素。我正在寻找改变当前显示的自定义元素的方法,例如,当我们按下下一步按钮时。请问有人知道类似的话题吗?

index.html :

<body>
<div id="root"></div>
</body>

index.js :

window.customElements.define('connection-view', Connection);
//other custom element defined here like profile, ...

var root = document.querySelector('#root');
root.innerHTML = '<connection-view></connection-view>'
//when the button login is pressed, have to change this to profile component

放一个根div然后用自定义元素标签改变他的innerHTML