Pane has an el variable and requires the html to be passed into the constructor.

extensions/blank-extension/pane.coffee

@@ -11,3 +11,4 @@ class BlankExtension extends Pane
   html: null
 
   constructor: ->
+    super

extensions/tabs/tabs-pane.coffee

@@ -7,11 +7,11 @@ module.exports =
 class TabsPane extends Pane
   position: 'top'
 
-  html: $ require 'tabs/tabs.html'
-
   constructor: ->
+    html = require 'tabs/tabs.html'
+    super html
+
     # Style html
-    @html.parents('.pane').css height: 'inherit'
     css = $('<style id="tabs-style"></style>').html require 'tabs/tabs.css'
     $('head').append css
 

extensions/tree/tree-pane.coffee

@@ -8,12 +8,11 @@ Pane = require 'pane'
 module.exports =
 class TreePane extends Pane
   position: 'left'
-
   tree: null
 
-  html: $ require "tree/tree.html"
-
   constructor: (@tree) ->
+    super require "tree/tree.html"
+
     @render()
 
     $('#tree li').live 'click', (event) =>
@@ -37,10 +36,10 @@ class TreePane extends Pane
       false
 
   render: ->
-    @html.children('#tree .cwd').text _.last window.url.split '/'
+    @el.find('.cwd').text _.last window.url.split '/'
     fileList = @createList @tree.urls()
     fileList.addClass 'files'
-    @html.children('#tree .files').replaceWith fileList
+    @el.find('.files').replaceWith fileList
 
   createList: (urls) ->
     list = $('<ul>')

src/atom/editor-pane.coffee

@@ -7,20 +7,14 @@ ace = require 'ace/ace'
 
 module.exports =
 class EditorPane extends Pane
-  id: null
-  html: null
   position: 'main'
   editor: null
 
-  constructor: ->
-    @id = _.uniqueId 'editor-'
-    @html = $ "<div id='#{@id}'></div>"
-
   show: ->
     super
 
     return if @ace
-    @ace = ace.edit @id
+    @ace = ace.edit @paneID
 
     # Resize editor when panes are added/removed
     el = document.body

src/atom/pane.coffee

@@ -1,46 +1,53 @@
 $ = require 'jquery'
+_ = require 'underscore'
 
 module.exports =
 class Pane
+  paneID: null
   position: null
 
-  html: null
+  constructor: (html) ->
+    @paneID = _.uniqueId 'pane-'
+    @el = $ "<div id=#{@paneID}>"
+    @el.addClass "pane " + @position
+    @el.append html
 
   add: ->
     verticalDiv = $('#app-vertical')
     horizontalDiv = $('#app-horizontal')
 
-    @pane = $ "<div>"
-    @pane.addClass "pane " + @position
-    @pane.append @html
-
     switch @position
       when 'main'
+        # Only one main pane can be visiable.
         $('#main > div').addClass 'hidden'
-        $('#main').append @pane
+        $('#main').append @el
       when 'top'
-        verticalDiv.prepend @pane
+        verticalDiv.prepend @el
       when 'left'
-        horizontalDiv.prepend @pane
+        horizontalDiv.prepend @el
       when 'bottom'
-        verticalDiv.append @pane
+        verticalDiv.append @el
       when 'right'
-        horizontalDiv.append @pane
+        horizontalDiv.append @el
       else
         throw "pane position of #{this} can't be `#{@position}`"
 
+  el: ->
+    el = $ "##{@paneID}"
+    el[0] and el # Return null if doesn't exist, jquery object if it does
+
   showing: ->
-    @pane and not @pane.hasClass 'hidden'
+    @el and not @el.hasClass 'hidden'
 
   show: ->
-    if not @pane
+    if not @el.parent()[0]
       @add()
     else
       $('#main > div').addClass 'hidden' if @position == 'main'
-      @pane.removeClass 'hidden'
+      @el.removeClass 'hidden'
 
   hide: ->
-    @pane.addClass 'hidden'
+    @el.addClass 'hidden'
 
   toggle: ->
     if @showing()