Question

我正在尝试访问浏览器渲染的DOM以获取聚合物元素，而不是像http://www.polymer-project.org/platform/shadow-dom.html中所描述的那样来自“光”或“阴影”DOM中的哪些位，但我找不到关于访问函数的任何API文档都可以让我这样做。

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

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

Answer 1

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

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

最终会有某种特殊用途，但我鼓励你尝试采用一种心理模型，让你避免提出这个问题。

Answer 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]);
  }
}

如果这不对，请纠正我。

访问聚合物元素的组合DOM

2 个答案: