HTML on the Clipboard: Oh, what shall we copy?
Tags: javascript, clipboard, copy
Published: 2021-10-27 10:06:40

Thus far we've look at the [motivations](https://dev.to/thumbone/the-thing-is-on-awesomeness-and-motivation-2i0j), a [first cut](https://dev.to/thumbone/copy-to-clipboard-first-cut-1j5j) and the [options](https://dev.to/thumbone/copy-to-clipboard-the-options-1a07) when it comes to copying an HTML element to the clipboard for pasting elsewhere, ideally into an email. Now we take a look at what exactly to copy the clipboard.

Seemed obvious to me, the HTML element in question, well it's `outerHTML` anyhow. But alas, life is never quite that simple. The element and all its children contain many `class` attributes referring to classes that have styles defined elsewhere in stylesheets. When pasted into a new context, those stylesheets are not available, and all the styling is lost.
![Where's That Style?](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ja8nyke2odujb0jhu8cf.gif)

#A `<style>` tag: the easy way :fire:

The easiest way by a good measure is to add also a `<style> ` tag that describes all the styling rules for the referenced classes. They are readily accessible in `document.styleSheets` after all. And doing that works. The result, pasted into an HTML context is fully styled - generally ... Alas, if the target is an email client and the thus-styled email is sent, then the `<style>` is not honored by most readers. Either ignored or even filtered out.

So much for that. A half measure, and certainly fine if for example pasting into any other HTML context that doesn't pull such sneaky tricks, be that a document or HTML editor or whatever. It has the attendant advantage that pseudo classes like [`:hover`](https://developer.mozilla.org/en-US/docs/Web/CSS/:hover) are carried along and so the result is dynamic still and things like style based Tool Tips work in the pasted copy. 

So this is definitely worth keeping as an option!
![A Style Tag](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/y3vz6mmhxovt8u3apbf4.jpg)

#`style` attributes, a.k.a. inlining style: the hard way :sweat_drops:

Styling can also be described using the [`style`](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/style) attribute on each individual  element rather than `class` attributes. Known as inline styling and in disfavour generally in web design (in no small part because of needless repetition).

But inline styles in HTML emails *are* honored by most email readers - certainly all clients I tested do honor that styling. 

That works wonderfully.![Inlining Style](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/5n1vtplofqdcoyf4r2cx.png)As an aside, the clue that took me there, was the basic [Select and Copy](https://dev.to/thumbone/copy-to-clipboard-the-options-1a07#select-and-copy-thumbsdown) experience we started with. That is, when selecting parts of a web page in Chrome-based browsers and pasting into an HTML context, if we examine the source we see all the style information has been in-lined. Namely, all the styles that `class` attributes described have been moved to `style` attributes. And no surprise, when  we do the same, in Firefox, and paste it, the styling is mostly lost and examining the source reveals Firefox did not in-line the styles! The penny dropped! Now I finally understood by what mechanism Chrome succeeded and Firefox failed to retain styles when copying from a selection.

And so a new mission is born... to in-line the styles. Should be easy ... Chrome does it. But then again.

As it happens, in-lining styles is frustratingly non-trivial, nor a clearly solved problem, even though Chrome clearly does it ... and so it's a topic unto itself (next article)