Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Document gotchas related to authoring DSP live examples #4011

Open
tomivirkki opened this issue Dec 17, 2024 · 0 comments
Open

Document gotchas related to authoring DSP live examples #4011

tomivirkki opened this issue Dec 17, 2024 · 0 comments

Comments

@tomivirkki
Copy link
Member

There are a couple of essential technical details in DSP that must be considered while working with live examples, and they haven't yet been properly addressed in the DSP documentation.

  1. When adding a live Flow example, an associated TypeScript file needs to be created to import the necessary web components and other client-side modules. In the case of Vaadin documentation, this is typically covered by the Lit and React examples which take care of the web component imports also required by the Flow examples.
    If an example group only has a Flow example, a separate TS file with the imports must be added to the group with preimport, hidden tags. Here's one such example group on Vaadin documentation.

  2. If the custom theme includes an html CSS selector, it needs to be extended to html, :host() since live examples on the documentation are rendered as web components and an html tag doesn't exist inside a shadow root. This is already documented here, but it should be clearly referenced in the DSP documentation.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests

2 participants