访问聚合物元素的组合 DOM答案

【问题标题】：Accessing the composed DOM for a polymer element访问聚合物元素的组合 DOM
【发布时间】：2014-07-14 13:55:36
【问题描述】：

我正在尝试访问浏览器呈现的 DOM 以获取聚合物元素，丝毫不关心来自 http://www.polymer-project.org/platform/shadow-dom.html 中描述的“光”或“阴影”DOM 中的哪些位，但我找不到任何 API有关让我这样做的访问功能的文档。

我可以看到聚合物元素上的.shadowRoots 列表，我可以看到常规的.children 属性，但这些对于获取页面上实际显示的内容都不是特别有用。

获取当前在浏览器中可见的 DOM 片段的正确方法是什么？（或者如果有人知道聚合物网站上记录的位置，我也很想知道。谷歌找不到我）

【问题讨论】：

标签： polymer

【解决方案1】：

一般的想法是只考虑您的虚拟 DOM（甚至更好，只考虑本地 DOM [分而治之 ftw]）。

因此，今天没有（简单的）方法来检查组合的 DOM。

最终会有这样一种方法用于某些特定用途，但我鼓励你尝试采用一种心理模型，让你避免问这个问题。

【讨论】：

这与心智模型无关：我需要知道浏览器向用户展示了什么，而不仅仅是存在哪些潜在数据 =)
我面临的问题是我有一个包含其他自定义元素的自定义元素 - 聚合物通过这些元素运行并在元素不是实际上时触发“dom insert”事件添加到 DOM，但添加到 dom 片段：<a><b></b></a> 将首先触发 b 的插入到无头 domfragment 中，但是当该片段链接到 a 时永远不会触发事件：我怎么知道@ 987654324@ 实际上在页面上使用，即我的用户正在查看它，与之交互，并且它位于 a 元素内，因此我可以使 b 行为正确
我不确定“dom 插入事件”指的是什么。如果您的意思是调用attachedCallback 或attached，则仅当元素成为主文档 的一部分时才会触发。如果您有反例，您应该发布错误报告。
我试过attachedCallback，当它被Polymer读入时，它会触发b，但在它的祖先链包含a之前。
我有点紧张，因为我们在“composed dom”的标题下进行了这个讨论，因为这根本不是同一个问题。 Fwiw，到目前为止，您还没有描述任何实际上取决于询问组合树的问题。

【解决方案2】：

这是我出于相同目的而写的：

  function getComposedDOMChildren (root) {
    if (root.shadowRoot) {
      root = root.shadowRoot;
    }
    var children = [];
    for (var i = 0; i < root.children.length; i++) {
      if (root.children[i].tagName === 'CONTENT') {
        children.push.apply(children, root.children[i].getDistributedNodes());
      } else if (root.children[i].tagName === 'SHADOW') {
        var shadowRoot = root;
        while (!shadowRoot.host) {
          shadowRoot = shadowRoot.parentNode;
        }
        children.push.apply(children, getComposedDOMChildren(shadowRoot.olderShadowRoot));
      } else {
        children.push(root.children[i]);
      }
    }
    return children;
  }

它根据组合的 DOM 返回一个包含 root 子级的数组。它的工作原理是进入影子根并将所有<content> 元素替换为其中实际呈现的内容，并在找到<shadow> 元素时使用早期的影子根进行递归。

当然，要获取整个 DOM 树，必须遍历返回的数组并在每个元素上调用 getComposedDOMChildren。

类似：

function traverse (root) {
  var children = getComposedDOMChildren(root);
  for (var i = 0; i < children.length; i++) {
    traverse(children[i]);
  }
}

如有不妥请指正。

【讨论】：