Элемент запроса во вложенном теневом корне - PullRequest
Новая
       17

Элемент запроса во вложенном теневом корне

0 голосов
/ 09 октября 2019

Scenerio : В моем приложении я вложил shadow-root , и я хочу получить элемент во inner shadow-root из external shadow-root .

На самом деле я имею в виду, что рассмотрим это scenerio. 

<Component 1 id="headerComponent">
#shadow-root // outer shadow-root.
  <div class="header"></div> // element in outer shadow-root.
  #shadow-root // inner shadow-root.
    <Component 2 id="titleComponent"> // We have component 2 inside the shadow root of component 1.
       <input class="titleInput"> // element inside inner shadow-root.

Теперь, если я нахожусь в Component 1.js и хочу запросить любой элемент в Component 1.js, я напишу этот блок кода this.shadowRoot.querySelector('.header');, и он хорошо работает.

Но, если я нахожусь в Component 1.js и хочу запросить элемент ( здесь это <input>с классом titleInput ) в Component 2.js, Как я могу это сделать?

Попытка подобного выражения, как this.shadowRoot.querySelector('.titleInput');, кажется не работает и возвращает null.

1 Ответ

1 голос
/ 09 октября 2019

Мне удалось решить проблему. Вот фрагмент кода js, который сотворит магию. 

this.$.titleComponent.shadowRoot.querySelector('.input-wrap');

Для тех, кто не знаком с полимерной архитектурой.

Здесь, как я в Component 1. Так, this относится к компоненту 1 (методы, свойства и компоненты класса Component 1. $ Используется для выбора элементов внутри шаблона класса Компонента 1 с идентификатором, за которым следует this. $. ElementID), this.$.titleComponent select titleComponent и этот оператор выбирает элемент shadowRoot.querySelector('.input-wrap').

...