odyssey
odyssey copied to clipboard
feat: adds the ability to render an encapsulated Unified UI Shell
Summary
We need a way to render top nav and side nav in a Shadow DOM such that the styles don't leak out and aren't affected by the styles of our apps.
This PR introduces a Shadow DOM using a Web Component that gets rendered in the a root element. That Shadow DOM includes a <slot> with a configurable id, and when the consuming React app renders into that slot, it will render outside of the Shadow DOM, but in the correct slot on the page.
Requirements
- Shadow DOM has to be built-in.
- Might need multiple shadow DOMs for top nav and side nav if we want another component to slot in.
- Needs to be self-contained so apps can consume it without having Odyssey.
- People that have Odyssey can use this on the latest version without needing our wrapper function.
- People on an older Odyssey or that don't have Odyssey need to be able to import this as a UMD package that puts a function on the global scope and returns an Element to render into. That element cannot be in a Shadow DOM.
Testing & Screenshots
- [X] I have confirmed this change with my designer and the Odyssey Design Team.
I haven't had a chance to test this, and I'm gonna be out until next Friday. I know we needed this fast, so this should help in making a working prototype.