Only create a shadow root if editor.useShadowDOM config setting is true

Signed-off-by: Max Brunsfeld <maxbrunsfeld@gmail.com>

src/highlights-component.coffee

@@ -22,9 +22,10 @@ HighlightsComponent = React.createClass
     highlightComponents
 
   componentDidMount: ->
-    insertionPoint = document.createElement('content')
-    insertionPoint.setAttribute('select', '.underlayer')
-    @getDOMNode().appendChild(insertionPoint)
+    if atom.config.get('editor.useShadowDOM')
+      insertionPoint = document.createElement('content')
+      insertionPoint.setAttribute('select', '.underlayer')
+      @getDOMNode().appendChild(insertionPoint)
 
   shouldComponentUpdate: (newProps) ->
     not isEqualForProperties(newProps, @props, 'highlightDecorations', 'lineHeightInPixels', 'defaultCharWidth', 'scopedCharacterWidthsChangeCount')

src/lines-component.coffee

@@ -58,9 +58,10 @@ LinesComponent = React.createClass
     @renderedDecorationsByLineId = {}
 
   componentDidMount: ->
-    insertionPoint = document.createElement('content')
-    insertionPoint.setAttribute('select', '.overlayer')
-    @getDOMNode().appendChild(insertionPoint)
+    if atom.config.get('editor.useShadowDOM')
+      insertionPoint = document.createElement('content')
+      insertionPoint.setAttribute('select', '.overlayer')
+      @getDOMNode().appendChild(insertionPoint)
 
   shouldComponentUpdate: (newProps) ->
     return true unless isEqualForProperties(newProps, @props,

src/text-editor-element.coffee

@@ -6,6 +6,8 @@ TextEditor = require './text-editor'
 TextEditorComponent = require './text-editor-component'
 TextEditorView = null
 
+GlobalStylesElement = null
+
 class TextEditorElement extends HTMLElement
   model: null
   componentDescriptor: null
@@ -23,16 +25,29 @@ class TextEditorElement extends HTMLElement
   initializeContent: (attributes) ->
     @classList.add('editor')
     @setAttribute('tabindex', -1)
-    @createShadowRoot()
 
-    @stylesElement = document.createElement('atom-styles')
-    @stylesElement.setAttribute('context', 'atom-text-editor')
-    @stylesElement.initialize()
-    @shadowRoot.appendChild(@stylesElement)
 
-    @rootElement = document.createElement('div')
-    @rootElement.classList.add('editor', 'editor-colors')
-    @shadowRoot.appendChild(@rootElement)
+    if atom.config.get('editor.useShadowDOM')
+      @createShadowRoot()
+
+      @stylesElement = document.createElement('atom-styles')
+      @stylesElement.setAttribute('context', 'atom-text-editor')
+      @stylesElement.initialize()
+
+      @rootElement = document.createElement('div')
+      @rootElement.classList.add('editor', 'editor-colors')
+
+      @shadowRoot.appendChild(@stylesElement)
+      @shadowRoot.appendChild(@rootElement)
+    else
+      unless GlobalStylesElement?
+        GlobalStylesElement = document.createElement('atom-styles')
+        GlobalStylesElement.setAttribute('context', 'atom-text-editor')
+        GlobalStylesElement.initialize()
+        document.head.appendChild(GlobalStylesElement)
+
+      @stylesElement = GlobalStylesElement
+      @rootElement = this
 
   createSpacePenShim: ->
     TextEditorView ?= require './text-editor-view'

src/text-editor-view.coffee

@@ -76,8 +76,15 @@ class TextEditorView extends View
     @root = $(@element.rootElement)
 
     @scrollView = @root.find('.scroll-view')
-    @underlayer = $("<div class='underlayer'></div>").appendTo(this)
-    @overlayer = $("<div class='overlayer'></div>").appendTo(this)
+
+
+    if atom.config.get('editor.useShadowDOM')
+      @underlayer = $("<div class='underlayer'></div>").appendTo(this)
+      @overlayer = $("<div class='overlayer'></div>").appendTo(this)
+    else
+      @underlayer = @find('.highlights').addClass('underlayer')
+      @overlayer = @find('.lines').addClass('overlayer')
+
     @hiddenInput = @root.find('.hidden-input')
 
     @hiddenInput.on = (args...) =>