$().html appends to shadow DOM instead of replace
<p>I have a page with one or more <code>&lt;article&gt;</code>s that each contain a <code>&lt;nav&gt;</code> and a <code>&lt;section class='app-content'&gt;</code> hosting a shadow DOM.  I want to programmatically load one of several templates to the <code>&lt;section&gt;</code> when a user clicks an element in the <code>&lt;nav&gt;</code>.</p>

<p>I have a helper function here, it should take the clicked child of <code>&lt;nav&gt;</code> and find the associated <code>&lt;section&gt;</code>, then either create or get a reference to the shadow DOM, clear the content, and insert the content of a template.</p>

<pre><code>  //maps menu event to content container
  //loads one of several templates, replacing content
  function replaceShadowContent(nav_elem_clicked, content_to_load) {
    var $contentPane = $(nav_elem_clicked).parentsUntil('article').next();
    var shadowDOM;//$contentPane[0].shadowRoot;
    if (!!$contentPane[0].shadowRoot) {
      shadowDOM = $contentPane[0].shadowRoot;
    } else {
      console.log('make new shadow root');
      shadowDOM = $contentPane[0].createShadowRoot();
    }
    $(shadowDOM).html(document.importNode(document.getElementById(content_to_load).content, true));
  }
</code></pre>

<p>The templates, for now, just <code>&lt;p&gt;</code> elements.</p>

<p>The problem is, I end up with a list of <code>&lt;p&gt;</code>s in the shadow DOM rathar than just one at a time.  It behaves exactly the same if I use <code>.append()</code> instead of <code>.html()</code>.  I have tried doing it without jquery and only using normal DOM functions, I have tried various combinations of <code>.empty()</code>,<code>.replaceWith()</code>, etc.</p>

<p>I'm on the latest version of Chrome, using only jquery and the native API, no other libraries.</p>

<p>Here is a jsbin with the complete code: <a href="https://jsbin.com/fiwago/edit?html,output" rel="nofollow">https://jsbin.com/fiwago/edit?html,output</a></p>

<p>Interestingly, this snippet from earlier in the day worked, but the console squawked that calling <code>createShadowRoot</code> was deprecated.</p>

<pre><code>      var $contentPane = $(this).parentsUntil('article').next();
      var shadowDOM = $contentPane[0].createShadowRoot();
      shadowDOM.appendChild(document.importNode(document.getElementById('simple-widget').content, true));
</code></pre>