title: Is it possible to prevent the browser from parsing certain elements?
body: <p>Consider the following markup:</p>
  
  <pre><code>&lt;div hidden id="table-template"&gt;
  &lt;table&gt;
  &lt;tbody&gt;
    &lt;slot&gt;&lt;/slot&gt;
  &lt;/tbody&gt;
  &lt;/table&gt;
  &lt;/div&gt;
  &lt;div hidden id="table-row-template"&gt;
  &lt;tr&gt;
    &lt;td&gt;
      Some Content
    &lt;/td&gt;
  &lt;/tr&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>I would like to use 'table-template' and 'table-row-template' as re-usable components in my script.
  (clone them and append them on demand)
  but as the page loads the browser parses the markup and mutates it (taking 'slot' element and insert it before the 'table' element, and stripping 'td' and 'tr' tags).</p>
  
  <p>This is reasonable (not valid HTML of course), but is there any way I can prevent the browser from parsing those elements?</p>
  
  <p>So far I have tried:
  using hidden elements,
  wrapping with 'pre'/'code' tags,
  but none seem to work.</p>