         openScopeNode = openScopeNode.parentElement
 
       for scope in @tokenIterator.getScopeStarts()
-        newScopeNode = document.createElement("span")
-        newScopeNode.className = scope.replace(/\.+/g, ' ')
+        newScopeNode = @buildElement("span", scope.replace(/\.+/g, ' '))
         openScopeNode.appendChild(newScopeNode)
-
         openScopeNode = newScopeNode
 
       tokenStart = @tokenIterator.getScreenStart()

    {width} = @newState
    {screenRow, tokens, text, top, lineEnding, fold, isSoftWrapped, indentLevel, decorationClasses} = @newTileState.lines[id]

    lineNode = document.createElement("div")
    lineNode.classList.add("line")
    if decorationClasses?
      for decorationClass in decorationClasses
        lineNode.classList.add(decorationClass)

      trailingWhitespaceNode = null

      if firstNonWhitespaceIndex?
        leadingWhitespaceNode = @buildElement(
          "span",
          "leading-whitespace",
          tokenText.substring(0, firstNonWhitespaceIndex)
        )
        leadingWhitespaceNode.classList.add("indent-guide") if hasIndentGuide
        leadingWhitespaceNode.classList.add("invisible-character") if hasInvisibleCharacters

        startIndex = firstNonWhitespaceIndex

      if firstTrailingWhitespaceIndex?
        tokenIsOnlyWhitespace = firstTrailingWhitespaceIndex is 0

        trailingWhitespaceNode = @buildElement(
          "span",
          "trailing-whitespace",
          tokenText.substring(firstTrailingWhitespaceIndex)
        )
        trailingWhitespaceNode.classList.add("indent-guide") if hasIndentGuide and not firstNonWhitespaceIndex? and tokenIsOnlyWhitespace
        trailingWhitespaceNode.classList.add("invisible-character") if hasInvisibleCharacters

        endIndex = firstTrailingWhitespaceIndex

