Some fields sit inside an iframe or a web component’s shadow root, where a plain CSS selector can’t reach. Rich-text editors often do. Two operators let a deflector selector reach them.

​
The operators

OperatorReaches intoExample
ifr>>An iframe from the same domain#desc_ifr ifr>> #tinymce
sr>>An element’s shadow rootmy-form sr>> textarea[name=q]
The part before the operator selects the iframe or host element, and the part after it selects inside. Put one space on each side. Operators chain in any order: 
<!-- A TinyMCE editor in an iframe -->
data-deflect-question-field="#description_ifr ifr>> body#tinymce"

<!-- A textarea inside a web component -->
data-deflect-question-field="ds-textarea sr>> textarea"

<!-- An iframe editor inside a web component -->
data-deflect-question-field="ds-editor sr>> iframe ifr>> body"
The operators work in every form selector: the form, the question field, buttons, the anchor, extra inputs, the email field and the hand-off target. They don’t work in Dark-mode selector.
An iframe from another domain can’t be read by any script on your page. Add the deflector to that iframe’s own page instead.

​
Set up

1

Write the selector

Inspect the field. If it sits under a #shadow-root, the host is the element just above it. If it sits inside an <iframe>, the host is the iframe. Join the host’s selector and the field’s selector with the operator, and enter it on the Form wiring tab.
2

Turn on rich-text conversion

If the field holds HTML, turn on Question field is a rich-text editor (data-main-input-formats-html="true") so the question is sent as text. An editable element (contenteditable) is always sent as text.
3

Check the match

Add data-debug-mode="true" to the script tag. The console logs attached once the form and question field are found. It also names an anchor, button label, ticket-submitted element or hand-off target it couldn’t find. To test a selector in the browser console, check each half separately, since the operators only work inside the deflector:
document.querySelector("#description_ifr")         // the host
  .contentDocument.querySelector("body#tinymce");  // inside it

​
Plain fields

No operator is needed for these:
  • A single word such as description is tried as a CSS selector, then as [name="description"], then as #description.
  • A dropdown sends the label the reader sees, not its value.
  • A checkbox or radio button sends its value when checked, and nothing when not.
  • A submit button outside its <form> still finds the form it belongs to.
Don’t use a rich-text editor as the hand-off target. It can overwrite what the deflector wrote. Use a hidden field.