Use a custom HTML tag for the notebook's outermost element

Using a generic `<div>` can result in the notebook being positioned
incorrectly or otherwise receiving undesirable styling on pages with
very generic selectors. For example https://example.com.

Using a custom tag name reduces the risk and we already do this for
various other UI elements in the annotator part of the app.

We can protect the contents of the outermost element using Shadow DOM,
but the outermost element itself will always be subject to the page's
styles.

src/annotator/notebook.js

@@ -34,7 +34,7 @@ export default class Notebook extends Delegator {
     this._groupId = null;
     this._prevGroupId = null;
 
-    this.container = document.createElement('div');
+    this.container = document.createElement('hypothesis-notebook');
     this.container.style.display = 'none';
     this.container.className = 'notebook-outer';