I have a generic utility LWC to copy a bunch of text to clipboard on a button click. Content of the LWC is generated dynamically and could contain a list of items, each item can contain Hyperlinks as well. To sum it up, if I have a LWC that generates this below, how do I copy the content of this div to a clipboard with the hyperlink on a button click ?
<template>
<div class="container">
<a href="https://www.google.com"> Go to Google </a>
</div>
<template>
So far, I've tried this in my LWC JS and it throws an error
const container = this.template.querySelector(".container");
const range = document.createRange();
range.selectNode(container);
const selection = window.getSelection();
selection.removeAllRanges();
selection.addRange(range);
const successful = document.execCommand('copy');
Error that's thrown is Failed to execute 'addRange' on 'Selection': parameter 1 is not of type 'Range'.]
Also, I've tried dynamically adding a textarea(hidden) to the dom and copy, but that doesn't support copying Hyperlinks, but only text.
How do I get to copy the entire div(with hyperelink) to clipboard here ?