oddbird / popover-polyfill

Polyfills the HTML popover attribute and showPopover/hidePopover/togglePopover methods onto HTMLElement, as well as the popovertarget and popovertargetaction attributes on <button> elements.
BSD 3-Clause "New" or "Revised" License
261 stars 13 forks source link

Popover Attribute Polyfill

Build Status npm version Netlify Status

This polyfills the HTML popover attribute and showPopover/hidePopover/togglePopover methods onto HTMLElement, as well as the popovertarget and popovertargetaction attributes on Button elements.

Polyfill Installation

Download a copy

The simplest, recommended way to install the polyfill is to copy it into your project.

Download popover.js (or popover.min.js) from unpkg.com and add it to the appropriate directory in your project. Then, include it where necessary with a <script> tag:

<script src="https://github.com/oddbird/popover-polyfill/raw/main/path/to/popover.min.js" type="module"></script>

Or without JavaScript modules:

<script src="https://github.com/oddbird/popover-polyfill/raw/main/path/to/popover.iife.min.js"></script>

Note that the JS will inject CSS styles into your document (or ShadowRoot).

With npm

For more advanced configuration, you can install with npm:

npm install @oddbird/popover-polyfill

After installing, you’ll need to use appropriate tooling to use node_modules/@oddbird/popover-polyfill/dist/popover.js.

For most tooling such as Vite, Webpack, and Parcel, that will look like this:

import '@oddbird/popover-polyfill';

If you want to manually apply the polyfill, you can instead import the isSupported and apply functions directly from node_modules/@oddbird/popover-polyfill/dist/popover-fn.js file.

With most tooling:

import { apply, isSupported } from '@oddbird/popover-polyfill/fn';

Or in CommonJS environments:

const { apply, isSupported } = require('@oddbird/popover-polyfill/fn');

An isPolyfilled function is also available, to detect if the Popover methods have been polyfilled:

import { isPolyfilled } from '@oddbird/popover-polyfill/fn';

Via CDN

For prototyping or testing, you can use the npm package via a Content Delivery Network. Avoid using JavaScript CDNs in production, for many good reasons such as performance and robustness.

<script
  src="https://cdn.jsdelivr.net/npm/@oddbird/popover-polyfill@latest"
  crossorigin="anonymous"
  defer
></script>

Usage

After installation the polyfill will automatically add the correct methods and attributes to the HTMLElement class.

Caveats

This polyfill is not a perfect replacement for the native behavior; there are some caveats which will need accommodations:

Contributing

Visit our contribution guidelines.

Sponsor OddBird's OSS Work

At OddBird, we love contributing to the languages & tools developers rely on. We're currently working on polyfills for new Popover & Anchor Positioning functionality, as well as CSS specifications for functions, mixins, and responsive typography. Help us keep this work sustainable and centered on your needs as a developer! We display sponsor logos and avatars on our website.

Sponsor OddBird's OSS Work