UUI components not working in basic vue app.

[Ellarddekoeijer]

Which exact UI Library version are you using? For example: 1.0.1 - don't just write v1.

1.8.2

Bug summary

As the title describes, I would like to use The @umbraco-ui/uui web components in a vue app. Vue supports the use of web components, yet I cannot seem to get this to work.

I created a simple vue app using pnpm create vue@latest then I follow the steps over at https://vuejs.org/guide/extras/web-components#using-custom-elements-in-vue. (I can provide my vite config if need be, let me know.)

Then I pnpm add @umbraco-ui/uui-button, remove everything from App.vue, render the web component like so:

<script setup lang="ts"> import '@umbraco-ui/uui-button'; </script>

Testing

No dice! The error chunk-2OPG2DWD.js?v=5cdc5437:9659 Uncaught DOMException: Failed to construct 'CustomElement': The result must not have attributes is thrown and the element does not work.

As far as my understanding about web components & vue goes; built lit components should work in vue. Am I doing something wrong or does @umbraco-ui not support this?

FYI: Originally posted on the Umbraco discord server.

Specifics

No response

Steps to reproduce

1. Create a basic vue app using pnpm create vue@latest
2. Add uui package pnpm add @umbraco-ui/uui-button
3. Tell vue to not handle uui web web components by changing vite config:

plugins: [
        vue({
            template: {
                compilerOptions: {
                    isCustomElement: (tag) => tag.startsWith('uui')
                }
            }
        })
    ],

4. Render the button in App.vue:

<script setup lang="ts">
import '@umbraco-ui/uui-button';
</script>

<template>
  <div>
    <uui-button look="default" color="default" label="Basic">Testing</uui-button>
  </div>
</template>

5. Run the app using pnpm dev. Go to the url vite spits out.

Expected result / actual result

People should be able to use your lovely uui components inside of front end frameworks that support the use of web components.

[bielu]

@Ellarddekoeijer i did get it working vue:
https://github.com/bielu/bielu.Umbraco.Cdn/tree/master/src/bielu.cdn.ui
i think you missunderstood this bit:
isCustomElement: (tag) => tag.startsWith('uui')
as that means uui is custom element prefix in vue and should be compiled to custom element ;) as my CE is prefixed with umbraco so i used it to make sure my component is compiled to CE.

[Ellarddekoeijer]

@bielu thanks for replying and helping. I personally doubt that this is causing the issue.

When I use a uui component that simply extends LitElement everything seems to work just fine. However, once I try to use a uui component that extends something like UUIFormControlMixin this error occurs. Which makes me belief that the error is in fact caused by the uui library.

My colleague Guus has made a stackblitz that reproduces this

In conclusion: The uui library is said to be vendor-independant, currently it does not seem to be.

Tagging @iOvergaard to make sure this does not fly under the radar.

[GuusPlx]

@bielu @Ellarddekoeijer

I just found out it's an issue since version 1.8.0 (1.8.0-rc.3 is working). This also explains why it is working for @bielu.

Here you can find the comparisons:
uui 1.7.2 in a Vue app works
uui 1.8.0 in a Vue app doesn't work

Also I found out it's not just a Vue issue, this happens also in React for example.
uui 1.7.2 in a React app works
uui 1.8.0+ in a React app doesn't work

I think the error logged is also something that might be related to an issue where the (more complex?) uui elements don't conform the CustomElement javascript API. Maybe this issue is overlooked because in Lit the error isn't thrown.

@iOvergaard @nielslyngsoe maybe it's something to look into what changed in the 1.8.0 release? It's unfortunate we can't use the UUI components anymore in javascript frameworks, since we want to create extensions (eg. dashboarding for our projects) where we don't want to use Lit, but do want to use the uui component library.

[lauraneto]

I was just trying to update from 1.7.0 to 1.11.0 and am facing the same issue.
In my case I am using the UI library loaded as a script (using jsDelivr) in a blazor dashboard.

[vsilvar]

@nielslyngsoe @iOvergaard
I took a look at this regression, and it was introduced in commit 0edfd0c.

The issue is that the pristine property of the FormControlMixin is initially defined as _pristine = false but then immediately set to true in the constructor, using the property setter (this.pristine = true)

The property setter, as the values differ, then tries to update the element attributes, which causes the error, as adding attributes on an element's constructor is not allowed, per the spec:
https://html.spec.whatwg.org/multipage/custom-elements.html#custom-element-conformance

The issue can be easily reproduced in any Umbraco backoffice instance by just running in the browser console:

document.createElement('uui-button')

Which is what a lot of frameworks are doing under the hood.

@nielslyngsoe I didn't really delve too much on the purpose of your original change (#788), but could you take a look?