Skip to content

Conversation

@b3nten
Copy link

@b3nten b3nten commented Nov 17, 2025

Closes #11442

While not technically a fix for the issue, it seems like duplicated style tags in the DOM is the intended behaviour for Vue's web component support. In practice I don't believe it's an issue, as the performance impact of the duplicated tags seems minimal. And since this is the "blessed" approach chosen by the Vue maintainers they clearly don't think it's a concern either.

This PR removes a third party dependency in favour of native Vue 3's WC implementation, and brings support for Vue 3, which should enable use of the composition API and interop with third party Vue 3 components.

Stakeholders

@lokesh @RayBB

Copilot AI review requested due to automatic review settings November 17, 2025 04:48
@b3nten b3nten changed the title refactor: upgrade to vue 3's native web component support refactor: Upgrade to vue 3's native web component support Nov 17, 2025
Copilot finished reviewing on behalf of b3nten November 17, 2025 04:50
Copy link
Contributor

Copilot AI left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Pull Request Overview

This PR refactors the web component creation logic to use Vue 3's native defineCustomElement API, replacing the third-party vue-web-component-wrapper dependency. This change enables better Vue 3 support, including the composition API and compatibility with third-party Vue 3 components.

Key changes:

  • Replaced vue-web-component-wrapper with Vue 3's built-in defineCustomElement
  • Migrated plugin configuration to use the native configureApp callback
  • Added custom element registration guard to prevent duplicate registrations

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

@RayBB
Copy link
Collaborator

RayBB commented Nov 17, 2025

Please add a demo video showing the library explorer and work merge UI running with this new setup. GitHub accepts mp4 uploads to issues.

@b3nten
Copy link
Author

b3nten commented Nov 17, 2025

I'm not sure how to access the MergeUI component through the development site, some guidance there would be appreciated (dev/serve mode doesn't use wc's). Here is the explorer in the meantime.

explorer.mov

@github-actions github-actions bot added the Needs: Response Issues which require feedback from lead label Nov 17, 2025
@lokesh
Copy link
Contributor

lokesh commented Nov 17, 2025

@b3nten, thanks for your work on this. Your bring up some good points regarding the the parent issue #11442 , as the CSS not being sent over the wire makes the performance concerns minimal. But I agree with you, dropping the third party dep for the built-in Vue 3 WC implementation is worth while.

@RayBB @mekarpeles should be able to help highlight areas for testing and point to information on how to get your local env set up for this testing.

@github-project-automation github-project-automation bot moved this to Waiting Review/Merge from Staff in Ray's Project Nov 17, 2025
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

Needs: Response Issues which require feedback from lead

Projects

Status: Waiting Review/Merge from Staff

Development

Successfully merging this pull request may close these issues.

Vue builds including duplicate copies of component CSS

3 participants