Могу ли я получить кнопку в shadowDOM для отправки формы не в shadowDom? - PullRequest
Новая
       43

Могу ли я получить кнопку в shadowDOM для отправки формы не в shadowDom?

0 голосов
/ 25 января 2019

Я только что столкнулся с интересной ситуацией, когда у меня есть отправка <button> внутри shadowDOM собственного пользовательского элемента, который находится внутри <form>. 

  <form id="one" action="" method="get">
    <s-button>Select</s-button>
      #shadow-root
        <button>...</button>
    <button>Outside</button>
  </form>

У меня также есть <button> как прямой ребенок <form>.

Ребенок <button> вызывает отправку формы.

Но <button> в корне тени нет.

В некотором смысле, это имеет смысл. Но кто-нибудь придумал, как сказать корню теней <button>, чтобы он правильно работал с <form>, или мне придется справиться с этим через JS?

UPDATE

Спасибо @ Supersharp

Да, я знаю, что события нажатия блокируются на слое shadowDOM, но я удивлен, что нет способа разрешить кнопке оставаться частью формы, что можно настроить с помощью атрибута или свойства .

Конечно, я могу зафиксировать событие click и затем отправить новое с this, но это не делает то же самое, поскольку мое событие больше не будет генерироваться пользователем, и с этим связан огромный набор правил.

Мне грустно, что дизайнеры не задумывались над этим при разработке веб-компонентов. Это просто кажется недостатком в дизайне.

@ Дэнни,

Я думаю, вы имели в виду, что кнопки отправляют click событий, а не submit событий. Это форма, которая отправляет событие submit. Но ваш пример может быть ближе к тому, что я делаю после того, как closest дает мне только form, от которого я являюсь ребенком.

Ответы [ 2 ]

0 голосов
/ 27 января 2019

Кнопка запускает отправку события (для элемента FORM)

Поскольку события не могут проходить через теневую границу DOM (не всплывают в родительский DOM)

Полагаю, , поэтому кнопка shadowDOM (отправка события submit) не получена элементом FORM.

Требуется обходной путь Supersharps со скрытой кнопкой в ​​светлом DOM (который затем отправляет событие submit в родительском DOM)

Или (начиная с легкого DOM) вы находите (родительский) тег FORM и отправляете событие submit самостоятельно:

this.closest('FORM').dispatchEvent(new Event('submit'))

Следуйте за экспертами по shadowDOM и FORMs по адресу: https://github.com/w3c/webcomponents/issues/187 

customElements.define( 'my-button', class extends HTMLElement {
  connectedCallback() {
    this.attachShadow({mode:'open'}).innerHTML=`<button>Button In Shadow DOM</button>`
    this.onclick = _ => this.closest('FORM').dispatchEvent(new Event('submit'))
  }
})
<form onsubmit="return console.log('submit Event occured')">
    <my-button></my-button>
    <button>button in Document DOM</button>
</form>
0 голосов
/ 25 января 2019

Вам все равно придется справиться с этим через Javascript.

Простым решением является добавление (замаскированного) <button> в светлый DOM и передача ему события click. 

customElements.define( 's-button', class extends HTMLElement {
    connectedCallback() {
        this.attachShadow( {mode: 'open'})
            .innerHTML = `<button>In Shadow</button>`
        var submit = this.appendChild( document.createElement( 'button' ) )
        this.onclick = () => submit.click()
    }
} )
<form onsubmit="console.log('submitted');return false">
    <s-button>Select</s-button>
    <button>Outside</button>
</form>
...