Inject both underlayer and overlayer via shadow DOM insertion points

src/highlights-component.coffee

@@ -21,5 +21,10 @@ HighlightsComponent = React.createClass
 
     highlightComponents
 
+  componentDidMount: ->
+    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,8 +58,9 @@ LinesComponent = React.createClass
     @renderedDecorationsByLineId = {}
 
   componentDidMount: ->
-    node = @getDOMNode()
-    node.appendChild(document.createElement('content'))
+    insertionPoint = document.createElement('content')
+    insertionPoint.setAttribute('select', '.overlayer')
+    @getDOMNode().appendChild(insertionPoint)
 
   shouldComponentUpdate: (newProps) ->
     return true unless isEqualForProperties(newProps, @props,

src/text-editor-view.coffee

@@ -76,8 +76,8 @@ class TextEditorView extends View
     @root = $(@element.rootElement)
 
     @scrollView = @root.find('.scroll-view')
-    @underlayer = @root.find('.highlights').addClass('underlayer')
-    @overlayer = @root.find('.lines').addClass('overlayer')
+    @underlayer = $("<div class='underlayer'></div>").appendTo(this)
+    @overlayer = $("<div class='overlayer'></div>").appendTo(this)
     @hiddenInput = @root.find('.hidden-input')
 
     @subscribe atom.config.observe 'editor.showLineNumbers', =>
@@ -173,7 +173,7 @@ class TextEditorView extends View
   appendToLinesView: (view) ->
     view.css('position', 'absolute')
     view.css('z-index', 1)
-    @append(view)
+    @overlayer.append(view)
 
   unmountComponent: ->
     React.unmountComponentAtNode(@element) if @component.isMounted()