I remember a time when there were whole libraries dedicated to clipboard management.

Turns out in browsers released after ~2020 you can do it with one line:

navigator.clipboard.writeText(text).then(console.log).catch(console.error);

Some caveats:

• this only works in a secure context (which mostly means either “a site served over HTTPS” or localhost).
• the user needs to have interacted with the page before you can actually call the method.
• this was only added to certain browsers in 2020, so it's new enough that it might cause problems if your constituents have older devices or don't update often.

Usually when I do this I'm implementing something like a “copy to clipboard” button:

<span id='copy-target'>This text is going into a clipboard</span>
<button onclick='copyToClipboard("copy-target")'>Copy</button>
<script>
    const copyToClipboard = (target) => {
        const element = document.getElementById(target);
        const value = element?.innerText
        if (value) {
            navigator.clipboard.writeText(value).then(console.log).catch(console.error);
        }
    }
</script>

I was working on a custom element today that replaces a textarea with CodeMirror in the UI while still updating the textarea in the background so that it can be submitted in a form. I ran across a wild footgun in custom elements.

StackOverflow eventually provided the solution. There's a solution on stack overflow, but Danny Engleman wrote up a more thorough explanation.

When you're creating a custom element you do most of your setup in a method called connectedCallback. Here you can read the content of the custom element, replace it with different elements, set up callback handlers, etc.

Or so I thought.

You can read the attributes of the node just fine, but if you try to read its contents you'll find they aren't there. The reason is that the connectedCallback fires when the opening tag of the custom element is parsed, so the contents aren't in the DOM yet.

The solution is breathtakingly simple and silly: call setTimeout to defer initialization until after the DOM has been fully parsed.

export class MyCustomElement extends HTMLElement {
  initialize () {
    // Fancy custom element stuff goes here; you can safely access
    // `this.innerHTML` and stuff.
  }

  connectedCallback() {
    // Be sure to use an arrow function here or 'this' will be
    // messed up in `initialize.
    setTimeout(() => this.initialize(), 0)
  }
}