delegatesFocus and other options for defineCustomElement

[misaacs21]

What problem does this feature solve?

Currently, the user can't pass any options available for the native attachShadow to Vue's defineCustomElement. Vue does automatically pass mode: open when it attaches the custom element, but it's not sufficient for many use cases and requires the developer to implement cumbersome workarounds, especially with delegatesFocus.

What does the proposed API look like?

import { defineCustomElement } from 'vue'
import Component from './component.ce.vue'

const webComponent = defineCustomElement(Component, { delegatesFocus: true })

[mgibas]

Workaround that works for me:

import { defineCustomElement } from 'vue'
import Foo from './foo.ce.vue'

const ce = defineCustomElement(Foo)
const _attachShadow = ce.prototype.attachShadow
ce.prototype.attachShadow = function (options) {
  return _attachShadow.apply(this, [{ ...options, delegatesFocus: true }])
}

customElements.define('my-foo', ce)