Веб -компонент, вызывающий смену макета ⇐ Javascript

[Anonymous]

Я создаю простой ванильный веб -сайт, и многие страницы моего веб -сайта имеют общий компонент (боковая панель), поэтому я создал веб -компонент для легко включать на все страницы. < /p>
Класс компонента: < /p>

Код: Выделить всё

//sidebar/index.js

class Sidebar extends HTMLElement {
connectedCallback() {
if(!this.querySelector("div")) {
this.innerHTML =
'' +
'    [url=/admin/home]Central Api[/url]' +
'    ' +
'    [list]' +
'        [*]' +
'            [url=/admin/home]Home[/url]' +
'        ' +
'        [*]' +
'            [url=/admin/users]Usuários[/url]' +
'        ' +
'    [/list]' +
'';
if(window.location.href.includes("/home")) {
this.querySelector("#home").classList.add("active");
} else if(window.location.href.includes("/user")) {
this.querySelector("#users").classList.add("active");
}
}
}
}

export const defineSideBar = () => {
customElements.define("x-sidebar", Sidebar);
}
< /code>
Как импортируется основной сценарий: < /p>


< /code>
и как основной сценарий загружает новый компонент < /p>
//main.js

import { defineSideBar } from "../../../components/sidebar/index.js";

const app = () => {
defineSideBar();

//... more code here but not related
};

document.addEventListener('DOMContentLoaded', app);
< /code>
Проблема состоит в том, что компонент вызывает сдвиг макета. < /p>
Совокупная метрика сдвига макета, предоставленная инструментами разработчика браузера < /p>
Что я уже пробовал: < /p>

  Call Screenbar () 

Подробнее здесь: [url]https://stackoverflow.com/questions/79701021/web-component-causing-layout-shift[/url]