copy-component - a vanilla web component

Installation

Install the package:

npm install copy-component

Import the module to be handled by your bundler (or not). If you'd prefer to just embed the library in your code you can import it directly from a CDN, shown below.

import "copy-component";

<copy-component>
  <p>
    Hello<br />
    world
  </p>
  <button slot="button">Copy</button>
</copy-component>

From CDN:

<script type="module" src="https://cdn.skypack.dev/copy-component?min"></script>

Here is an un-styled Codepen.

Basic usage

Any HTML inside of the copy-component tag will be made copy-able. You will likely want to add in a button to trigger the copy, to do this you must set the attribute slot="button" on your button (or a parent of the button). Formatting is preserved on copy.

Of course, all of the "Copy buttons" on this website use copy-component 😊.

<copy-component>
  <p>
    Hello<br />
    world
  </p>
  <button slot="button">Copy</button>
</copy-component>

copy-component {
  position: relative;
  border: 2px lightgrey dashed;
}

copy-component > *:not([slot="button"]) {
  margin: 1rem;
}
copy-component button {
  position: absolute;
  text-transform: uppercase;
  background: rgba(0, 0, 0, 0.3);
  color: white;
  top: 0;
  right: 0;
  border: none;
}

copy-component button:active {
  background: rgba(0, 0, 0, 0.8);
}

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 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).

Events

Custom events are fired the following:

copy - when copy succeeds
copy-failed - when copy fails

<copy-component>
  <p>
    Hello<br />
    world
  </p>
  <button id="copy-button" slot="button">Copy</button>
</copy-component>

document.body.addEventListener("copy", () => {
  document.getElementById("copy-button").innerText = "Copied!";
});

copy-component {
  position: relative;
  display: flex;
  border: 2px lightgrey dashed;
}

copy-component > *:not([slot="button"]) {
  margin: 1rem;
}
copy-component button {
  position: absolute;
  text-transform: uppercase;
  background: rgba(0, 0, 0, 0.5);
  color: white;
  top: 0;
  right: 0;
  border: none;
}

copy-component button:active {
  background: rgba(0, 0, 0, 0.8);
}

Check out the codepen.

Markdown

Because Web Components are html you can wrap any markdown text/elements you like in a copy-component

e.g.

<copy-component
  oncopy="this.querySelector('[slot=button]').textContent='Copied'"
  style="display: block;"
>
  ```js console.log("hello world!"); ```

  <button style="text-transform: uppercase" slot="button">Copy here</button>
</copy-component>

11ty

To automatically add copyable text snippets to your 11ty site from your markdown checkout this 11ty plugin.

```html
<p>Your blog post code</p>
```