copy-component

copy-component

A Vanilla web component to wrap copy-able text/html elements and add their inner text to the clipboard.

• Zero dependencies
• Browser support: Modern, requires support for Web Component APIs (v1).
• Limitation: In order to ensure that formatting can be copied this component requires you to [wrap your copyable content in a single element)[#limitations].

Live Demos

Usage:

// assumes resolving from node_modules or import as a esm module in your html.
import "copy-component";

Wrap html elements for example some pre formatted code:

<copy-component>
  <pre><code class="language-js">
  console.log("some code")
</code></pre>
  <button slot="button">Copy</button>
</copy-component>

Events

• copy - Fired on copy success
• copy-failed - Fired on copy failed

document.querySelector("copy-component").addEventListener("copy", () => {
  // do something e.g. change your button text to "Copied"
});

Limitations

In order to preserve the formatting of copied content you must wrap your content you want to copy in single parent dom node i.e.

<copy-component>
  <div>
    <p>Stuff to copy</p>
    <br />
    <p>Copy me too!</p>
  </div>
  <button slot="button">Copy me!</button>
</copy-component>

NOT

<copy-component>
  <p>Stuff to copy</p>
  <br />
  <p>Copy me too!</p>
  <button slot="button">Copy me!</button>
</copy-component>

This is because due to how shadow dom works, it is not possible to get the formatted inner text of a single slot without also getting the text of the other slots (e.g. the button slot).

Programmatic API

Because this is a web component it can expose properties on the html element that can be accessed by javascript.

Say you have the following html without a copy button, you could trigger copying via code.

<copy-component>
  <pre><code class="language-js">
  console.log("some code")
</code></pre>
</copy-component>

like so:

await document.querySelector("copy-component").copy();

Load from CDN:

<script type="module">
  import copyComponent from "https://cdn.skypack.dev/copy-component";
</script>

Use within a static site generator:

TODO