xtal-siema
Web component wrapper around the lightweight Siema carousel library
<xtal-siema>
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>
```
-->
Syntax
<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>
```
-->
Install the Polymer-CLI
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.
Viewing Your Element
$ polymer serve
Running Tests
WIP
Links
Compatibility
Was this helpful? Need more help?
Leave a comment or a question below. You can also join
the chat on Discord or
ask questions on StackOverflow.
Version
Dependencies
- @types/siema#^1.4.3
- siema#1.5.1
- xtal-element#0.0.29
- Released
- 2019-03-03
- Maturity
- IMPORTED
- License
- MIT License
Compatibility
- Framework
- Browser
- Browser Independent
xtal-siema - Vaadin Add-on Directory
Web component wrapper around the lightweight Siema carousel library[![Published on webcomponents.org](https://img.shields.io/badge/webcomponents.org-published-blue.svg)](https://www.webcomponents.org/element/bahrus/xtal-siema)
# \
Web component wrapper around the lightweight (3kb minified/gzipped) [Siema carousel library](https://pawelgrzybek.github.io/siema/).
In the demo below, drag with your mouse / finger. Or use next / previous buttons.
link
```
-->
## Syntax
```
-->
## Install the Polymer-CLI
First, make sure you have the [Polymer CLI](https://www.npmjs.com/package/polymer-cli) and npm (packaged with [Node.js](https://nodejs.org)) installed. Run `npm install` to install your element's dependencies, then run `polymer serve` to serve your element locally.
## Viewing Your Element
```
$ polymer serve
```
## Running Tests
WIP
Web Component links of interest
⚡
ExtJS 7
Vaadin Components
Vaadin Directory
ion-
AMP
Oracle Jet
Ionic Design
Onsen UI
Blaze UI
Bolt Design System
Patternfly
Material Web Components
Fuse Design Systems
Predix
elix
VS Code
lit-plugin
lit-html
comment-tagged-templates
Open-WC
Firefox Web Component Debugging
WCFactory
Edgewise
Imagine
Power of WCs
XBL => CE
CSS()
Best Practices Examples
udemy
MEAP
New Book
PluralSight
Styling Shadow DOM
Salesforce Vids
Gamepad Web Component
W3C Guidance
Pioneers
RHElements
���
Nutmeg
Gluon
HyperHTML Element
Haunted Hooks
Swiss Element
Atomico
SlimJS
SkateJS
x-tag
vue wc
decorate-element
@mikeal
Web Components in Sharepoint
night-lit
Micro Frontend
Whatsapp
Saving to Draft
Awesome Stencil
Awesome lit-html
Stencil Voice2Text
Music Markup components
A-frame Web VR
h-include
Polaris
JPMorgan Chase Perspecitve
Data Science WCs
Deck Deck Go
Lo-fi prototyping
Camera Component
Benchmarks
HNPWA Mobile Elements
Compost Elements
Vannilla WC PWA
Stencil Shimmer
CSS Doodle
Quick Draw
RapiDoc
Omi Charts
macro-carousel
Expand/Collapse Animations
Lottie Animations
Amp Viewer
Treegrid
Polymer Element wrapper for Handsontable
Org Charts
cd-carousel
Stencil fetch
Stencil Payment
SkateJS Router
America's Finest News Source