title: Does the shadow DOM replace ::before and ::after?
body: <p><a href="http://www.w3.org/TR/css-scoping-1/#shadow-dom" rel="noreferrer">CSS Scoping</a> says</p>
  
  <blockquote>
    <p>The descendants of a <a href="http://www.w3.org/TR/css-scoping-1/#shadow-host" rel="noreferrer">shadow host</a> must not generate boxes in the
    formatting tree. Instead, the contents of the <a href="http://www.w3.org/TR/css-scoping-1/#active-shadow-tree" rel="noreferrer">active shadow tree</a>
    generate boxes as if they were the contents of the element instead.</p>
  </blockquote>
  
  <p><a href="http://www.w3.org/TR/css-pseudo-4/#generated-content" rel="noreferrer">CSS Pseudo-Elements</a> describes <code>::before</code> and <code>::after</code> as </p>
  
  <blockquote>
    <p>these pseudo-elements generate boxes as if they were immediate
    children of their <em>originating element</em></p>
  </blockquote>
  
  <p>So which of these is true?</p>
  
  <ul>
  <li>First, all the contents of the shadow host (not including <code>::before</code> and <code>::after</code>) are replaced by the contents of the active shadow tree. And then, <code>::before</code> and <code>::after</code> generate boxes in the shadow host.</li>
  <li>First, <code>::before</code> and <code>::after</code> generate boxes in the shadow host. And then, all the contents of the shadow host (including <code>::before</code> and <code>::after</code>) are replaced by the contents of the active shadow tree.</li>
  </ul>
  
  <p>Firefox and Chrome do the former, but does the spec describe the behavior?</p>
  
  <p><div class="snippet" data-lang="js" data-hide="true" data-console="false" data-babel="false">
  <div class="snippet-code snippet-currently-hidden">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>var root = document.querySelector('div').createShadowRoot();
  root.innerHTML = "&lt;p&gt;Shadow content&lt;/p&gt;";</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>div::before, div::after {
    content: 'Generated content';
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div&gt;Content&lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>