Question

我正在从事一个Polymer2阴影dom模板项目，需要从父元素中选择子元素。我发现article引入了一种选择像这样的子阴影dom元素的方法：

// No fun.
document.querySelector('x-tabs').shadowRoot
        .querySelector('x-panel').shadowRoot
        .querySelector('#foo');

// Fun.
document.querySelector('x-tabs::shadow x-panel::shadow #foo');

但是，当我尝试执行Polymer2项目时，就像这样：

    //First: works!!
    document.querySelector('container')
                        .shadowRoot.querySelector('app-grid')
                        .shadowRoot.querySelector('#apps');
   //Second: Doesn't work!// got null
document.querySelector('container::shadow app-grid::shadow #apps')
// Thrird: document.querySelector('* /deep/ #apps') // Doesn't work, got null

我确实需要第二种方法或第三种方法，将选择器放在（）中，但两者都无法工作。有谁知道第二个为什么不起作用？非常感谢！

Answer 1

:: shadow和/ deep /从未在Firefox中运行，并且在Chrome 63及更高版本中不受欢迎。

Source

Eric Biedelman编写了nice querySelector method，用于使用影子DOM在页面上查找所有自定义元素。我自己不会使用它，但是已经实现了它，因此可以在控制台中“ querySelect”自定义元素。这是他的修改后的代码：

// EXAMPLES
// findCustomElement('app-grid')        // Returns app-grid element
// findCustomElements('dom-if')         // Returns an array of dom-if elements (if there are several ones)
// findCustomElement('app-grid').props  // Returns properties of the app-grid element

function findCustomElement(customElementName) {
  const allCustomElements = [];

  customElementName = (customElementName) ? customElementName.toLowerCase() : customElementName;

  function isCustomElement(el) {
    const isAttr = el.getAttribute('is');
    // Check for <super-button> and <button is="super-button">.
    return el.localName.includes('-') || isAttr && isAttr.includes('-');
  }

  function findAllCustomElements(nodes) {
    for (let i = 0, el; el = nodes[i]; ++i) {
      if (isCustomElement(el)) {
        el.props = el.__data__ || el.__data || "Doesn't have any properties";

        if (customElementName && customElementName === el.tagName.toLowerCase()) {
          allCustomElements.push(el);
        } else if (!customElementName) {
          allCustomElements.push(el);
        }
      }
      // If the element has shadow DOM, dig deeper.
      if (el.shadowRoot) {
        findAllCustomElements(el.shadowRoot.querySelectorAll('*'));
      }
    }
  }

  findAllCustomElements(document.querySelectorAll('*'));

  if (allCustomElements.length < 2) {
    return allCustomElements[0] || customElementName + " not found";
  } else if (customElementName) {
    allCustomElements.props = "Several elements found of type " + customElementName;
  }

  return allCustomElements;
}

删除if (isCustomElement(el)) {语句，然后可以查询选择任何元素，如果存在多个元素，则获取该元素的数组。您可以使用findAllCustomElements上的递归循环来更改querySelect以实现更智能的shadowDoom。再说一次，我不会自己使用它-而是将变量从父元素传递给孩子，而孩子具有observers来激活特定行为-但是我想给你一个通用的后备实现没有其他办法。

您所遇到的问题是，您没有首先提供要选择孩子的原因的详细信息。

Polymer2 Shadow dom选择子元素

1 个答案: