api-viewer-element icon indicating copy to clipboard operation
api-viewer-element copied to clipboard

Providing shadow part styles to template

Open tpluscode opened this issue 4 years ago • 3 comments

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>

tpluscode avatar Aug 18 '20 08:08 tpluscode

Thanks for the issue. This seems to be a nice addition 👍 Will get back to api-viewer soon and implement it.

web-padawan avatar Aug 20 '20 08:08 web-padawan

Ah, hey. I found my way around this by putting a style tag inside template[data-target=prefix]. This works well enough so maybe just some more docs around the available template targets would nice? I found that there are a bunch that the element expects

tpluscode avatar Aug 20 '20 08:08 tpluscode

That's a valid point. So adding another one is kinda unnecessary 🤔
I agree those templates need more documentation.

web-padawan avatar Aug 20 '20 08:08 web-padawan