title: How to avoid style injection in WooCommerce email templates
body: <p>There are some HTML elements in the template, for example, <a href="https://github.com/woocommerce/woocommerce/blob/trunk/templates/emails/email-header.php#L41" rel="nofollow noreferrer">templates/emails/email-header.php</a> on line 41 <code>table#template_container</code>, that has no inline styles:</p>
  <pre><code>&lt;table border=&quot;0&quot; cellpadding=&quot;0&quot; cellspacing=&quot;0&quot; width=&quot;600&quot; id=&quot;template_container&quot;&gt;
  </code></pre>
  <p>But when it is rendered in the front end it appears with a lot of inline style:</p>
  <pre><code>&lt;table border=&quot;0&quot; cellpadding=&quot;0&quot; cellspacing=&quot;0&quot; width=&quot;600&quot; id=&quot;template_container&quot;
  style=&quot;background-color: #ffffff; border: 1px solid #dedede; box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1); border-radius: 3px;&quot;&gt;
  </code></pre>
  <p>How and where is done this style injection?</p>
  <p>How can avoid this style injection?</p>
  <p>I want to write my own inline styles in the template. What is de right way to do it?</p>
  <p>I've notice that some injections, like the above example, depends on ID of element, so I can remove their ID, but others cases come in a variable, like <a href="https://github.com/woocommerce/woocommerce/blob/trunk/templates/emails/email-header.php#L48" rel="nofollow noreferrer">templates/emails/email-header.php</a> on line 48:</p>
  <pre><code>&lt;h1&gt;&lt;?php echo $email_heading; ?&gt;&lt;/h1&gt;
  </code></pre>
  <p>It is rendered as:</p>
  <pre><code>&lt;h1 style=&quot;font-family: &amp;quot;Helvetica Neue&amp;quot;, Helvetica, Roboto, Arial, sans-serif; font-size: 30px; font-weight: 300; line-height: 150%; margin: 0; text-align: left; text-shadow: 0 1px 0 #ffffff; color: #202020; background-color: inherit;&quot;&gt;HTML email template&lt;/h1&gt;
  </code></pre>
  <p>Any help appreciated. Thank you.</p>