Класс компонента: < /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]