search

open-wc / api-viewer-element

API documentation and live playground for Web Components. Based on Custom Elements Manifest format
https://api-viewer.open-wc.org
MIT License
268 stars 25 forks source link

Providing shadow part styles to template #45

Open tpluscode opened 4 years ago

tpluscode commented 4 years ago

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>
web-padawan commented 4 years ago

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

tpluscode commented 4 years ago

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

web-padawan commented 4 years ago

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