Styled wrapper for SolidElement webcomponents

1. Create a regular ol' Solid component:

const Counter: ComponentType<{ title: string, count: number }> = (props) => {
	const [count, setCount] = createSignal(props.count);
	
	return (
		<div class="counter">
			<span class="title">{props.title}</span>
			<button class="increment" onclick={[ setCount, count() + 1 ]}>{count}</button>
		</div>
	)
};

2. Wrap it

const css = `
.counter {
	display: flex;
	flex-direction: column;
}
.title {
	font-size: 1.1rem;
}
.increment {
	cursor: pointer;
}
`;

customElement(
	"x-counter", 
	{ title: "counter", count: 0 },
	Styled(Counter, css),
);

3. Use it

<h1>Counter demo</h1>

<x-counter title="skibidi" count="69"></x-counter>