Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat: initial support for custom elements #7351

Open
wants to merge 1 commit into
base: master
Choose a base branch
from

Conversation

montgomery1944
Copy link

Hi, I am a developer representing Cambridge University Press & Assessment (https://www.cambridge.org/). A couple of weeks ago, we contacted you about the lack of support of for custom elements in PrimeVue, that is required for us to switch to PrimeVue as a main front end framework for our products. We offered to help with implementation of this support. This MR is implementing such support, hopefully you will find it useful. Changes were tested in our products and were working properly. Please note, that there is a visible interest in the community about the PrimeVue support for custom elements.

Summary of the changes:

  • Base, BaseStyle and PrimeVueService instances keeping current state of the styling from now on can be both global and scoped. With the global approach, multiple instances of the same custom element were not loading style tags properly.
  • All places using global versions of the services were switched to use instances provided by the PrimeVue in globalProperties. Depending on whether we are in shadowRoot=true mode or not, the setup function in PrimeVue is providing global or scoped instances of those services.
  • New prefix property was added to PrimeVue properties to avoid conflicts in shadowRoot=false mode.
  • New wrapCustomElement function, that is hacking around a lack of root property in app instance provided by Vue, since root property is required in the PrimeVue itself in different places. Most probably such change will have to be requested in Vue project to avoid this hack, but for now it's the only way of implementing it.
  • UseStyle function was changed to take into consideration, that the PrimeVue may be loaded in custom element.
  • Some changes were introduced to nuxt-module to allow usage of a new prefix property.
  • Other smaller changes, like switching to transformCSS function and adding a prefix to data-primevue-style-id values to avoid conflicts on style tag level for shadowRoot=false mode.

Please note, that those changes depend on changes introduced in MR for PrimeUix repository.

In case of any questions, please let me know, thanks.

Copy link

vercel bot commented Feb 28, 2025

Deployment failed with the following error:

Creating the Deployment Timed Out.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

1 participant