Force updates through shadow DOM.

[MicahZoltu]

I have a component that has a shadow DOM and renders children underneath it, similar to the simplified example below. I can use signals to trigger updates in the children, but forceUpdate from useReduce doesn't propagate. This doesn't surprise me as I have two React roots that aren't connected to each other.

I would like some help on figuring out how I can make it so the shadow element in the code below is understood by preact and updates of the Apple component correctly trickle down to its children.

If you uncomment the commented render(...) line and comment out the one above it, everything works as expected.

import { render } from "preact";
import { useReducer } from "preact/hooks";

export function Apple() {
	const [, forceUpdate] = useReducer<number, undefined>(x => x + 1, 0)
	const input = <input key='1' value={Math.random()}/>
	const shadowHost = <span ref={host => {
		if (host === null) return
		if (host.shadowRoot) return
		const shadow = host.attachShadow({mode: "open"})
		render(input, shadow) // this does not work
		// render(input, host) // this works
	}}/>
	return <div>
		<button onClick={() => forceUpdate(undefined)}>Force Update</button>
		{shadowHost}
	</div>
}

The problem also occurs with signals. If input is dependent on a signal, when the signal receives an update input doesn't get executed again. As with the useReducer code above, if you remove the intermediate shadowRoot everything works.

[MicahZoltu]

Answer: Change to the following:

import { render } from "preact";
import { useReducer } from "preact/hooks";

export function Apple() {
	const [, forceUpdate] = useReducer<number, undefined>(x => x + 1, 0)
	const input = <input key='1' value={Math.random()}/>
	const shadowHost = <span ref={host => {
		if (host === null) return
		const shadow = host.shadowRoot || host.attachShadow({mode: "open"})
		render(input, shadow) // this does not work
		// render(input, host) // this works
	}}/>
	return <div>
		<button onClick={() => forceUpdate(undefined)}>Force Update</button>
		{shadowHost}
	</div>
}

I was early returning when shadowRoot already existed, and without that check it was throwing when host.attachShadow was called. I just needed to use the existing shadowRoot in the case where we are rerendering the component.