SSR throws error when first childNode is a web component

[drdreo]

Bug report

• Skate version: 5.2.4

Current behaviour

When server-side rendering a component that has another component as first child, the following error is thrown:
Failed to execute "attachShadow" on "Element": Shadow root cannot be created on a host which already hosts a shadow tree. node_modules/@skatejs/ssr/register/dom/Element.js:140:11)

It thinks that the shadowRoot is already attached

Expected behaviour

Using a web component as first element should be possible.

Use case(s)

class Hello extends HTMLElement {
	connectedCallback() {
		const shadowRoot = this.attachShadow({ mode: 'open' });
		shadowRoot.innerHTML =
			'<x-yell><slot></slot></x-yell>';
	}
}
class Yell extends HTMLElement {
	connectedCallback() {
			const shadowRoot = this.attachShadow({ mode: 'open' });
			shadowRoot.innerHTML = '<strong><slot></slot></strong>';
	}
}
customElements.define('x-hello', Hello);
customElements.define('x-yell', Yell);

const hello = new Hello();
hello.textContent = 'World';

render(hello).then(console.log);

Just wrapping the x-yell with a div solves the problem for me.

class Hello extends HTMLElement {
	connectedCallback() {
		const shadowRoot = this.attachShadow({ mode: 'open' });
		shadowRoot.innerHTML =
			'<div><x-yell><slot></slot></x-yell></div>';
	}
}

[treshugart]

Yeah it seems like this is definitely a bug. I don't currently have the time to fix this anytime soon, but will happily accept a PR if you have time :)

[trusktr]

@drdreo I'd like to iron this out at some point when I circle back to SSR.

@treshugart I've been AWOL from here for a while because I was focused on some other things, including @lume/element, which is a part of my bigger overall project Lume. (I've been meaning to extract parts of into mixins like SkateJS v5 had).

I'd like to circle back to SSR and see how it would be to render my elements for 2D/3D graphics. WebGL content won't render with an initial HTML payload (custom elements need to be instantiated for that). I'm wondering if I can pair Skate SSR with a mechanism that sends back a screenshot of the WebGL state (non interactive) which eventually turns into the real scene. More precisely, for any Scene element I need a screenshot of that element, while normal content on the outside that renders the normal way (CSS) would work fine already.