x-weather

About

• A collection of web components implementing portions of the OpenWeatherMap API.

  

Installation

Add Internet Explorer 11 compatible polyfills

<div id="ce-es5-shim">
  <script>
    if (!window.customElements) {
      var ceShimContainer = document.querySelector('#ce-es5-shim')

      // This prevents custom-elements-es5-adapter.js from parsing or running.
      ceShimContainer.parentElement.removeChild(ceShimContainer)
    }
  </script>

  <!-- Required, due to a conflict between the polyfills, transpilation, and IE... -->
  <script
    charset="utf-8"
    src="https://cdn.jsdelivr.net/npm/@webcomponents/webcomponentsjs/custom-elements-es5-adapter.js"
  ></script>
</div>

<!-- Web component polyfill (only loads what it needs) -->
<script
  charset="utf-8"
  src="https://cdn.jsdelivr.net/npm/@webcomponents/webcomponentsjs/webcomponents-lite.js"
></script>

Load and register the web component in the CustomElementRegistry

<script src="https://cdn.jsdelivr.net/npm/x-weather@latest/lib/build-ie11-iife/iife/main.js"></script>

Usage

• After installation and signing up for an API key, use the custom element:

<x-weather
  appid="NOT_A_REAL_API_KEY"
  host="api.openweathermap.org"
  location="Phoenix, Arizona"
>
  <x-current scale="F"></x-current>
  <x-forecast days="2" scale="F"></x-forecast>
</x-weather>

Additional information

• Other builds and examples (including basic service workers) can be found inside the lib folder
• The package can be installed and imported by npm:
  • npm i x-weather
  • import 'x-weather/lib/build-no-polyfills-esm/esm/main'