defineCustomElement without shadowDom

[Grafikart]

What problem does this feature solve?

With the 3.2 release we can now define customElement using Vue but it uses a shadowRoot. It could be nice to be able to create custom element without this shadowRoot so It can use the app CSS (even if it means loosing the slot capability)

What does the proposed API look like?

To avoid breaking changes we could use an option for defineCustomElement

const MyVueElement = defineCustomElement({
  // normal Vue component options here
}, {
  shadowRoot: false
})

[gnuletik]

Also looking forward this proposal !
As of today, I did not find any way to share CSS across multiple components using Vue+Vite (CSS @import are processed by postcss-import on Vite, which inlines shared CSS in each component).

[dbaumannlt]

@yyx990803 This is a critical feature for my current client. We are developing web components that will be served by a Content Management System where the CSS will be included in the header of the page. Not being able to pierce the veil of the shadow root is a show stopper. We are currently using Vue 2 with the following package https://github.com/karol-f/vue-custom-element.

The author has indicated that they are not creating a Vue 3 compatible package because defineCustomElement is provided Vue3. Please provide this support in Vue 3.

[conanliuhuan]

确实很想要这样的功能！！！
有的时候在使用别的原生JS工具时，别人写的东西要求渲染成element才能用（例如开发editor.js的插件）。这种时候要想vue配合起来，只能考虑defineCustomElement。
然而vue3的这个功能总是会有一个shadow-root，导致全局的样式根本无法对vue的渲染结果起作用。这就非常尴尬了。

[catsmeatman]

Please merge this PR. It's very useful function.

[flozero]

Same here it is a huge need in our company or we will miss the train for vue3 and just go for lit

[gnuletik]

@jsbaguette, you can copy the apiCustomElement.ts file from my PR if you need it.

You just need to replace an import in this file :

- import { hydrate, render } from '.'
+ import { hydrate, render } from '@vue/runtime-dom'

And install an extra dependency :

npm install --save html-parsed-element

Then, you can import this local file in your codebase.

- import { defineCustomElement } from 'vue'
+ import { defineCustomElement } from './localApiCustomElement.ts'

We use it in production.

EDIT:

You also need to specify the optional argument introduced in the PR to skip shadow DOM :

import MyComponent from './MyComponent.vue'

- customElements.define('my-component', defineCustomElement(MyComponent))
+ customElements.define('my-component', defineCustomElement(MyComponent, { shadowRoot: false }))

[Daniel-Vernon-55]

Is there a .js version of this? @gnuletik

[gnuletik]

Is there a .js version of this? @gnuletik

I don't think so.

However, you can easily transpile it:

mkdir /tmp/vue && cd /tmp/vue
curl https://raw.githubusercontent.com/vuejs/core/4b3aed23e687c9d77d4fdcac537be15443a9a608/packages/runtime-dom/src/apiCustomElement.ts > apiCustomElement.ts
yarn add typescript
# errors from tsc can be ignored
yarn run tsc -m esnext apiCustomElement.ts
# there you go
cat apiCustomElement.js