Use a custom element name for highlight spans

Use the same trick that was applied to the adder in
d9644a80 to reduce the likelihood of the
page's own CSS styling modifying the appearance of highlights.

Compared to alternative methods which would raise the precedence of
highlight styling (inline styles, !important !all !the !things, selector
precedence hacks), this approach is simpler as it makes the conflicting
rule from the page's own styling not apply at all.

Fixes hypothesis/h#3520

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', ->