A collection of web components implementing portions of the OpenWeatherMap API.
Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
assets
bin
config
fixtures
lib
src
.editorconfig
.eslintrc
.gitignore
README.md
package-lock.json
package.json

README.md

x-weather

About

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

  <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'