Shopify Polaris is now built on web components. My team and I have been working on this for a while and it's been a lot of fun to "embrace the platform"!
https://t.co/XwVlEwD4LE
Lots of things learned, lots of fun edge cases discovered
Import maps and JavaScript modules are important web platform primitives for performance benefits 🐎 but not reliable at scale. So we fixed it! 🎉
Learn how in this post by @yoavweiss
https://t.co/ouz812EoTT
@nunofx3@kirplatonov Thanks for testing them out! Very unlikely that what we have in there at this moment changes besides bug fixes or additions; the experimental name is a safe-guard to allow us to make changes if necessary, but so far nothing has come up yet. We're just being cautious for v1
@kinngh We've also tried to ensure that React <=18 is natively supported without a "react wrapper" as well, thanks largely in part to some hackery from @_developit
@ryanleichty@jaffathecake We've (and by "we" I mostly mean "Jake") had to build some utilities to help with certain situations such as "s-table only accepts s-table-body components" and "s-choicelist needs to rerender when an s-choice attribute changes". Generally using MutationObservers and stuff
Shopify Polaris is now built on web components. My team and I have been working on this for a while and it's been a lot of fun to "embrace the platform"!
https://t.co/XwVlEwD4LE
Lots of things learned, lots of fun edge cases discovered
@ryanleichty Oh yeah sorry for the confusion!
Yeah they have worked great for us; we apply a minimal amount of styles to all components globally, and every component adopts that stylesheet. Then additionally the styles for each component are (mostly) adopted as well, so even if there are
@ryanleichty Yeah Container Style Queries are new... too new for us to use, unfortunately. But I'm very excited about the possibilities there. That codepen you linked to goes hand-in-hand with this blogpost I wrote https://t.co/t2apre94Zi
Headline: "Polaris—unified and for the web"
The work:
- Align components across multiple teams w focus on web
- Extremely light "in-house" framework
- Automatic updates for Apps
- Maintain or exceed UX quality
- Docs, templates, CLI
- AI, MCP
- "Polaris"
So much more to come
@ryanleichty Ha, maybe! @jaffathecake would probably end up being the one to do that if we did.
There are some annoyances we've found in certain areas, but we hope to improve the web platform itself to make it better for everyone, while working around it.
But feel free to ask anything here
@ryanleichty is both custom to that instance of the component and also is defined by the dev. For example:
`container (inline-size > 500px) large, small`
will translate into a container query internally
@ryanleichty We control all the styles, so we use Adopted Style Sheets for the majority of the CSS styles.
In some cases we inline a <style> tag in the shadow dom when necessary; for example, we have a custom syntax that allows for different values depending on a container query, and that
@ryanleichty but can't crazily customize the styling themselves, which was another limitation that non-WCs have.
Ultimately, it just worked out great for us for this use-case. But it's understandable that WCs that want to allow greater amounts of customization could feel restricted here