diff --git a/spec/spec-helper.coffee b/spec/spec-helper.coffee
index 0396f4673..d428e9fe1 100644
--- a/spec/spec-helper.coffee
+++ b/spec/spec-helper.coffee
@@ -74,6 +74,7 @@ beforeEach ->
   atom.workspace = new Workspace()
   atom.keymaps.keyBindings = _.clone(keyBindingsToRestore)
   atom.commands.restoreSnapshot(commandsToRestore)
+  atom.styles.clear()
 
   window.resetTimeouts()
   atom.packages.packageStates = {}
diff --git a/spec/styles-element-spec.coffee b/spec/styles-element-spec.coffee
new file mode 100644
index 000000000..eaed6ebd8
--- /dev/null
+++ b/spec/styles-element-spec.coffee
@@ -0,0 +1,35 @@
+StylesElement = require '../src/styles-element'
+StyleManager = require '../src/style-manager'
+
+describe "StylesElement", ->
+  element = null
+
+  beforeEach ->
+    element = new StylesElement
+    document.querySelector('#jasmine-content').appendChild(element)
+
+  it "renders a style tag for all currently active stylesheets in the style manager", ->
+    expect(element.children.length).toBe 0
+
+    disposable1 = atom.styles.addStyleSheet("a {color: red;}")
+    expect(element.children.length).toBe 1
+    expect(element.children[0].textContent).toBe "a {color: red;}"
+
+    disposable2 = atom.styles.addStyleSheet("a {color: blue;}")
+    expect(element.children.length).toBe 2
+    expect(element.children[1].textContent).toBe "a {color: blue;}"
+
+    disposable1.dispose()
+    expect(element.children.length).toBe 1
+    expect(element.children[0].textContent).toBe "a {color: blue;}"
+
+  it "orders style elements by group", ->
+    expect(element.children.length).toBe 0
+
+    atom.styles.addStyleSheet("a {color: red}", group: 'a')
+    atom.styles.addStyleSheet("a {color: blue}", group: 'b')
+    atom.styles.addStyleSheet("a {color: green}", group: 'a')
+
+    expect(element.children[0].textContent).toBe "a {color: red}"
+    expect(element.children[1].textContent).toBe "a {color: green}"
+    expect(element.children[2].textContent).toBe "a {color: blue}"
diff --git a/src/atom.coffee b/src/atom.coffee
index a18cafe4d..6db0e59de 100644
--- a/src/atom.coffee
+++ b/src/atom.coffee
@@ -182,6 +182,7 @@ class Atom extends Model
     Clipboard = require './clipboard'
     Syntax = require './syntax'
     ThemeManager = require './theme-manager'
+    StyleManager = require './style-manager'
     ContextMenuManager = require './context-menu-manager'
     MenuManager = require './menu-manager'
     {devMode, safeMode, resourcePath} = @getLoadSettings()
@@ -202,6 +203,7 @@ class Atom extends Model
     @commands = new CommandRegistry
     @packages = new PackageManager({devMode, configDirPath, resourcePath, safeMode})
     @themes = new ThemeManager({packageManager: @packages, configDirPath, resourcePath, safeMode})
+    @styles = new StyleManager({resourcePath})
     @contextMenu = new ContextMenuManager({resourcePath, devMode})
     @menu = new MenuManager({resourcePath})
     @clipboard = new Clipboard()
diff --git a/src/style-manager.coffee b/src/style-manager.coffee
index 7099d9b2a..a451d72ed 100644
--- a/src/style-manager.coffee
+++ b/src/style-manager.coffee
@@ -61,3 +61,7 @@ class StyleManager
       sourcePath = params?.sourcePath
       delete @styleElementsBySourcePath[sourcePath] if sourcePath?
       @emitter.emit 'did-remove-style-element', styleElement
+
+  clear: ->
+    @styleElements = []
+    @styleElementsBySourcePath = {}
diff --git a/src/styles-element.coffee b/src/styles-element.coffee
new file mode 100644
index 000000000..522e6bfc0
--- /dev/null
+++ b/src/styles-element.coffee
@@ -0,0 +1,30 @@
+{CompositeDisposable} = require 'event-kit'
+
+class StylesElement extends HTMLElement
+  attachedCallback: ->
+    @subscriptions = new CompositeDisposable
+    @styleElementClonesByOriginalElement = new WeakMap
+    @subscriptions.add atom.styles.observeStyleElements(@styleElementAdded.bind(this))
+    @subscriptions.add atom.styles.onDidRemoveStyleElement(@styleElementRemoved.bind(this))
+
+  styleElementAdded: (styleElement) ->
+    {group} = styleElement
+    styleElementClone = styleElement.cloneNode(true)
+    styleElementClone.group = group
+    @styleElementClonesByOriginalElement.set(styleElement, styleElementClone)
+
+    if group?
+      for child in @children
+        if child.group is group and child.nextSibling?.group isnt group
+          insertBefore = child.nextSibling
+          break
+
+    @insertBefore(styleElementClone, insertBefore)
+
+  styleElementRemoved: (styleElement) ->
+    @styleElementClonesByOriginalElement.get(styleElement).remove()
+
+  detachedCallback: ->
+    @subscriptions.dispose()
+
+module.exports = StylesElement = document.registerElement 'atom-styles', prototype: StylesElement.prototype