this.innerHTML
???!<script>
customElements.define('custom-header', class extends HTMLElement {
connectedCallback() {
const shadow = this.attachShadow({mode: "open"});
shadow.innerHTML =
`
<link rel="stylesheet" href="css/Base.css">
<link rel="stylesheet" href="components/Header/css/Header.css">
<header class="Header">
<div class="HeaderBody">
<a class="Logo waves-effect waves-teal" href="#" data-LogoText="{Finsweet"></a>
<input class="HeaderMobileMenuButton" type="checkbox" aria-label="Мобильное меню" data-ToolTip="Мобильное меню">
<div class="HeaderMenu">
<nav class="NavigationRow">
<ul class="ListRow">
<li class="ListRowItem">
<a href="#" class="HeaderLink waves-effect waves-light"><span class="HeaderLinkText">Home</span></a>
</li>
<li class="ListRowItem">
<a href="#" class="HeaderLink waves-effect waves-light"><span class="HeaderLinkText">Blog</span></a>
</li>
<li class="ListRowItem">
<a href="#" class="HeaderLink waves-effect waves-light"><span class="HeaderLinkText">About us</span></a>
</li>
<li class="ListRowItem">
<a href="#" class="HeaderLink waves-effect waves-light"><span class="HeaderLinkText">Contact us</span></a>
</li>
<li class="ListRowItem">
<button class="Button ButtonWhite waves-effect" type="button"><span class="ButtonText">Subscribe</span></button>
</li>
</ul>
</nav>
</div>
</div>
</header>
`
}
});
</script>
<custom-header></custom-header>
но почему дальше у нас сначала идет лог и рефа ребенка, а только потом из рефа родителявсё дело в том что отрисовка синхронная, а useEffect - они асинхронные, поэтому они отрабатывают вообще самыми последними после того как компонент уже отрисовался, а на счёт почему у ребенка быстрее - логично же, если бы родитель отрисовывался сначала а потом все дети - то был бы п***ец
так же прими версию вопроса
на сколько я понял из вопроса, это то что твоя проблема в том что ты запихал всё в один запрос хотя толку от этого, нужно просто найти сначала Offer по id например, и на основе этого офера, получить все Goal - отсортировав их а так же задать лимит