CopyToClipboard

About

Copies the value or text of the target element, the literal text attribute, or the button's own text. The button stays enabled and focused, the result is announced to screen readers, and data-copytoclipboard-state says whether it worked. When the button contains a [data-copytoclipboard-label] element, only its text is swapped for the message.

Usage

Register the component and the framework loads it the first time a page contains [data-copytoclipboard].

import { Parallelogram } from '@parallelogram-js/core';

const app = Parallelogram.create();
app.components.add('[data-copytoclipboard]', () => import('@parallelogram-js/core/components/CopyToClipboard'));
app.run();

The framework is optional. CopyToClipboard.enhanceAll() mounts the component on every matching element by itself, for a page that wants one enhancement rather than a framework:

import CopyToClipboard from '@parallelogram-js/core/components/CopyToClipboard';

CopyToClipboard.enhanceAll();

It takes a selector and the component's options, and returns the instance it mounted them with. What it leaves out is what the framework adds: loading a component only on the pages that use it, mounting again after a page swap, and ordering with dependsOn.