diff --git a/src/text-editor-element.coffee b/src/text-editor-element.coffee
index 6491d92f1..866cb4f75 100644
--- a/src/text-editor-element.coffee
+++ b/src/text-editor-element.coffee
@@ -1,11 +1,14 @@
 {View, $, callRemoveHooks} = require 'space-pen'
 React = require 'react-atom-fork'
+Path = require 'path'
 {defaults} = require 'underscore-plus'
 TextBuffer = require 'text-buffer'
 TextEditor = require './text-editor'
 TextEditorComponent = require './text-editor-component'
 TextEditorView = null
 
+ShadowStyleSheet = null
+
 class TextEditorElement extends HTMLElement
   model: null
   componentDescriptor: null
@@ -25,8 +28,13 @@ class TextEditorElement extends HTMLElement
     @setAttribute('tabindex', -1)
 
     if atom.config.get('editor.useShadowDOM')
+      unless ShadowStyleSheet?
+        ShadowStyleSheet = document.createElement('style')
+        ShadowStyleSheet.textContent = atom.themes.loadLessStylesheet(require.resolve('../static/text-editor-shadow.less'))
+
       @createShadowRoot()
 
+      @shadowRoot.appendChild(ShadowStyleSheet.cloneNode(true))
       @stylesElement = document.createElement('atom-styles')
       @stylesElement.setAttribute('context', 'atom-text-editor')
       @stylesElement.initialize()
@@ -42,7 +50,6 @@ class TextEditorElement extends HTMLElement
 
     @rootElement.classList.add('editor', 'editor-colors')
 
-
   createSpacePenShim: ->
     TextEditorView ?= require './text-editor-view'
     @__spacePenView = new TextEditorView(this)
diff --git a/src/theme-manager.coffee b/src/theme-manager.coffee
index a0293f2cf..e87028ae3 100644
--- a/src/theme-manager.coffee
+++ b/src/theme-manager.coffee
@@ -249,9 +249,6 @@ class ThemeManager
     if nativeStylesheetPath = fs.resolveOnLoadPath(process.platform, ['css', 'less'])
       @requireStylesheet(nativeStylesheetPath)
 
-    textEditorStylesPath = path.join(@resourcePath, 'static', 'text-editor-shadow.less')
-    atom.styles.addStyleSheet(@loadLessStylesheet(textEditorStylesPath), sourcePath: textEditorStylesPath, context: 'atom-text-editor')
-
   stylesheetElementForId: (id) ->
     document.head.querySelector("atom-styles style[source-path=\"#{id}\"]")
 
diff --git a/static/text-editor-light.less b/static/text-editor-light.less
index bb67be5d9..84ac5987f 100644
--- a/static/text-editor-light.less
+++ b/static/text-editor-light.less
@@ -18,8 +18,206 @@ atom-overlay {
   z-index: 4;
 }
 
-// TODO: remove this when the shadow DOM is the default
-atom-text-editor .highlight {
-  background: none;
-  padding: 0;
+// TODO: Remove the following styles when the editor shadow DOM can no longer be disabled
+atom-text-editor {
+  display: -webkit-flex;
+
+  .editor-contents {
+    width: 100%;
+    overflow: hidden;
+    cursor: text;
+    display: -webkit-flex;
+    -webkit-user-select: none;
+    position: relative;
+  }
+
+  .gutter {
+    overflow: hidden;
+    text-align: right;
+    cursor: default;
+    min-width: 1em;
+    box-sizing: border-box;
+  }
+
+  .line-numbers {
+    position: relative;
+  }
+
+  .line-number {
+    white-space: nowrap;
+    padding-left: .5em;
+    opacity: 0.6;
+
+    &.cursor-line {
+      opacity: 1;
+    }
+
+    .icon-right {
+      .octicon(chevron-down, 0.8em);
+      display: inline-block;
+      visibility: hidden;
+      opacity: .6;
+      padding: 0 .4em;
+
+      &:before {
+        text-align: center;
+      }
+    }
+  }
+
+  .gutter:hover {
+    .line-number.foldable .icon-right {
+      visibility: visible;
+
+      &:hover {
+        opacity: 1;
+      }
+    }
+  }
+
+  .gutter, .gutter:hover {
+    .line-number.folded .icon-right {
+      .octicon(chevron-right, 0.8em);
+
+      visibility: visible;
+
+      &:before {
+        position: relative;
+        left: -.1em;
+      }
+    }
+  }
+
+  .scroll-view {
+    position: relative;
+    z-index: 0;
+
+    overflow: hidden;
+    -webkit-flex: 1;
+    min-width: 0;
+  }
+
+  .underlayer {
+    position: absolute;
+    z-index: -2;
+    top: 0;
+    bottom: 0;
+    left: 0;
+    right: 0;
+  }
+
+  .highlight {
+    background: none;
+    padding: 0;
+  }
+
+  .highlight .region {
+    position: absolute;
+    pointer-events: none;
+    z-index: -1;
+  }
+
+  .lines {
+    min-width: 100%;
+    position: relative;
+    z-index: 1;
+  }
+
+  .line {
+    white-space: pre;
+
+    &.cursor-line .fold-marker:after {
+      opacity: 1;
+    }
+  }
+
+  .fold-marker {
+    cursor: default;
+
+    &:after {
+      .icon(0.8em, inline);
+
+      content: @ellipsis;
+      padding-left: 0.2em;
+    }
+  }
+
+  .placeholder-text {
+    position: absolute;
+    color: @text-color-subtle;
+  }
+
+  .invisible-character {
+    font-weight: normal !important;
+    font-style: normal !important;
+  }
+
+  .indent-guide {
+    box-shadow: inset 1px 0;
+  }
+
+  .hidden-input {
+    padding: 0;
+    border: 0;
+    position: absolute;
+    z-index: -1;
+    top: 0;
+    left: 0;
+    opacity: 0;
+    width: 1px;
+  }
+
+  .cursor {
+    z-index: 4;
+    pointer-events: none;
+    box-sizing: border-box;
+    position: absolute;
+    border-left: 1px solid;
+    opacity: 0;
+  }
+
+  &.is-focused .cursor {
+    opacity: 1;
+  }
+
+  .cursors.blink-off .cursor {
+    opacity: 0;
+  }
+
+  .horizontal-scrollbar {
+    position: absolute;
+    left: 0;
+    right: 0;
+    bottom: 0;
+
+    height: 15px;
+    overflow-x: auto;
+    overflow-y: hidden;
+    z-index: 3;
+    cursor: default;
+
+    .scrollbar-content {
+      height: 15px;
+    }
+  }
+
+  .vertical-scrollbar {
+    position: absolute;
+    top: 0;
+    right: 0;
+    bottom: 0;
+
+    width: 15px;
+    overflow-x: hidden;
+    overflow-y: auto;
+    z-index: 3;
+    cursor: default;
+  }
+
+  .scrollbar-corner {
+    position: absolute;
+    overflow: auto;
+    bottom: 0;
+    right: 0;
+  }
 }