x-weather
A collection of Web Components implementing portions of the OpenWeatherMap API.
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'
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
- express#^4.16.3
- Released
- 2018-12-28
- Maturity
- IMPORTED
- License
- GNU Affero General Public License v3.0
Compatibility
- Framework
- Browser
- Browser Independent