By day, I lead the Spectrum Web Components project at Adobe, and our custom elements are leveraged across a number of different client side frameworks. In production, today, you can see this in Lightroom Web, which uses a proprietary Adobe framework from a number of years ago, in Adobe Fonts, which uses Angular for their application architecture, or in Education Exchange, which is build historically with Vue.js. This is, of course, on top of a number of projects like Photoshop which are built completely with web components as their client side framework.
If you're looking for more information about how to leverage custom elements in a framework of your choice, I'd check out Custom Elements Everywhere for information on how that project may or may not comply with the primitives of the platform in which it is delivered. You will see that React has shown an inability to include support for long standing browser features. This can be mitigated to a degree with project like the Lit Labs React Wrapper or some nascent hope that React will catch up to the rest of the JS community via PRs like this that might just make it into v18. 🤞
Hi,
Thank you for giving me hope in testing web components in a third party webapp build with another framework. 🎉
I am currently investigating it with a spa based in vuejs and a web components framework called shoelace.
Do you think there are examples or opensource projects that show how to do it with libraries like jest for example? Because my issue actually is more about unit testing rather than e2e (which seems easier, but not there yet :D )
Hrm, I don't have a whole lot of experience with Jest at all. I'm much more a "test in the browser you code runs" sort of person, and as such both contribute to and use modern-web.dev/docs/test-runner/ov... which is great for testing your units like a user would rather than like nodejs might. I also don't have a lot of experience with Vuejs, so I'm not sure how well they play together or not, either.
At its root, Jest runs off of jsDOM, which supports custom elements, so there shouldn't be an issue (assuming all modern versions of the test suite). The main place of learning may be in interacting with actual elements rather than virtual ones, but I can't really speak to that directly.
We do our best, and would greatly appreciate any issues or discussions that you might bring to the project. Our goals are often different that those of Shoelace, at this time, but both of our projects are based on Lit, and both of our projects bring custom elements to a broader community of developers, so choose the one that best fits your needs!
For further actions, you may consider blocking this person and/or reporting abuse
We're a place where coders share, stay up-to-date and grow their careers.
Did you had the chance to test native webcomponents into an spa using another framework?
Because it doesn't look straight forward...
By day, I lead the Spectrum Web Components project at Adobe, and our custom elements are leveraged across a number of different client side frameworks. In production, today, you can see this in Lightroom Web, which uses a proprietary Adobe framework from a number of years ago, in Adobe Fonts, which uses Angular for their application architecture, or in Education Exchange, which is build historically with Vue.js. This is, of course, on top of a number of projects like Photoshop which are built completely with web components as their client side framework.
If you're looking for more information about how to leverage custom elements in a framework of your choice, I'd check out Custom Elements Everywhere for information on how that project may or may not comply with the primitives of the platform in which it is delivered. You will see that React has shown an inability to include support for long standing browser features. This can be mitigated to a degree with project like the Lit Labs React Wrapper or some nascent hope that React will catch up to the rest of the JS community via PRs like this that might just make it into v18. 🤞
Hi,
Thank you for giving me hope in testing web components in a third party webapp build with another framework. 🎉
I am currently investigating it with a spa based in vuejs and a web components framework called shoelace.
Do you think there are examples or opensource projects that show how to do it with libraries like jest for example? Because my issue actually is more about unit testing rather than e2e (which seems easier, but not there yet :D )
Btw, I didn't know spectrum, but I will definitely give it a try, it looks nice.
Hrm, I don't have a whole lot of experience with Jest at all. I'm much more a "test in the browser you code runs" sort of person, and as such both contribute to and use modern-web.dev/docs/test-runner/ov... which is great for testing your units like a user would rather than like nodejs might. I also don't have a lot of experience with Vuejs, so I'm not sure how well they play together or not, either.
At its root, Jest runs off of jsDOM, which supports custom elements, so there shouldn't be an issue (assuming all modern versions of the test suite). The main place of learning may be in interacting with actual elements rather than virtual ones, but I can't really speak to that directly.
We do our best, and would greatly appreciate any issues or discussions that you might bring to the project. Our goals are often different that those of Shoelace, at this time, but both of our projects are based on Lit, and both of our projects bring custom elements to a broader community of developers, so choose the one that best fits your needs!