themesberg / themesberg/flowbite
Support for Shadow DOM
Nobody has claimed this yet.
- Dominant language
- HTML
- Stars
- 9.4k
- Forks
- 862
- PR merge metrics
- No merged PRs in 30d
Description
Please point me to the relevant resources if I am wrong, but it seems like Flowbite cannot be used together with Shadow DOM in native web components.
While the style examples work perfectly fine, the JS seems to work with document-level selectors (such as here), which will fail to find any results when working with a shadow DOM. The approach for that would be to pass the shadow root to this init function, so it can search within the shadow root.
Is there any perspective on getting Flowbite to work properly with web components and shadow dom?
Contributor guide
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Research direction
Start with src/components/dropdown/index.ts around line 247 and inspect how document-level selectors are used by component initialization. Compare that behavior with native web components and Shadow DOM; the work is done when Flowbite's JavaScript components can initialize and find their elements within a shadow root without breaking document-level usage.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- tailwindcss, typescript
- Domain
- frontend, web-dev
- Issue type
- Feature
- Difficulty
- 5/5
- Estimated time
- Over a week
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 30/100