Как программно обновить вход внутри shadow dom? - PullRequest
Новая
       3

Как программно обновить вход внутри shadow dom?

0 голосов
/ 20 февраля 2020

Fiddle: https://jsfiddle.net/5zrwdjy7/2/

Я пытаюсь автоматизировать нажатия клавиш, используя скрипт внутри Cypress, но целевой веб-сайт использует веб-компоненты в качестве входных данных. Входные элементы вложены внутрь shadow dom для этого.

Я пытаюсь вызвать событие ввода согласно обычному входу следующим образом: 

const input = document.querySelector('input')
input.value = 'new value'
input.dispatchEvent(new Event('input'))

Ничего не происходит, значение остается неизменным, и текст не отображается на входе. Можно ли программно обновить ввод внутри shadow dom?

1 Ответ

0 голосов
/ 20 февраля 2020

Поскольку тень инкапсулирует детали компонента, она предотвращает регулярный обход DOM. Чтобы получить к нему доступ:

  1. Найдите веб-компонент, доступный в свете DOM
  2. Пройдите по его тени DOM: 
const lightComponent = document.querySelector('web-component')
const shadowInput = lightComponent.shadowRoot.querySelector('input')
shadowInput.value = 'shadow value'
shadowInput.dispatchEvent(new Event('input'))

Источник: https://javascript.info/shadow-dom-events

Пример 

// Create shadow dom inside <input-container>
customElements.define('input-container', class extends HTMLElement {
  connectedCallback() {
    const shadow = this.attachShadow({mode: 'open'});
    shadow.innerHTML = `<div><input type="text" /></div>`;
  }
});

// Programmatically update input value inside shadow DOM
const lightComponent = document.querySelector('input-container')
const shadowInput = lightComponent.shadowRoot.querySelector('input')
shadowInput.value = 'Shadow value'
shadowInput.dispatchEvent(new Event('input'))
<body>
  <label>Input inside shadow DOM</label>
  <input-container></input-container>
</body>
...