     get: ->
       @editorController?.composition
 
+  toolbarElement:
+    get: ->
+      if @hasAttribute("toolbar")
+        document.getElementById(@getAttribute("toolbar"))
+      else
+        toolbarId = "trix-toolbar-#{++id}"
+        @setAttribute("toolbar", toolbarId)
+        element = makeElement("trix-toolbar", id: toolbarId)
+        @parentElement.insertBefore(element, this)
+        element
+
+  inputElement:
+    get: ->
+      if @hasAttribute("input")
+        document.getElementById(@getAttribute("input"))
+      else
+        inputId = "trix-input-#{++id}"
+        @setAttribute("input", inputId)
+        element = makeElement("input", type: "hidden", id: inputId)
+        @parentElement.insertBefore(element, @nextElementSibling)
+        element
+
   value:
     get: ->
-      @inputElement?.value
+      @inputElement.value
 
   # Selection methods
 

  # Element lifecycle

  createdCallback: ->
    @trixId = ++id
    makeEditable(this)

  attachedCallback: ->
    autofocus(this)

    @toolbarElement = findOrCreateToolbarElement(this)
    @inputElement = findOrCreateInputElement(this)

    @editorController = new Trix.EditorController
      editorElement: this


  detachedCallback: ->
    @editorController?.unregisterSelectionManager()

autofocus = (element) ->
  unless document.querySelector(":focus")
