S
SolidJS•16mo ago
musiclover

Can I make getElementById reactive?

I want to use document.getElementById () as signal. Is it possible?
4 Replies
Unknown User
Unknown User•16mo ago
Message Not Public
Sign In & Join Server To View
musiclover
musiclover•16mo ago
Should I update the signal manaully byself whenever the element is removed or added?
Unknown User
Unknown User•16mo ago
Message Not Public
Sign In & Join Server To View
Joe Pea
Joe Pea•16mo ago
The only problem is: how do you know when it changes? - Use MutationObserver on the document, observe all children, check if the signal needs to be updated in the MutationObserver callback - make a requestAnimationFrame loop (ugh) and check the result every frame, then set the signal The rAF way is probably easier, but MutationObserver is snappier and not running endlessly. 
function elementById(id) {
  const [el, setEl] = createSignal(null)
  
  const o = new MutationObserver(() => {
    setEl(document.getElementById(id))
  })

  o.observe(document, {
    subtree: true,
    childList: true,
  })
}

const someEl = elementById('someEl')

createEffect(() => {
  console.log('someEl', someEl())
})
function elementById(id) {
  const [el, setEl] = createSignal(null)
  
  const o = new MutationObserver(() => {
    setEl(document.getElementById(id))
  })

  o.observe(document, {
    subtree: true,
    childList: true,
  })
}

const someEl = elementById('someEl')

createEffect(() => {
  console.log('someEl', someEl())
})
This only works on document. If you are in a ShadowRoot, you have to call shadowRoot.getElementById
Want results from more Discord servers?
Add your server
More Posts
how to handle POST in a route?Hey there, I was looking for something like remix’s action/useActionData, but I don’t even have the useServerContext() returns empty object in server$() callbackhow come `useServerContext()` returns an empty object in `server$()` callbacks?How to not render <Portal> if mount is undefined?It seems <Portal> always insert to document.body if the mount is null. But I only want to render tget cookie inside $server rpc callHi, how can I get an http cookie inside $server rpc context? This is possible using tRPC, and I'm hoSolid PointerEvents, Firefox, RequestAnimationFrame and OffsetX/YHere's one that took up a bit of my afternoon after I wrote a RAF debouncer. Does Solid 'do' anythinMutating element onMount doesn't re-renderI am trying to mutate the innerText (or innerHTML) of a <div /> in an async function that I dispatchcreate-solid messed up peer dependenciesUpon creation I've got this warning ``` WARN  Issues with peer dependencies found . ├─┬ solid-start-What's the simplest way to combine the classList prop?I have a component that takes a classList prop, and I want to combine it with a reactive classList oHow to import `renderToString` into a plain js/ts fileSo, I have working serverless application, which has a `handler.ts`. Inside I atm do: ```ts const htCorrect Syntax of passing a Component via propI have this component. ```tsx const Test = (props: ParentProps & { label?: JSXElement }) => { retu