Nevertheless! Party Metaphorically

    xtal-siema

    0.0.37 • Public • Published

    Published on webcomponents.org

    <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

    Keywords

    none

    Install

    npm i xtal-siema

    DownloadsWeekly Downloads

    1

    Version

    0.0.37

    License

    MIT

    Unpacked Size

    251 kB

    Total Files

    23

    Last publish

    Collaborators

    • bahrus