blob: 9538c4706d063a93411caf2e093d89ed6d2c31d9 (
plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
|
/**
* SPDX-FileCopyrightText: 2025 Nextcloud GmbH and Nextcloud contributors
* SPDX-License-Identifier: AGPL-3.0-or-later
*/
import wrap from '@vue/web-component-wrapper'
import Vue from 'vue'
/**
*
* @param VueComponent {Object} The Vue component to turn into a Web Components custom element.
* @param customElementId {string} The element name, it must be unique. Recommended pattern oca-$appid-(checks|operations)-$use_case, example: oca-my_app-checks-request_user_agent
*/
function registerCustomElement(VueComponent, customElementId) {
const WrappedComponent = wrap(Vue, VueComponent)
if (window.customElements.get(customElementId)) {
console.error('Custom element with ID ' + customElementId + ' is already defined!')
throw new Error('Custom element with ID ' + customElementId + ' is already defined!')
}
window.customElements.define(customElementId, WrappedComponent)
// In Vue 2, wrap doesn't support disabling shadow :(
// Disable with a hack
Object.defineProperty(WrappedComponent.prototype, 'attachShadow', { value() { return this } })
Object.defineProperty(WrappedComponent.prototype, 'shadowRoot', { get() { return this } })
return customElementId
}
export { registerCustomElement }
|
