bind:this

As an alternative to doing this.root.querySelector(...), bind:this lets you pick out a specific element in the component and assign it to a variable.

In this example we create a sacrificial <div>, assign it to this.renderRoot, and then after mount we can access its innerHTML property as well as any other.

const RawHTMLRenderer: Component<{
	html: string
}, {
	renderRoot: HTMLDivElement
}> = function() {
	this.mount = () => {
		this.renderRoot.innerHTML = this.html
	}
	return (
		<div>
			unsanitized html below:
			<div bind:this={use(this.renderRoot)} />
		</div>
	)
}

document.body.appendChild(<RawHTMLRenderer html="<h1>hi</h1>" />)