<card-swiper> custom element - demonstrates the usage of the v1 polyfills.

<!DOCTYPE html>
<html>
<head>
 <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0">
  <title>How to use the Custom Elements v1 + Shadow DOM v1 polyfills</title>

<card-swiper>
  <div id="card1" class="card">card 1</div>
  <div id="card2" class="card">card 2</div>
  <div id="card3" class="card">card 3</div>
  <div id="card4" class="card">card 4</div>
  <div id="card5" class="card">card 5</div>
  <div id="card6" class="card">card 6</div>
  <div id="card7" class="card">card 7</div>
  <div id="card8" class="card">card 8</div>
  <div id="card9" class="card">card 9</div>
  <div id="card10" class="card">card 10</div>
</card-swiper>

<template id="card-swiper-template">
  <style>
    :host {
      display: block;
      --card-size_: var(--card-size, 100px);
    }
    :host([noshadow]) .slot-container ::slotted(*) {
      box-shadow: none;
    }
    .slot-container {
      display: flex;
      overflow-x: auto;
      scroll-snap-type: mandatory;
      /* scroll-snap-points-x: repeat(calc(var(--card-size) + var(--card-padding))); */

scroll-behavior: smooth; /* smooths scroll when the numbers are clicked. */
      padding: 6px;
    }
    .slot-container ::slotted(*) {
      width: var(--card-size_);
      height: var(--card-size_);
      padding:  var(--card-padding, 16px);
      margin-right: var(--card-margin, 16px);
      flex-shrink: 0;
      box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14),
                  0 1px 5px 0 rgba(0, 0, 0, 0.12),
                  0 3px 1px -2px rgba(0, 0, 0, 0.2);
      scroll-snap-coordinate: 0% 50%;

}
    .slot-container ::slotted(:last-child) {
      margin-right: 0;
    }
    @media (min-width: 700px) {
      .slot-container {
        flex-wrap: wrap;
      }
      .slot-container ::slotted(*) {
        margin-bottom: 16px;
      }
    }
  </style>
  <div class="slot-container">
    <slot></slot>
  </div>
</template>

const supportsCustomElementsV1 = 'customElements' in window;
const supportsShadowDOMV1 = !!HTMLElement.prototype.attachShadow;

// function loadScript(src) {
//   return new Promise(function(resolve, reject) {
//     const script = document.createElement('script');
//     script.async = true;
//     script.src = src;
//     script.onload = resolve;
//     script.onerror = reject;
//     document.head.appendChild(script);
//   });
// }

// function lazyLoadWCPolyfillsIfNecessary() {
//   const loadPromises = [];

//   if (!supportsCustomElementsV1) {
//     loadPromises.push(
//       loadScript('https://cdn.jsdelivr.net/gh/webcomponents/custom-elements/custom-elements.min.js'));
//   }

//   if (!supportsShadowDOMV1) {
//     loadPromises.push(
//       loadScript('https://cdn.jsdelivr.net/gh/webcomponents/shadydom/shadydom.min.js'));
//     loadPromises.push(
//       loadScript('https://cdn.jsdelivr.net/gh/webcomponents/shadycss/shadycss.min.js'));
//   }

//   return Promise.all(loadPromises);
// }

class CardSwiper extends HTMLElement {
  static get is() { return 'card-swiper'; }

static get templateId() { return `${this.is}-template`; }

static get template() {
    if (!this._template) {
      this._template = document.querySelector(`#${this.templateId}`);
    }
    return this._template;
  }

constructor() {
    super();

if (!CardSwiper.template) {
      throw Error(`Could not find element <template id="${CardSwiper.templateId}">`);
    }
  }

connectedCallback() {
    const shadowRoot = this.attachShadow({mode: 'open'});
    shadowRoot.appendChild(
        document.importNode(CardSwiper.template.content, true));
    // Shim styles, CSS custom props, etc. if native Shadow DOM isn't available.
    if (!supportsShadowDOMV1) {
      ShadyCSS.applyStyle(this);
    }
  }
}

// TODO: use this and remove the polyfills when https://github.com/webcomponents/shadycss/issues/7 is fixed.
// lazyLoadWCPolyfillsIfNecessary().then(function(events) {
//   if (!supportsShadowDOMV1) {
//     ShadyCSS.prepareTemplate(CardSwiper.template, CardSwiper.is);
//   }
//   window.customElements.define(CardSwiper.is, CardSwiper);
// });

// Shim the element's style. This is a noop in browsers that support
// Shadow DOM and CSS custom properties.
ShadyCSS.prepareTemplate(CardSwiper.template, CardSwiper.is);

window.customElements.define(CardSwiper.is, CardSwiper);

})();
</script>
</body>
</html>

Updated missing url https://rawgit.com/webcomponents/custom-elements/master/custom-elements.min.js to https://cdn.jsdelivr.net/gh/webcomponents/custom-elements/custom-elements.min.js

Updated missing url https://rawgit.com/webcomponents/shadydom/master/shadydom.min.js to https://cdn.jsdelivr.net/gh/webcomponents/shadydom/shadydom.min.js

Updated missing url https://rawgit.com/webcomponents/shadycss/master/shadycss.min.js to https://cdn.jsdelivr.net/gh/webcomponents/shadycss/shadycss.min.js

https://rawgit.com/webcomponents/custom-elements/master/custom-elements.min.js

https://rawgit.com/webcomponents/shadydom/master/shadydom.min.js

https://rawgit.com/webcomponents/shadycss/master/shadycss.min.js