訪問聚合物元素的組合DOM

Question

我正在嘗試訪問瀏覽器呈現的DOM，以獲取聚合物元素，而不必關心http://www.polymer-project.org/platform中描述的來自“淺色”或“陰影” DOM的哪些位/shadow-dom.html ，但是我找不到任何允許我執行此操作的API文檔。

我可以看到聚合物元素上的.shadowRoots列表，並且可以看到常規的.children屬性，但是這兩個對獲取頁面上實際顯示的內容都不是特別有用。

獲取當前在瀏覽器中可見的DOM片段的正確方法是什么？ （或者，如果有人知道在聚合物網站上記錄的內容，我也很想知道。Google找不到我的幫助）

Answer 1

通常的想法是只考慮虛擬DOM（甚至更好的是，只考慮本地 DOM [divide and conquer 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>替換所有<content>元素，並在找到<shadow>元素時使用較早的影子根目錄進行遞歸。

當然，要獲取整個DOM樹，必須遍歷返回的數組並在每個元素上調用getComposedDOMChildren 。

就像是：

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

如果這不正確，請糾正我。