data.html

<div xmlns="http://www.w3.org/1999/xhtml" data-template="templates:surround" data-template-with="templates/page.html" data-template-at="content">

    <div id="WhatIsThis" class="alert alert-info alert-dismissible" role="alert">
     <button type="button" class="close" data-dismiss="alert" aria-label="Close">
            <span aria-hidden="true">
                <i class="fa fa-times" aria-hidden="true"/>
            </span>
        </button>
    <h4>About</h4>
        <p>Annotations made on this page are relative to the XML document. Instead
            of annotating a rendered website you annotate the <i class="fa fa-hand-lizard-o" aria-hidden="true"/>
 XML data and create <i class="fa fa-space-shuttle" aria-hidden="true"/>
 standoff markup<i class="fa fa-exclamation" aria-hidden="true"/>
        </p>
        <p>If you want to be able to annotate your own documents or data from a
            different repository, feel free to contribute to our source code
            on <a class="alert-link" href="https://github.com/DARIAH-DE/eXanore-viewer/">GitHub</a>
            by adding a <a class="alert-link" href="https://github.com/DARIAH-DE/eXanore-viewer/blob/master/modules/customElements.xqm#L12">
            URL schema</a> to access the data and a corresponding CSS.</p>
    </div>

    <div data-template="customElements:prepare" data-template-uri="textgrid:ts1v.0"/>

    <link rel="stylesheet" type="text/css" href="https://annotation.de.dariah.eu/annotatorjs/annotator.min.css"/>
    <link rel="stylesheet" type="text/css" href="https://annotation.de.dariah.eu/annotatorjs/dariah-annotation.css"/>
    <script type="text/javascript" src="https://annotation.de.dariah.eu/annotatorjs/annotator-full.min.js"/>
    <script type="text/javascript" src="https://annotation.de.dariah.eu/annotatorjs/dariah-annotation.js"/>
    <script>
      DariahAnnotation.setupAnnotator();
    </script>
    <div id="info" style="position:fixed; display:block; background-color:rgba(211,211,211, 0.8); font-family: monospace; right: 0; bottom: 0; height: 30px; width: 100%; text-align: center;"/>
    <script>
        // http://stackoverflow.com/questions/8813051
        $(window).on("mousemove", function(e) {
            var x = e.clientX, y = e.clientY,
                elementMouseIsOver = document.elementFromPoint(x, y);
            $("#info").text( $( elementMouseIsOver ).attr("data-info") );
        });

        // Create a class for the element
        class TEIgraphic extends HTMLElement {
          constructor() {
            // Always call super first in constructor
            super();

            // Create a shadow root
            var shadow = this.attachShadow({mode: 'open'});

            // Create a standard img element and set it's attributes.
            var img = document.createElement('img');
            img.alt = "tei-graphic";
            img.src = "https://textgridlab.org/1.0/digilib/rest/IIIF/" + this.getAttribute('url') + "/full/,400/0/native.jpg";
     //       teiwidth = this.getAttribute('width');
    //        img.width = teiwidth.substr(0, teiwidth.indexOf("px") );
   //         img.height = '400';
            img.className = 'tei-graphic';

            // Add the image to the shadow root.
            shadow.appendChild(img);
            // we should add a link to image annotation!
          }
        }

        // Define the new element
        customElements.define('tei-graphic', TEIgraphic);

    </script>
</div>