Polymer2 Shadow dom выберите дочерний элемент

Question

Я работаю над шаблоном проекта poly2 shadow dom, чтобы выбрать дочерние элементы из родительских элементов.Я обнаружил, что статья представляет способ выбора дочерних теневых элементов 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 и более поздних версиях.

Источник

---

Эрик Бидельман написал хороший querySelector метод для поиска всех пользовательских элементов на странице с использованием теневого DOM.Я бы не стал использовать его сам, но я реализовал его, чтобы я мог запросить пользовательские элементы в консоли.Вот его модифицированный код:

// 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, который активирует определенное поведение - но я хотел бы дать вам общую реализацию запасного варианта, если ничего большеработает.

Проблема с вашим вопросом заключается в том, что вы не даете никакой информации о том, ПОЧЕМУ вы хотите выбрать детей.