For more than 2 hours, I'm facing the issue when using `hx-select` together with `hx-select-oob`.

So, what I want to achieve is to load the `#content` and footer (and `#navbar` because the `class="active"` thing) using `hx-boost` and `` tag. The `footer` is working properly, but the issue is appear on `#content` where component is overlapping and seems like ignoring the `hx-select`.

Here is the dummy html that represent my issue:

index.html

```html

Home | HTMX SWAP OOB


.wrapper {
background-color: #4e4e4e;
height: 100px;
width: 100%;
}

.nav-container, .container {
margin-left: 30px;
margin-right: 30px;
}

#navbar {
background-color: #000;
padding-top: 5px;
padding-bottom: 5px;
}

#navbar a {
list-style: none;
text-decoration: none;
color: #fff;
}

#navbar a.active {
font-weight: 900;
text-decoration: underline;
}

---

```

about.html

```html

About | HTMX SWAP OOB


.wrapper {
background-color: #4e4e4e;
height: 100px;
width: 100%;
}

.nav-container, .container {
margin-left: 30px;
margin-right: 30px;
}

#navbar {
background-color: #000;
padding-top: 5px;
padding-bottom: 5px;
}

#navbar a {
list-style: none;
text-decoration: none;
color: #fff;
}

#navbar a.active {
font-weight: 900;
text-decoration: underline;
}

---

```

---

My expectation is to load the `#content` response into the current `#content` but this is what I got:

```html

```

So, somehow the `#container` and the `#wrapper,#nav-container` from navbar component appended into the `` within the `#content` inside it instead of straight forward like this:

expectation

```html

```

---

### My Workaround

For now, I solve this using `hx-swap="none"` so by that I select all element using `hx-select-oob` only

```html

...

```

Not sure if this was an issue or just a feature but I really appreciate any response !!