Skip to content

Instantly share code, notes, and snippets.

@ebidel ebidel/index.html
Created Sep 16, 2016

Embed
What would you like to do?
<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>
<style>
body {
font-family: sans-serif;
font-weight: 300;
}
card-swiper {
--card-size: 100px;
width: 400px;
border: 1px solid black;
}
.card {
border-radius: 3px;
background: #eee;
}
#paginator {
margin-top: 16px;
}
#paginator a {
text-decoration: none;
background: #000;
padding: 6px 12px;
color: #fff;
display: inline-block;
border-radius: 3px;
}
</style>
</head>
<body>
<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>
<div id="paginator">
<a href="#card1">1</a>
<a href="#card2">2</a>
<a href="#card3">3</a>
<a href="#card4">4</a>
<a href="#card5">5</a>
<a href="#card6">6</a>
<a href="#card7">7</a>
<a href="#card8">8</a>
<a href="#card9">9</a>
<a href="#card10">10</a>
</div>
<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>
<script src="https://rawgit.com/webcomponents/custom-elements/master/custom-elements.min.js"></script>
<script src="https://rawgit.com/webcomponents/shadydom/master/shadydom.min.js"></script>
<script src="https://rawgit.com/webcomponents/shadycss/master/shadycss.min.js"></script>
<script>
(function() {
'use strict';
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://rawgit.com/webcomponents/custom-elements/master/custom-elements.min.js'));
// }
// if (!supportsShadowDOMV1) {
// loadPromises.push(
// loadScript('https://rawgit.com/webcomponents/shadydom/master/shadydom.min.js'));
// loadPromises.push(
// loadScript('https://rawgit.com/webcomponents/shadycss/master/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>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.