I am using Cobalt and trying to load a page and insert it into a specific div in the body. The page contents load and render correctly. The problem is when swiper tries to initialize it looks up an element, and finds it, but the children are unreadable, and it contains an extra entry in the array "". When I run the same code in Chrome it works correctly.
Is this possibly a bug in Cobalt or possibly a result of how I am inserting the fetched content? Any advice would be appreciated.
I am using Cobalt 25.master.0.
Cobalt Result
Chrome Result
Relevant Code Snippets
index.html
...
<body>
<div id="app"></div>
...
Content that was fetched and placed in <div id="app">
...
<!-- Slider main container -->
<div class="np_swiper">
<!-- Additional required wrapper -->
<div class="swiper-wrapper">
...
The [simplified] code used to fetch and insert the page.
async function loadPage( pageUrl ) {
console.log("LOAD: ", pageUrl)
fetch(pageUrl).then(function (response) {
// The API call was successful!
return response.text();
}).then(function (html) {
// Set the app div to this html
var app = document.querySelector("#app");
app.innerHTML = html;
// Initialize the swiper element
let selector = ".np_swiper";
if (!document.querySelector(selector)) {
console.error(selector+" not found");
return;
}
try {
swiper = new Swiper( selector, {
slidesPerView: 5,
spaceBetween: 5,
pagination: {
el: ".np_swiper-pagination",
type: "bullets"
},
});
}
catch (err) {
console.error('Swiper could not init.', err);
}
}).catch(function (err) {
// There was an error
console.error('Something went wrong.', err);
});
}