Событие принудительной фокусировки внутри элемента слота - PullRequest
Новая
       50

Событие принудительной фокусировки внутри элемента слота

0 голосов
/ 14 февраля 2019

Я пытаюсь сфокусировать элемент, который находится внутри элемента слота, который используется в пользовательском элементе.

Внутри моего пользовательского элемента я запрашиваю элемент slot, затем использую метод .assignedElements, который представляет собой всего один div, а затем запрашиваю внутри этого элемента, чтобы найти нужный ввод.После этого я использую метод .focus () для фокусировки ввода. Но это не работает.

Пожалуйста, дайте мне знать, если кто-то может помочь

В настоящее время я делаю все это с компонентом трафарета.

Веб-компонент трафарета. 

<tab-component> This is a web-component with a render method that returns <slot>
now I use tab-component inside of another web-component inside of it's render method, using a native yes, input.

Честно говоря, я не могу сказать больше, если у кого-то есть опыт доступа к входу внутри слота веб-компонента, пожалуйста, сообщите об этом.

1 Ответ

0 голосов
/ 26 марта 2019

Несколько вещей:

  1. Убедитесь, что вы используете событие slotchange.
  2. assignedElements возвращает массив элементов, а не один элемент.Таким образом, вы должны обращаться с ним как с массивом.

Пример ниже получает assignedElements, а затем отфильтровывает тот, который я ищу, и затем вызывает focus() для этого элемента. 

class MyEl extends HTMLElement {
  constructor() {
    super();
    this.attachShadow({mode: 'open'}).innerHTML="<slot></slot>";
    let slot = this.shadowRoot.querySelector('slot');
    slot.addEventListener('slotchange', 
      e => {
        let el = slot.assignedElements().filter(
          node => node.classList.contains('focus')
        );
        if (el) {
          el[0].focus();
        }
      }
    );
  }

  connectedCallback() {
  
  }
}

customElements.define('my-el', MyEl);
<my-el>
  <input type="text" placeholder="I am not focused"/>
  <input type="text" placeholder="I am focused" class="focus"/>
</my-el>
...