I would like to add some example styles customised using Shadow Parts exposed by my element.

So far I failed to do that. I cannot add a style to the document itself because API viewer's shadow root blocks them. I tried to put them inside the template[data-target=host] but that break the demo completely.

How about providing a new template where a style can be provided?

<api-viewer> <template data-element="my-element" data-target="style"> <style> my-element::part(foo) { color: red } </style> </template> </api-viewer>