Copy Custom Element Exploration

Shoelace

Notes: Loads 139kb of JavaScript (32 requests and 69kb transferred).

https://cdn.jsdelivr.net/npm/@shoelace-style/shoelace@2.16.0/cdn/components/copy-button/copy-button.js

Github

Copy the stuff

Notes: 6kb of JavaScript (4.3kb transferred in 4 requests with a waterfall). Must use events to provide feedback to the user. Definitely most popular with 42K weekly downloads on NPM. Must use ‘id’ as the selector.

https://cdn.jsdelivr.net/npm/@github/clipboard-copy-element@1.3.0/dist/index.js

copy-button

https://github.com/sudodoki/copy-button

Notes: Last update 8 years ago. uses old custom elements spec

@georapbox/clipboard-copy-element

Copy the stuff

https://github.com/georapbox/clipboard-copy-element

Notes: Solidly made and continually updated, no default styles, changes text from “copy” to “copied”. 3.9kb JS to 2.1kb transferred in one request

https://cdn.jsdelivr.net/npm/@georapbox/clipboard-copy-element@3.0.2/dist/clipboard-copy-defined.js

copy-component

https://github.com/Georgegriff/copy-component

Must wrap the thing it’s copying

Notes: demo page does not work on FF, published 3 years ago and not updated, couldn’t get it to work with JS Deliver because it doesn’t use the file extension :(

https://cdn.skypack.dev/-/copy-component@v0.3.0-i8ga7m09IakoLJwhFHLy/dist=es2019,mode=imports,min/optimized/copy-component.js

What do I want?