<baseline-status> web component

A widget displaying Baseline status of a web feature based on https://github.com/web-platform-dx/web-features data.

This is a thin fork of the original repo.

Advantages

• It's not built on a larger web component library
• It's using a tiny and simple base class
• Compressed icons
• Web component name is customizable
• You can bring your own icons (eg. boneless)

Example

Show Baseline status widget for anchor-positioning:

<baseline-status featureId="anchor-positioning"></baseline-status>
<!-- <baseline-icon support="limited"></baseline-icon> -->

Register the BaselineStatus and optionally BaselineIcon web components.

import { BaselineStatus, BaselineIcon } from "@karesztrk/baseline-status";

customElements.define("baseline-icon", BaselineIcon);
customElements.define("baseline-status", BaselineStatus);

Or you can use the static helper

import { BaselineStatus } from "@karesztrk/baseline-status";

class YourComponent extends BaselineStatus {
  static {
    this.register("baseline-status", YourComponent);
  }
}

export default YourComponent;

Custom icons

You can register your own icons with the BonelessStatus web component. Where does this name is coming from? Check this blog post from Adam. Why? Wrapping SVG images inside JS files increases the bundle size and blocks the caching capability of modern browsers.

import { BonelessStatus, BaselineIcon } from "@karesztrk/baseline-status";

customElements.define("baseline-icon", BaselineIcon);
customElements.define("baseline-status", BonelessStatus);

<boneless-status featureId="array">
  <template id="icons">
    <svg slot="chrome"></svg>
    <svg slot="edge"></svg>
    <svg slot="firefox"></svg>
    <svg slot="safari"></svg>
    <svg slot="available"></svg>
    <svg slot="unavailable"></svg>
    <svg slot="no_data"></svg>
  </template>
</boneless-status>

Usage

Install and bundle with your application.

Install

pnpm install @karesztrk/baseline-status
# or npm install @karesztrk/baseline-status

See docs for example usage in HTML.

See rollup.config.js for an example of a bundler configuration.

Development

Run locally:

pnpm run serve

The local server uses wds @web/dev-server package. To enable web component related polyfills for legacy browsers, it uses @web/dev-server-legacy package. See web-dev-server.config file for the exact configuration.