Looping onMount
Hey, I currently try to create an userscript and wanna use SolidJS, does anyone know why onMount keeps getting called and why productElems stays null?
const { default: html } = await import("https://esm.sh/[email protected]/html");
const { render } = await import("https://esm.sh/[email protected]/web");
const { onCleanup, createSignal, createEffect, createMemo, onMount, Show } = await import("https://esm.sh/[email protected]");
GM_addStyle(`
.beb {
position: fixed;
bottom: 0;
right: 0;
width: 256px;
height: 256px;
z-index: 100;
background-color: white;
p {
font-size: 16px;
color: black;
}
}
`);
const App = () => {
const [productElems, setProductElems] = createSignal(null);
const productCount = () => productElems() ? productElems().length : null;
onMount(() => {
console.log(productElems());
setProductElems([...document.querySelectorAll(".product-list__list .product-item")]);
});
return html`
<p>Product count: ${productCount()}</p>
`;
}
const app = document.createElement("div");
app.classList.add("beb");
app.style = "";
document.body.appendChild(app);
render(() => App, app);
const { default: html } = await import("https://esm.sh/[email protected]/html");
const { render } = await import("https://esm.sh/[email protected]/web");
const { onCleanup, createSignal, createEffect, createMemo, onMount, Show } = await import("https://esm.sh/[email protected]");
GM_addStyle(`
.beb {
position: fixed;
bottom: 0;
right: 0;
width: 256px;
height: 256px;
z-index: 100;
background-color: white;
p {
font-size: 16px;
color: black;
}
}
`);
const App = () => {
const [productElems, setProductElems] = createSignal(null);
const productCount = () => productElems() ? productElems().length : null;
onMount(() => {
console.log(productElems());
setProductElems([...document.querySelectorAll(".product-list__list .product-item")]);
});
return html`
<p>Product count: ${productCount()}</p>
`;
}
const app = document.createElement("div");
app.classList.add("beb");
app.style = "";
document.body.appendChild(app);
render(() => App, app);
1 Reply
Could this be because my element is mounted within a Rect app?
Hm it seems to work fine with preact