root
/
vue3-core
mirror of https://github.com/vuejs/core.git
1
0
Fork 0
Code Issues Actions 6 Packages Projects Releases Wiki Activity

feat(custom-element): support passing custom-element-specific options via 2nd argument of defineCustomElement

This commit is contained in:
Evan You 2024-08-06 15:37:28 +08:00
parent 56c76a8b05
commit 60a88a2b12
No known key found for this signature in database
GPG Key ID: 00E9AB7A6704CE0A
3 changed files with 17 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

22
packages/runtime-dom/__tests__/customElement.spec.ts
View File

@ -898,16 +898,20 @@ describe('defineCustomElement', () => {
}) })
const toggle = ref(true) const toggle = ref(true)
const ES = defineCustomElement({ const ES = defineCustomElement(
shadowRoot: false, {
render() { render() {
return [ return [
renderSlot(this.$slots, 'default'), renderSlot(this.$slots, 'default'),
toggle.value ? renderSlot(this.$slots, 'named') : null, toggle.value ? renderSlot(this.$slots, 'named') : null,
renderSlot(this.$slots, 'omitted', {}, () => [h('div', 'fallback')]), renderSlot(this.$slots, 'omitted', {}, () => [
] h('div', 'fallback'),
]),
]
},
}, },
}) { shadowRoot: false },
)
customElements.define('my-el-shadowroot-false-slots', ES) customElements.define('my-el-shadowroot-false-slots', ES)
test('should render slots', async () => { test('should render slots', async () => {

3
packages/runtime-dom/src/apiCustomElement.ts
View File

@ -141,6 +141,7 @@ export function defineCustomElement<
Exposed Exposed
> >
>, >,
extraOptions?: CustomElementOptions,
): VueElementConstructor<ResolvedProps> ): VueElementConstructor<ResolvedProps>
// overload 3: defining a custom element from the returned value of // overload 3: defining a custom element from the returned value of
@ -149,6 +150,7 @@ export function defineCustomElement<
T extends DefineComponent<any, any, any, any>, T extends DefineComponent<any, any, any, any>,
>( >(
options: T, options: T,
extraOptions?: CustomElementOptions,
): VueElementConstructor< ): VueElementConstructor<
T extends DefineComponent<infer P, any, any, any> T extends DefineComponent<infer P, any, any, any>
? ExtractPropTypes<P> ? ExtractPropTypes<P>
@ -165,6 +167,7 @@ export function defineCustomElement(
hydrate?: RootHydrateFunction, hydrate?: RootHydrateFunction,
): VueElementConstructor { ): VueElementConstructor {
const Comp = defineComponent(options, extraOptions) as any const Comp = defineComponent(options, extraOptions) as any
if (isPlainObject(Comp)) extend(Comp, extraOptions)
class VueCustomElement extends VueElement { class VueCustomElement extends VueElement {
static def = Comp static def = Comp
constructor(initialProps?: Record<string, any>) { constructor(initialProps?: Record<string, any>) {

1
packages/runtime-dom/src/index.ts
View File

@ -245,6 +245,7 @@ export {
useShadowRoot, useShadowRoot,
VueElement, VueElement,
type VueElementConstructor, type VueElementConstructor,
type CustomElementOptions,
} from './apiCustomElement' } from './apiCustomElement'
// SFC CSS utilities // SFC CSS utilities