Rendered member login form in Shadow DOM instead of an iframe

refs TryGhost#16960
Attempted to fix the issue of password managers not autofilling in the login form. Shadow DOM would allow to preserve the style encapsulation, while not requiring too many changes. Unfortunately, it did not work.

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;

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;

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>
         );
     }

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>
+        );
+    }
+}

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>
         );
     }
 }