Merge pull request #172 from hypothesis/highlight-custom-element

Use a custom element name for highlight spans

h/static/scripts/annotator/highlighter.coffee

@@ -10,7 +10,10 @@ $ = require('jquery')
 # Returns an array of highlight Elements.
 exports.highlightRange = (normedRange, cssClass='annotator-hl') ->
   white = /^\s*$/
-  hl = $("<span class='#{cssClass}'></span>")
+
+  # A custom element name is used here rather than `<span>` to reduce the
+  # likelihood of highlights being hidden by page styling.
+  hl = $("<hypothesis-highlight class='#{cssClass}'></hypothesis-highlight>")
 
   # Ignore text nodes that contain only whitespace characters. This prevents
   # spans being injected between elements that can only contain a restricted

h/static/scripts/annotator/test/highlighter-test.coffee

@@ -16,6 +16,7 @@ describe "highlightRange", ->
     result = highlighter.highlightRange(r)
     assert.equal(result.length, 1)
     assert.strictEqual(el.childNodes[0], result[0])
+    assert.equal(result[0].nodeName, 'HYPOTHESIS-HIGHLIGHT');
     assert.isTrue(result[0].classList.contains('annotator-hl'))
 
   it 'skips text nodes that are only white space', ->