context doesn't work with `shadow: false`

[smeijer]

Forking off from #65; context doesn't work when creating elements without { shadow: true }.

The cause is that the event listener is attached to a slot in shadow mode, and to a Fragment in light DOM mode. Fragments don't handle the events.

I've confirmed that replacing the Fragment with a real element fixes the issue, by applying the change below. I'm opening this issue instead of creating a pull-request, as wrapping elements in another custom element, might be undesired.

Potential fix, replace these lines:

preact-custom-element/src/index.js

Lines 180 to 181 in 0a8ccf7

	const { useFragment, ...rest } = props;
	return h(useFragment ? Fragment : 'slot', { ...rest, ref });

With:

	const { useFragment, ...rest } = props;
	let tag = 'slot';
	if (useFragment) {
		tag = 'preact-context-bridge';
		rest.style = 'display: contents;';
	}
	return h(tag, { ...rest, ref });

[rschristian]

The use of a Fragment there was a silly mistake on my part, was doing some TDD and shipped once the tests were green evidently. Obvs a complete no-op there and the same behavior can be provided much more intelligently.

Not that this helps in the short term, but the use of Fragment can be chalked up to "Ryan was tired when he got that out the door" 😄

[praetoros]

Hi, Thanks for the great work here. Is there a way, as a consumer of the library to work around this? Requiring shadow dom to use context is currently a blocker for my use case.

[rschristian]

Yes, you'd need to do something like this manually is all:

preact-custom-element/src/index.js

Lines 166 to 179 in dd1f1d6

	const ref = (r) => {
	if (!r) {
	this.ref.removeEventListener('_preact', this._listener);
	} else {
	this.ref = r;
	if (!this._listener) {
	this._listener = (event) => {
	event.stopPropagation();
	event.detail.context = context;
	};
	r.addEventListener('_preact', this._listener);
	}
	}
	};

I don't have time to set up an example but hopefully this will get you on the right track.

Edit: Sorry, I was very much incorrect. Turns out you run into nasty timing issues, as well as side-effects of how we're rendering. Preact cannot attach the ref quicker than the child mounts, thereby breaking our mechanism (though parent won't have the context passed in correctly either).

I think the entire mechanism we have needs a rethink.