Web component wrapper around the lightweight (3kb minified/gzipped) Siema carousel library.
In the demo below, drag with your mouse / finger. Or use next / previous buttons.
<p-d
on="click"
if="wired-button"
prop="pageJump"
val="target.dataset.jump"
></p-d>
<xtal-siema attr-for-selected="preview">
<div class="openingSlide">
<div class="textDesc">
Web Component links of interest
</div>
</div>
<!-- Recent Announcements -->
<xtal-link-preview
href="https://developer.salesforce.com/blogs/2018/12/introducing-lightning-web-components.html"
>
<div class="loader" slot="loading">
⚡
</div>
</xtal-link-preview>
<xtal-link-preview
href="https://www.sencha.com/blog/sencha-roadmap-update/"
>
<div class="loader" slot="loading">
ExtJS 7
</div>
</xtal-link-preview>
<!-- Enterprise Component Libraries (Definition: Contains data grid and/or chart components) -->
<xtal-link-preview href="https://vaadin.com/components">
<div class="loader" slot="loading">Vaadin Components</div>
</xtal-link-preview>
<xtal-link-preview href="https://vaadin.com/directory">
<div class="loader" slot="loading">Vaadin Directory</div>
</xtal-link-preview>
<xtal-link-preview href="https://ionicframework.com/docs/components/">
<div class="loader" slot="loading">ion-</div>
</xtal-link-preview>
<xtal-link-preview
href="https://demos.wijmo.com/5/WebComponents/AllComponents/AllComponents/"
>
</xtal-link-preview>
<xtal-link-preview href="https://www.ampproject.org/docs/reference/components">
<div class="loader" slot="loading">AMP</div>
</xtal-link-preview>
<xtal-link-preview
href="https://docs.oracle.com/en/middleware/jet/6/develop/working-oracle-jet-web-components.html"
>
<div class="loader" slot="loading">Oracle Jet</div>
</xtal-link-preview>
<!-- Design Libraries -->
<xtal-link-preview
href="https://blog.ionicframework.com/build-your-next-design-system-with-web-components/"
>
<div class="loader" slot="loading">Ionic Design</div>
</xtal-link-preview>
<xtal-link-preview href="https://onsen.io">
<div class="loader" slot="loading">Onsen UI</div>
</xtal-link-preview>
<xtal-link-preview href="https://www.blazeui.com/">
<div class="loader" slot="loading">
Blaze UI
</div>
</xtal-link-preview>
<xtal-link-preview href="https://boltdesignsystem.com/">
<div class="loader" slot="loading">Bolt Design System</div>
</xtal-link-preview>
<xtal-link-preview
href="https://medium.com/@castastrophee/patternfly-elements-how-to-build-a-demo-component-448c32069a21"
>
<div class="loader" slot="loading">Patternfly</div>
</xtal-link-preview>
<xtal-link-preview
href="https://github.com/material-components/material-components-web-components"
>
<div class="loader" slot="loading">Material Web Components</div>
</xtal-link-preview>
<xtal-link-preview
href="https://ni.github.io/design-system/elements/buttons/"
>
<div class="loader" slot="loading">Fuse Design Systems</div>
</xtal-link-preview>
<xtal-link-preview href="https://www.predix-ui.com/">
<div class="loader" slot="loading">Predix</div>
</xtal-link-preview>
<xtal-link-preview href="https://elix.org/">
<div class="loader" slot="loading">elix</div>
</xtal-link-preview>
<xtal-link-preview href="https://sap.github.io/ui5-webcomponents/">
<div class="loader" slot="loading"></div>
</xtal-link-preview>
<!-- Tooling -->
<xtal-link-preview
href="https://code.visualstudio.com/updates/v1_30#_html-custom-tags-attributes-support"
>
<div class="loader" slot="loading">
VS Code
</div>
</xtal-link-preview>
<xtal-link-preview
href="https://marketplace.visualstudio.com/items?itemName=runem.lit-plugin"
>
<div class="loader" slot="loading">lit-plugin</div>
</xtal-link-preview>
<xtal-link-preview
href="https://marketplace.visualstudio.com/items?itemName=bierner.lit-html"
>
<div class="loader" slot="loading">lit-html</div>
</xtal-link-preview>
<xtal-link-preview
href="https://marketplace.visualstudio.com/items?itemName=bierner.comment-tagged-templates"
>
<div class="loader" slot="loading">
comment-tagged-templates
</div>
</xtal-link-preview>
<xtal-link-preview
href="https://marketplace.visualstudio.com/items?itemName=salesforce.salesforcedx-vscode-lwc"
>
<div class="loader" slot="loading"></div>
</xtal-link-preview>
<xtal-link-preview href="https://open-wc.org/">
<div class="loader" slot="loading">
Open-WC
</div>
</xtal-link-preview>
<xtal-link-preview
href="https://blog.nightly.mozilla.org/2018/09/06/developer-tools-support-for-web-components-in-firefox-63/"
>
<div class="loader" slot="loading">
Firefox Web Component Debugging
</div>
</xtal-link-preview>
<xtal-link-preview href="https://www.npmjs.com/package/@wcfactory/cli">
<div class="loader" slot="loading">
WCFactory
</div>
</xtal-link-preview>
<!-- Browser Related -->
<xtal-link-preview
href="https://blogs.windows.com/windowsexperience/2018/12/06/microsoft-edge-making-the-web-better-through-more-open-source-collaboration/"
>
<div class="loader" slot="loading">
Edgewise
</div>
</xtal-link-preview>
<xtal-link-preview
href="https://github.com/MicrosoftEdge/MSEdgeExplainers/blob/master/HTMLModules/explainer.md"
>
<div class="loader" slot="loading">
Imagine
</div>
</xtal-link-preview>
<xtal-link-preview
href="https://hacks.mozilla.org/2018/11/the-power-of-web-components/"
>
<div class="loader" slot="loading">Power of WCs</div>
</xtal-link-preview>
<xtal-link-preview href="https://bgrins.github.io/xbl-analysis/">
<div class="loader" slot="loading">
XBL => CE
</div>
</xtal-link-preview>
<xtal-link-preview href="https://developers.google.com/web/updates/2019/02/constructable-stylesheets">
<div class="loader" slot="loading">
CSS()
</div>
</xtal-link-preview>
<!-- Stats -->
<div>
<a
href="https://www.chromestatus.com/metrics/feature/timeline/popularity/1689"
target="blank"
>Custom Element Usage</a
>
</div>
<div>
<a
href="https://www.chromestatus.com/metrics/feature/timeline/popularity/804"
target="blank"
>Shadow DOM Usage</a
>
</div>
<!-- Training -->
<xtal-link-preview
href="https://developers.google.com/web/fundamentals/web-components/examples/"
>
<div class="loader" slot="loading">Best Practices Examples</div>
</xtal-link-preview>
<xtal-link-preview href="https://www.udemy.com/webcomponents-apps/">
<div class="loader"></div>
<div class="textDesc" slot="loading">udemy</div>
</xtal-link-preview>
<xtal-link-preview
href="https://livebook.manning.com/#!/book/web-components-in-action/welcome/v-4/"
>
<div class="loader" slot="loading">
MEAP
</div>
</xtal-link-preview>
<xtal-link-preview href="https://leanpub.com/web-component-essentials">
<div class="loader" slot="loading">
New Book
</div>
</xtal-link-preview>
<xtal-link-preview
href="https://www.pluralsight.com/courses/vanilla-web-components-practical-guide"
>
<div class="loader" slot="loading">
PluralSight
</div>
</xtal-link-preview>
<iframe
width="600"
height="290"
src="https://www.youtube.com/embed/CKy8tKMOP4c"
frameborder="0"
allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture"
allowfullscreen
></iframe>
<xtal-link-preview
href="https://medium.com/stencil-tricks/a-practical-introduction-to-styling-a-shadow-dom-and-slots-879565a2f423"
>
<div class="loader" slot="loading">Styling Shadow DOM</div>
</xtal-link-preview>
<xtal-link-preview
href="https://www.youtube.com/results?search_query=salesforce+lightning"
>
<div class="loader" slot="loading">
Salesforce Vids
</div>
</xtal-link-preview>
<xtal-link-preview
href="https://medium.com/samsung-internet-dev/making-a-simple-gamepad-web-component-23b2ac262f56"
>
<div class="loader" slot="loading">Gamepad Web Component</div>
</xtal-link-preview>
<xtal-link-preview
href="https://www.w3.org/2001/tag/doc/webcomponents-design-guidelines/"
>
<div class="loader" slot="loading">
W3C Guidance
</div>
</xtal-link-preview>
<!-- Web Component Generator Libraries-->
<xtal-link-preview href="https://polymer-library.polymer-project.org/">
<div class="loader" slot="loading>">Pioneers</div>
</xtal-link-preview>
<xtal-link-preview href="https://github.com/RHelements">
<div class="loader" slot="loading">RHElements</div>
</xtal-link-preview>
<xtal-link-preview href="https://lit-element.polymer-project.org/">
<div class="loader" slot="loading">🎉🎆🎉</div>
</xtal-link-preview>
<xtal-link-preview
href="https://bendyworks.com/blog/build-a-web-component-with-nutmeg"
>
<div class="loader" slot="loading">
Nutmeg
</div>
</xtal-link-preview>
<xtal-link-preview
href="https://dev.to/bennypowers/lets-build-web-components-part-6-gluon-27ll"
>
<div class="loader" slot="loading">
Gluon
</div>
</xtal-link-preview>
<xtal-link-preview
href="https://github.com/WebReflection/hyperHTML-Element"
>
<div class="loader" slot="loading">HyperHTML Element</div>
</xtal-link-preview>
<xtal-link-preview href="https://github.com/matthewp/haunted">
<div class="loader" slot="loading">
Haunted Hooks
</div>
</xtal-link-preview>
<xtal-link-preview href="https://github.com/luwes/swiss-element">
<div class="loader" slot="loading">
Swiss Element
</div>
</xtal-link-preview>
<xtal-link-preview href="https://github.com/UpperCod/Atomico">
<div class="loader" slot="loading">Atomico</div>
</xtal-link-preview>
<xtal-link-preview href="https://github.com/slimjs">
<div class="loader" slot="loading">SlimJS</div>
</xtal-link-preview>
<xtal-link-preview href="https://github.com/skatejs/skatejs/">
<div class="loader" slot="loading">SkateJS</div>
</xtal-link-preview>
<xtal-link-preview href="https://github.com/x-tag">
<div class="loader" slot="loading">x-tag</div>
</xtal-link-preview>
<xtal-link-preview
href="https://vuejsdevelopers.com/2018/05/21/vue-js-web-component/"
>
<div class="loader" slot="loading">vue wc</div>
</xtal-link-preview>
<xtal-link-preview
href="https://matthewphillips.info/programming/decorate-element.html"
>
<div class="loader" slot="loading">decorate-element</div>
</xtal-link-preview>
<!-- Thoughtful articles-->
<xtal-link-preview
href="https://medium.com/@mikeal/ive-seen-the-future-it-s-full-of-html-2577246f2210"
>
<div class="loader" slot="loading">@mikeal</div>
</xtal-link-preview>
<xtal-link-preview
href="https://blog.mastykarz.nl/web-components-sharepoint-framework/"
>
<div class="loader" slot="loading">
Web Components in Sharepoint
</div>
</xtal-link-preview>
<xtal-link-preview
href="https://medium.com/@lucamezzalira/a-night-experimenting-with-lit-html-585a8c69892a"
>
<div class="loader" slot="loading">night-lit</div>
</xtal-link-preview>
<xtal-link-preview href="https://micro-frontends.org/">
<div class="loader" slot="loading">Micro Frontend</div>
</xtal-link-preview>
<xtal-link-preview
href="https://dev.to/gugadev/building-an-instagram-stories-component-using-web-components-2gia"
>
<div class="loader" slot="loading">Whatsapp</div>
</xtal-link-preview>
<xtal-link-preview
href="https://medium.com/@david.dalbusco/create-a-web-component-to-keep-track-of-your-inputs-draft-with-stenciljs-cd3265d8cc58"
>
<div class="loader" slot="loading">Saving to Draft</div>
</xtal-link-preview>
<xtal-link-preview
href="https://github.com/mappmechanic/awesome-stenciljs"
>
<div class="loader" slot="loading">Awesome Stencil</div>
</xtal-link-preview>
<xtal-link-preview
href="https://github.com/web-padawan/awesome-lit-html"
>
<div class="loader slot="loading>Awesome lit-html</div>
</xtal-link-preview>
<xtal-link-preview href="https://github.com/Fdom92/stencil-voice2text">
<div class="loader" slot="loading">Stencil Voice2Text</div>
</xtal-link-preview>
<!-- Special Interest Web Components -->
<xtal-link-preview href="https://github.com/tanepiper/mm-components">
<div class="loader" slot="loading">Music Markup components</div>
</xtal-link-preview>
<xtal-link-preview href="https://aframe.io/">
<div class="loader" slot="loading">A-frame Web VR</div>
</xtal-link-preview>
<xtal-link-preview href="https://github.com/gustafnk/h-include">
<div class="loader" slot="loading">h-include</div>
</xtal-link-preview>
<xtal-link-preview href="https://github.com/Comcast/polaris">
<div class="loader" slot="loading">Polaris</div>
</xtal-link-preview>
<xtal-link-preview href="https://jpmorganchase.github.io/perspective/">
<div class="loader" slot="loading">JPMorgan Chase Perspecitve</div>
</xtal-link-preview>
<xtal-link-preview
href="https://www.xoriant.com/blog/big-data-analytics/turbocharge-data-science-workbench.html"
>
<div class="loader" slot="loading">
Data Science WCs
</div>
</xtal-link-preview>
<xtal-link-preview href="https://deckdeckgo.com/">
<div class="loader" slot="loading">Deck Deck Go</div>
</xtal-link-preview>
<xtal-link-preview href="https://github.com/Heydon/bruck">
<div class="loader" slot="loading">Lo-fi prototyping</div>
</xtal-link-preview>
<xtal-link-preview
href="https://frontendnews.io/editions/2018-08-15-simple-camera-component"
>
<div class="loader" slot="loading">Camera Component</div>
</xtal-link-preview>
<!-- Performance -->
<xtal-link-preview
href="https://vogloblinsky.github.io/web-components-benchmark/"
>
<div class="textDesc">
Benchmarks
</div>
</xtal-link-preview>
<xtal-link-preview
href="https://github.com/dsolimando/hnpwa-mobileelements/tree/pagination/www/lib"
>
<div class="loader" slot="loading">HNPWA Mobile Elements</div>
</xtal-link-preview>
<xtal-link-preview href="https://github.com/lamplightdev/compost-hn">
<div class="loader" slot="loading">Compost Elements</div>
</xtal-link-preview>
<xtal-link-preview href="https://github.com/alexnoz/vanilla-wc-hnpwa">
<div class="loader" slot="loading">Vannilla WC PWA</div>
</xtal-link-preview>
<!-- Misc Web components not found on webcomponents.org-->
<xtal-link-preview href="https://github.com/TeamHive/stencil-shimmer">
<div class="loader" slot="loading">Stencil Shimmer</div>
</xtal-link-preview>
<xtal-link-preview href="https://github.com/css-doodle/css-doodle">
<div class="loader" slot="loading">CSS Doodle</div>
</xtal-link-preview>
<xtal-link-preview
href="https://opensource.googleblog.com/2018/11/introducing-web-component-and-data-api-for-quick-draw.html"
>
<div class="loader" slot="loading">
Quick Draw
</div>
</xtal-link-preview>
<xtal-link-preview href="https://mrin9.github.io/RapiDoc/">
<div class="loader" slot="loading">
RapiDoc
</div>
</xtal-link-preview>
<xtal-link-preview
href="https://github.com/Tencent/omi/tree/master/packages/omi-chart"
>
<div class="loader" slot="loading">Omi Charts</div>
</xtal-link-preview>
<xtal-link-preview href="https://ciampo.github.io/macro-carousel/demo/">
<div class="loader" slot="loading">macro-carousel</div>
</xtal-link-preview>
<xtal-link-preview
href="https://medium.com/@valdrinkoshi/performant-expand-collapse-animations-93d99e80f7f"
>
<div class="loader" slot="loading">Expand/Collapse Animations</div>
</xtal-link-preview>
<xtal-link-preview href="https://github.com/splitinfinities/lottie-wc">
<div class="loader" slot="loading">Lottie Animations</div>
</xtal-link-preview>
<xtal-link-preview
href="https://github.com/PolymerLabs/amp-viewer/blob/master/amp-viewer.js"
>
<div class="loader" slot="loading">Amp Viewer</div>
</xtal-link-preview>
<xtal-link-preview
href="http://blog.htmltreegrid.com/post/Best-WebComponents-DataGrid-DataTable.aspx"
>
<div class="loader" slot="loading">Treegrid</div>
</xtal-link-preview>
<xtal-link-preview href="http://handsontable.github.io/hot-table/">
<div class="loader" slot="loading">Polymer Element wrapper for Handsontable</div>
</xtal-link-preview>
<xtal-link-preview
href="https://github.com/dabeng/OrgChart-Webcomponents"
>
<div class="loader" slot="loading">Org Charts</div>
</xtal-link-preview>
<xtal-link-preview href="https://github.com/QuinntyneBrown/ce-carousel">
<div class="loader" slot="loading">cd-carousel</div>
</xtal-link-preview>
<xtal-link-preview href="https://github.com/Fdom92/stencil-fetch">
<div class="loader" slot="loading">Stencil fetch</div>
</xtal-link-preview>
<xtal-link-preview href="https://github.com/Fdom92/stencil-payment">
<div class="loader" slot="loading">Stencil Payment</div>
</xtal-link-preview>
<xtal-link-preview href="https://github.com/skatejs/sk-router">
<div class="loader" slot="loading">SkateJS Router</div>
</xtal-link-preview>
<xtal-link-preview href="https://github.com/theonion/bulbs-elements">
<div class="loader" slot="loading">America's Finest News Source</div>
</xtal-link-preview>
</xtal-siema>
<!-- pass the url and title from the fetch to the hyperlink after completing the fetch -->
<p-d
on="fetch-complete-changed"
to="a"
prop="href"
val="target.href"
skip-init
m="1"
></p-d>
<p-d
on="fetch-complete-changed"
to="a"
prop="innerText"
val="target.title"
skip-init
m="1"
></p-d>
<!-- watch for twitter slides -->
<css-observe
data-xlp="no"
id="twitterObserver"
observe
selector="div[preview]>twitter-widget"
></css-observe>
<!-- If a twitter widget is opened, hide the link -->
<p-d-x
on="latest-match-changed"
to="a"
prop="dataset.xlp"
val="target.dataset.xlp"
m="1"
skip-init
></p-d-x>
<!-- Watch for simple hyperlink slides -->
<css-observe
data-xlp="no"
id="aObserver"
observe
selector="div[preview]>a"
></css-observe>
<!-- If a simple hyperlink slide is opened, hide the bottom hyperlink -->
<p-d-x
on="latest-match-changed"
to="a"
prop="dataset.xlp"
val="target.dataset.xlp"
m="1"
skip-init
></p-d-x>
<!-- If an iframe is opened, hide the bottom hyperlink-->
<css-observe
data-xlp="no"
id="iframeObserver"
observe
selector="iframe[preview]"
></css-observe>
<p-d-x
on="latest-match-changed"
to="a"
prop="dataset.xlp"
val="target.dataset.xlp"
m="1"
skip-init
></p-d-x>
<!-- Watch for link preview slides -->
<css-observe
data-xlp="yes"
id="xlpObserver"
observe
selector="xtal-link-preview[preview]"
></css-observe>
<!-- If a link preview slide is opened, show the hyperlink -->
<p-d-x
on="latest-match-changed"
to="a"
prop="dataset.xlp"
val="target.dataset.xlp"
m="1"
skip-init
></p-d-x>
<a class="preview-link" target="_blank">link</a>
<style>
a[data-xlp="no"] {
display: none;
}
xtal-siema {
max-width: 600px;
width: 100%;
}
xtal-siema div {
height: 99%;
}
xtal-link-preview:not([fetch-complete]) {
display: none;
}
a:not([href]) {
display: none;
}
a[preview-link] {
display: block;
margin-top: 30px;
}
xtal-link-preview,
.openingSlide {
display: flex;
flex-direction: column;
text-align: center;
height: 100%;
}
@media (min-width: 800px) {
xtal-siema {
height: 200px;
}
}
@media (max-width: 800px) {
xtal-siema {
height: 300px;
}
}
/* Add some padding inside the card container */
.container {
padding: 2px 16px;
}
.textDesc {
display: flex;
flex-direction: column;
justify-content: center;
}
/* .loader {
display:flex;
position: relative;
top: calc(50% - 40px);
left: calc(50% - 40px);
border: 16px solid #f3f3f3;
border-radius: 50%;
width: 40px;
height: 40px;
animation: spin 2s linear infinite;
} */
.loader {
width: 40px;
height: 40px;
border: 16px solid #f3f3f3;
border-radius: 50%;
animation: spin 2s linear infinite;
}
@keyframes spin {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
div[preview] {
display: flex;
flex-direction: row;
justify-content: center;
align-items: flex-start;
}
xtal-siema:not([data-selected-changed]) {
display: none;
}
details {
overflow: hidden;
}
</style>
<script src="https://cdn.jsdelivr.net/npm/@webcomponents/webcomponentsjs/webcomponents-loader.js"></script>
<script
type="module"
src="https://cdn.jsdelivr.net/npm/xtal-siema@0.0.24/xtal-siema.iife.js"
></script>
<script
type="module"
src="https://cdn.jsdelivr.net/npm/wired-elements@0.8.2/dist/wired-elements.bundled.min.js"
></script>
<script
type="module"
src="https://cdn.jsdelivr.net/npm/xtal-link-preview@0.0.38/dist/xtal-link-preview.iife.js"
></script>
<script
type="module"
src="https://cdn.jsdelivr.net/npm/p-d.p-u@0.0.91/dist/p-all.iife.js"
></script>
<script
type="module"
src="https://unpkg.com/css-observe@0.0.8/dist/css-observe.iife.js"
></script>
<script
async
src="https://platform.twitter.com/widgets.js"
charset="utf-8"
></script>
</div>
</template>
<script defer src="https://cdn.jsdelivr.net/npm/es-module-shims@0.2.0/dist/es-module-shims.js"></script>
<script type="importmap-shim">
{
"imports": {
"xtal-latx/": "https://cdn.jsdelivr.net/npm/xtal-latx@0.0.88/",
"trans-render/": "https://cdn.jsdelivr.net/npm/trans-render@0.0.60/",
"hypo-link/": "https://cdn.jsdelivr.net/npm/hypo-link@0.0.8/",
"xtal-element/": "https://cdn.jsdelivr.net/npm/xtal-element@0.0.23/",
"wc-info/": "https://cdn.jsdelivr.net/npm/wc-info@0.0.28/"
}
}
</script>
<script type="module-shim">
import 'wc-info/wc-info.js';
</script>
First, make sure you have the Polymer CLI and npm (packaged with Node.js) installed. Run npm install to install your element's dependencies, then run polymer serve to serve your element locally.
$ polymer serve
WIP