odyssey icon indicating copy to clipboard operation
odyssey copied to clipboard

feat: adds the ability to render an encapsulated Unified UI Shell

Open KevinGhadyani-Okta opened this issue 1 year ago • 0 comments

OKTA-812833

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

  1. Shadow DOM has to be built-in.
  2. Might need multiple shadow DOMs for top nav and side nav if we want another component to slot in.
  3. Needs to be self-contained so apps can consume it without having Odyssey.
  4. People that have Odyssey can use this on the latest version without needing our wrapper function.
  5. 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.

KevinGhadyani-Okta avatar Sep 27 '24 22:09 KevinGhadyani-Okta