diff --git a/packages/react-native-web/src/exports/AppRegistry/__tests__/index-test.js b/packages/react-native-web/src/exports/AppRegistry/__tests__/index-test.js
index 03eafccd..724f5677 100644
--- a/packages/react-native-web/src/exports/AppRegistry/__tests__/index-test.js
+++ b/packages/react-native-web/src/exports/AppRegistry/__tests__/index-test.js
@@ -39,6 +39,14 @@ describe('AppRegistry', () => {
       expect(styleElement).toMatchSnapshot();
     });
 
+    test('"getStyleElement" adds props to <style>', () => {
+      const nonce = '2Bz9RM/UHvBbmo3jK/PbYZ==';
+      AppRegistry.registerComponent('App', () => RootComponent);
+      const { getStyleElement } = AppRegistry.getApplication('App', {});
+      const styleElement = getStyleElement({ nonce });
+      expect(styleElement.props.nonce).toBe(nonce);
+    });
+
     test('"getStyleElement" produces styles that are a function of rendering "element"', () => {
       const getApplicationStyles = appName => {
         const { element, getStyleElement } = AppRegistry.getApplication(appName, {});
diff --git a/packages/react-native-web/src/exports/AppRegistry/renderApplication.js b/packages/react-native-web/src/exports/AppRegistry/renderApplication.js
index abc024ac..5b8023bd 100644
--- a/packages/react-native-web/src/exports/AppRegistry/renderApplication.js
+++ b/packages/react-native-web/src/exports/AppRegistry/renderApplication.js
@@ -46,9 +46,11 @@ export function getApplication(
     </AppContainer>
   );
   // Don't escape CSS text
-  const getStyleElement = () => {
+  const getStyleElement = props => {
     const sheet = styleResolver.getStyleSheet();
-    return <style dangerouslySetInnerHTML={{ __html: sheet.textContent }} id={sheet.id} />;
+    return (
+      <style {...props} dangerouslySetInnerHTML={{ __html: sheet.textContent }} id={sheet.id} />
+    );
   };
   return { element, getStyleElement };
 }
diff --git a/packages/react-native-web/src/exports/StyleSheet/StyleSheetManager.js b/packages/react-native-web/src/exports/StyleSheet/StyleSheetManager.js
index 7cf65677..757cafc5 100644
--- a/packages/react-native-web/src/exports/StyleSheet/StyleSheetManager.js
+++ b/packages/react-native-web/src/exports/StyleSheet/StyleSheetManager.js
@@ -69,10 +69,6 @@ export default class StyleSheetManager {
     return className;
   }
 
-  injectKeyframe(): string {
-    // return identifier;
-  }
-
   _addToCache(className, prop, value) {
     const cache = this._cache;
     if (!cache.byProp[prop]) {
diff --git a/packages/react-native-web/src/exports/StyleSheet/WebStyleSheet.js b/packages/react-native-web/src/exports/StyleSheet/WebStyleSheet.js
index ec93b100..c6e18468 100644
--- a/packages/react-native-web/src/exports/StyleSheet/WebStyleSheet.js
+++ b/packages/react-native-web/src/exports/StyleSheet/WebStyleSheet.js
@@ -8,6 +8,7 @@
  */
 
 import { canUseDOM } from 'fbjs/lib/ExecutionEnvironment';
+import modality from './modality';
 
 export default class WebStyleSheet {
   _cssRules = [];
@@ -29,6 +30,7 @@ export default class WebStyleSheet {
       }
 
       if (domStyleElement) {
+        modality(domStyleElement);
         // $FlowFixMe
         this._sheet = domStyleElement.sheet;
         this._textContent = domStyleElement.textContent;
diff --git a/packages/react-native-web/src/exports/StyleSheet/index.js b/packages/react-native-web/src/exports/StyleSheet/index.js
index 6d99be04..e4b5682c 100644
--- a/packages/react-native-web/src/exports/StyleSheet/index.js
+++ b/packages/react-native-web/src/exports/StyleSheet/index.js
@@ -1,9 +1,5 @@
-import modality from '../../modules/modality';
 import StyleSheet from './StyleSheet';
 
-// initialize focus-ring fix
-modality();
-
 // allow component styles to be editable in React Dev Tools
 if (process.env.NODE_ENV !== 'production') {
   const { canUseDOM } = require('fbjs/lib/ExecutionEnvironment');
diff --git a/packages/react-native-web/src/modules/modality/index.js b/packages/react-native-web/src/exports/StyleSheet/modality.js
similarity index 81%
rename from packages/react-native-web/src/modules/modality/index.js
rename to packages/react-native-web/src/exports/StyleSheet/modality.js
index 1f0922fd..35eea7a3 100644
--- a/packages/react-native-web/src/modules/modality/index.js
+++ b/packages/react-native-web/src/exports/StyleSheet/modality.js
@@ -18,12 +18,14 @@
 
 import { canUseDOM } from 'fbjs/lib/ExecutionEnvironment';
 
-const modality = () => {
+const rule = ':focus { outline: none; }';
+let ruleExists = false;
+
+const modality = styleElement => {
   if (!canUseDOM) {
     return;
   }
 
-  let styleElement;
   let hadKeyboardEvent = false;
   let keyboardThrottleTimeoutID = 0;
 
@@ -55,21 +57,6 @@ const modality = () => {
     '[role=textbox]'
   ].join(',');
 
-  /**
-   * Disable the focus ring by default
-   */
-  const initialize = () => {
-    // check if the style sheet needs to be created
-    const id = 'react-native-modality';
-    styleElement = document.getElementById(id);
-    if (!styleElement) {
-      // removes focus styles by default
-      const style = `<style id="${id}">:focus { outline: none; }</style>`;
-      document.head.insertAdjacentHTML('afterbegin', style);
-      styleElement = document.getElementById(id);
-    }
-  };
-
   /**
    * Computes whether the given element should automatically trigger the
    * `focus-ring`.
@@ -83,20 +70,22 @@ const modality = () => {
   };
 
   /**
-   * Add the focus ring to the focused element
+   * Add the focus ring style
    */
   const addFocusRing = () => {
-    if (styleElement) {
-      styleElement.disabled = true;
+    if (styleElement && ruleExists) {
+      styleElement.sheet.deleteRule(0);
+      ruleExists = false;
     }
   };
 
   /**
-   * Remove the focus ring
+   * Remove the focus ring style
    */
   const removeFocusRing = () => {
-    if (styleElement) {
-      styleElement.disabled = false;
+    if (styleElement && !ruleExists) {
+      styleElement.sheet.insertRule(rule, 0);
+      ruleExists = true;
     }
   };
 
@@ -136,7 +125,7 @@ const modality = () => {
   };
 
   if (document.body && document.body.addEventListener) {
-    initialize();
+    removeFocusRing();
     document.body.addEventListener('keydown', handleKeyDown, true);
     document.body.addEventListener('focus', handleFocus, true);
     document.body.addEventListener('blur', handleBlur, true);
diff --git a/website/storybook/2-apis/AppRegistry/AppRegistryScreen.js b/website/storybook/2-apis/AppRegistry/AppRegistryScreen.js
index 3abff5ef..bf36a3b2 100644
--- a/website/storybook/2-apis/AppRegistry/AppRegistryScreen.js
+++ b/website/storybook/2-apis/AppRegistry/AppRegistryScreen.js
@@ -31,10 +31,18 @@ const AppRegistryScreen = () => (
       />
 
       <DocItem
-        description="Use this for server-side rendering to HTML. Returns a object of the given application's element, and a function to get styles once the element is rendered."
+        description={
+          <AppText>
+            Use this for server-side rendering to HTML. Returns an object containing the given
+            application's element and a function to get styles once the element is rendered.
+            Additional props can be passed to the <Code>getStyleElement</Code> function, e.g., your
+            CSP policy may require a <Code>nonce</Code> to be set on <Code>style</Code>
+            elements.
+          </AppText>
+        }
         label="web"
         name="static getApplication"
-        typeInfo="(appKey: string, appParameters: ?object) => { element: ReactElement; getStyleElement: () => ReactElement }"
+        typeInfo="(appKey: string, appParameters: ?object) => { element: ReactElement; getStyleElement: (props) => ReactElement }"
       />
 
       <DocItem