diff --git a/apps/portal/src/components/Global.styles.js b/apps/portal/src/components/Global.styles.js
index b9fddfc6afc5..0e20e4db6c0d 100644
--- a/apps/portal/src/components/Global.styles.js
+++ b/apps/portal/src/components/Global.styles.js
@@ -1,7 +1,7 @@
 export const GlobalStyles = `
     /* Colors
     /* ----------------------------------------------------- */
-    :root {
+    :host {
         --black: #000;
         --blackrgb: 0,0,0;
         --grey0: #1d1d1d;
@@ -27,28 +27,19 @@ export const GlobalStyles = `
         --darkerRed: #C50202;
         --yellow: #FFDC15;
         --green: #7FC724;
-    }
 
-    /* Globals
-    /* ----------------------------------------------------- */
-    html {
         font-size: 62.5%;
-        height: 100%;
-    }
-
-    body {
-        margin: 0px;
         font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
         font-size: 1.6rem;
-        height: 100%;
         line-height: 1.6em;
         font-weight: 400;
         font-style: normal;
         color: var(--grey2);
-        box-sizing: border-box;
-        overflow: hidden;
     }
 
+    /* Globals
+    /* ----------------------------------------------------- */
+
     button,
     button span {
         font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
diff --git a/apps/portal/src/components/Notification.js b/apps/portal/src/components/Notification.js
index 0fa52523fe41..389883f21ed5 100644
--- a/apps/portal/src/components/Notification.js
+++ b/apps/portal/src/components/Notification.js
@@ -1,5 +1,5 @@
 import React from 'react';
-import Frame from './Frame';
+import ShadowRoot from './ShadowRoot';
 import AppContext from '../AppContext';
 import NotificationStyle from './Notification.styles';
 import {ReactComponent as CloseIcon} from '../images/icons/close.svg';
@@ -216,7 +216,7 @@ export default class Notification extends React.Component {
 
     renderFrameStyles() {
         const styles = `
-            :root {
+            :host {
                 --brandcolor: ${this.context.brandColor}
             }
         ` + NotificationStyle;
@@ -236,9 +236,9 @@ export default class Notification extends React.Component {
         const {type, status, autoHide, duration} = this.state;
         if (type && status) {
             return (
-                <Frame style={frameStyle} title="portal-notification" head={this.renderFrameStyles()} className='gh-portal-notification-iframe' >
+                <ShadowRoot style={frameStyle} title="portal-notification" head={this.renderFrameStyles()} className='gh-portal-notification-iframe' >
                     <NotificationContent {...{type, status, autoHide, duration}} onHideNotification={e => this.onHideNotification(e)} />
-                </Frame>
+                </ShadowRoot>
             );
         }
         return null;
diff --git a/apps/portal/src/components/PopupModal.js b/apps/portal/src/components/PopupModal.js
index 6a5af27651d8..011dadeebd05 100644
--- a/apps/portal/src/components/PopupModal.js
+++ b/apps/portal/src/components/PopupModal.js
@@ -1,5 +1,5 @@
 import React from 'react';
-import Frame from './Frame';
+import ShadowRoot from './ShadowRoot';
 import {hasMode} from '../utils/check-mode';
 import AppContext from '../AppContext';
 import {getFrameStyles} from './Frame.styles';
@@ -257,7 +257,7 @@ export default class PopupModal extends React.Component {
         const {site} = this.context;
         const FrameStyle = getFrameStyles({site});
         const styles = `
-            :root {
+            :host {
                 --brandcolor: ${this.context.brandColor}
             }
         ` + FrameStyle;
@@ -293,10 +293,10 @@ export default class PopupModal extends React.Component {
 
         return (
             <div style={Styles.modalContainer}>
-                <Frame style={frameStyle} title="portal-popup" head={this.renderFrameStyles()} dataTestId='portal-popup-frame'>
+                <ShadowRoot style={frameStyle} title="portal-popup" head={this.renderFrameStyles()} dataTestId='portal-popup-frame'>
                     <div className={className} onClick = {e => this.handlePopupClose(e)}></div>
                     <PopupContent isMobile={isMobile} />
-                </Frame>
+                </ShadowRoot>
             </div>
         );
     }
diff --git a/apps/portal/src/components/ShadowRoot.js b/apps/portal/src/components/ShadowRoot.js
new file mode 100644
index 000000000000..ea949661e0dd
--- /dev/null
+++ b/apps/portal/src/components/ShadowRoot.js
@@ -0,0 +1,52 @@
+import {Component} from 'react';
+import {createPortal} from 'react-dom';
+
+export default class ShadowRoot extends Component {
+    static isSupported() {
+        return (
+            typeof window !== 'undefined' &&
+            window.Element &&
+            window.Element.prototype.hasOwnProperty('attachShadow')
+        );
+    }
+
+    constructor(props) {
+        super(props);
+        this.state = { ready: false };
+    }
+
+    componentDidMount() {
+        this.shadowRoot = this.node.attachShadow({
+            mode: 'open',
+        });
+
+        this.setState({ ready: true });
+    }
+
+    render() {
+        const {
+            children,
+            head,
+            style = {},
+            dataTestId = '',
+            ...rest
+        } = this.props;
+        return (
+            <div
+                data-testid={dataTestId}
+                ref={(node) => (this.node = node)}
+                style={style}
+                {...rest}
+            >
+                {this.state.ready &&
+                    createPortal(
+                        <>
+                            {head}
+                            {children}
+                        </>,
+                        this.shadowRoot
+                    )}
+            </div>
+        );
+    }
+}
diff --git a/apps/portal/src/components/TriggerButton.js b/apps/portal/src/components/TriggerButton.js
index 5cc0ef6519b1..f0c055e7debe 100644
--- a/apps/portal/src/components/TriggerButton.js
+++ b/apps/portal/src/components/TriggerButton.js
@@ -1,5 +1,5 @@
 import React from 'react';
-import Frame from './Frame';
+import ShadowRoot from './ShadowRoot';
 import MemberGravatar from './common/MemberGravatar';
 import AppContext from '../AppContext';
 import {ReactComponent as UserIcon} from '../images/icons/user.svg';
@@ -230,7 +230,7 @@ export default class TriggerButton extends React.Component {
 
     renderFrameStyles() {
         const styles = `
-            :root {
+            :host {
                 --brandcolor: ${this.context.brandColor}
             }
         ` + TriggerButtonStyle;
@@ -259,9 +259,9 @@ export default class TriggerButton extends React.Component {
         }
 
         return (
-            <Frame dataTestId='portal-trigger-frame' className='gh-portal-triggerbtn-iframe' style={frameStyle} title="portal-trigger" head={this.renderFrameStyles()}>
+            <ShadowRoot dataTestId='portal-trigger-frame' className='gh-portal-triggerbtn-iframe' style={frameStyle} title="portal-trigger" head={this.renderFrameStyles()}>
                 <TriggerButtonContent isPopupOpen={showPopup} updateWidth={width => this.onWidthChange(width)} />
-            </Frame>
+            </ShadowRoot>
         );
     }
 }