Shadow DOM

Sirv Media Viewer supports the use of Shadow DOM, allowing hidden DOM trees to be attached to elements in the regular DOM tree. The shadow DOM tree starts with a shadow root, under which you can attach to any elements you wish, in the same way as the normal DOM.

Usage

1. Include the latest sirv.js

<script src="https://scripts.sirv.com/sirvjs/v3/sirv.js"></script>

2. Create your web components

To start/stop a Sirv Media Viewer instance within Shadow DOM, you should pass the context of a Shadow DOM in a second argument to the Sirv.start() and Sirv.stop() methods.

For open Shadow DOM

<script type="text/javascript">
  customElements.define('sirv-component-open',
    class extends HTMLElement {
      constructor() {
        super();
        const template = document.getElementById('sirv-component');
        const templateContent = template.content;
        this.template = templateContent

        this.attachShadow({ mode: 'open' })
          .appendChild(templateContent.cloneNode(true));

        this.start();
      }

        start() {
          Sirv.start('.Sirv', this.shadowRoot);
        }

        stop() {
          Sirv.stop('.Sirv', this.shadowRoot);
        }

        nextSlide() {
          const slider = Sirv.getInstance('.Sirv', 'viewer', this.shadowRoot);
        slider.next();
      }
    }
  );
</script>

For closed Shadow Dom

<script type="text/javascript">
  customElements.define('sirv-component-closed',
    class extends HTMLElement {
      constructor() {
        super();
        const template = document.getElementById('sirv-component');
        const templateContent = template.content;
        this.template = templateContent

        this._shadowRoot = this.attachShadow({ mode: 'closed' })
        this._shadowRoot.appendChild(templateContent.cloneNode(true));

        this.start();
      }

      start() {
        Sirv.start('.Sirv', this._shadowRoot);
      }

      stop() {
        Sirv.stop('.Sirv', this._shadowRoot);
      }

      nextSlide() {
        const slider = Sirv.getInstance('.Sirv', 'viewer', this._shadowRoot);
        slider.next();
      }
    }
  );
</script>

3. Create your template component

<template id="sirv-component">
  <div class="Sirv">
    <div data-src="https://demo.sirv.com/demo/chacos/chacos.spin"></div>
    <div data-type="zoom" data-src="https://demo.sirv.com/demo/chacos/still-1.jpg"></div>
    <div data-type="zoom" data-src="https://demo.sirv.com/demo/chacos/still-2.jpg"></div>
    <div data-type="zoom" data-src="https://demo.sirv.com/demo/chacos/still-3.jpg"></div>
  </div>
</template>

4. Use your components

<sirv-component-open></sirv-component>

<sirv-component-closed></sirv-component>