jquery - $().html 附加到影子 DOM 而不是替换

Question

我的页面包含一个或多个 <article>每个都包含 <nav>和一个 <section class='app-content'>托管影子 DOM。我想以编程方式将多个模板之一加载到 <section>当用户单击 <nav> 中的元素时.

我这里有一个辅助函数，它应该采用 <nav> 的单击子项并找到关联的<section> ，然后创建或获取对影子 DOM 的引用，清除内容，然后插入模板的内容。

  //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));
  }

模板目前只有 <p>元素。

问题是，我最终得到了一个 <p> 的列表在影子 DOM 中，一次不仅仅是一个。如果我使用 .append() 它的行为完全相同而不是.html() 。我尝试过不使用jquery而只使用普通的DOM函数，我尝试过.empty()的各种组合。 , .replaceWith()等

我使用的是最新版本的 Chrome，仅使用 jquery 和 native API，没有使用其他库。

这是一个带有完整代码的jsbin:https://jsbin.com/fiwago/edit?html,output

有趣的是，当天早些时候的这段代码是有效的，但是控制台发出了调用 createShadowRoot 的警告声。已弃用。

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

Answer 1

通过在 shadowDOM 上使用 native JS 而不是 jquery，我终于让它工作了。我不确定为什么会发生这种情况，我认为这是 jquery 内部的一些东西，它对影子 DOM 不太满意，但我不知道。

这是工作代码:

  //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 {
      shadowDOM = $contentPane[0].createShadowRoot();
    }
    while (shadowDOM.firstChild) {
      shadowDOM.removeChild(shadowDOM.firstChild);
    }
    shadowDOM.appendChild(document.importNode(
        document.getElementById(content_to_load).content, true)
    );
  }

我必须使用 jquery 来选择正确的 Pane ，但这不适用于该问题，我切换到 if block 内的常规 DOM 树。

棘手的是，当我简单地尝试 shadowDOM.removeChild(shadowDOM.firstChild) 时，它抛出了一个异常:firstChild 未定义，无法删除。由于某种原因，在循环中检查 firstChild 可以解决问题，但代码从不使用循环，我在其中放入 console.log ，但它从未打印。如果您注释掉 while 循环，它会追加而不每次都替换。

我希望这一堆意大利面条有一天能帮助别人。

如果有人可以解释该行为，或确认错误，请告诉我，我会提交。