title: Is there a way to target a specific element using Puppeteer AND preserve the CSS when converting html to pdf?
body: <p>I'd like to convert <strong>some</strong> html to a pdf file. The problem is that I just need a part of a webpage and most certainly not all elements. So I was wondering if there is a way to target a single element with a specific <code>id</code> for example, so that only that element gets converted to a pdf?</p>
  <p>I know I can do this for example:</p>
  <pre><code>const dom = await page.$eval('div.jsb', (element) =&gt; {
       return element.innerHTML
  }) // Get DOM HTML
  await page.setContent(dom)   // HTML markup to assign to the page for generate pdf
  </code></pre>
  <p>However, using the code above won't preserve the CSS...</p>
  <p>It is also not an option to use <code>page.addStyleTag</code> to add the css by hand, since the element I am trying to convert to a pdf has loads and loads of CSS styles already applied to it...</p>
  <p>So the question remains, how can I convert a single element on a page using Puppeteer (or if you know of other ways / methods / libraries, then those are welcome too of course).</p>
  <p><a href="https://grabz.it/api/nodejs/grabzitclient.aspx#pdfoptions" rel="nofollow noreferrer">Grabzit</a> for example allows to you to specify the <code>targetElement</code> in their options like so:</p>
  <pre><code>const options = {
     'targetElement': '#rightContent',
     'pagesize': 'A4',
  }
  </code></pre>
  <p>Unfortunately, it does not give me consistent results.</p>