Anthony Frehner 🐽

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"! shopify.dev/beta/next-gen-… Lots of things learned, lots of fun edge cases discovered

Web components, unified API across the ecosystem, joy? Sure, why not :) Lots of work on this, lots of fun too

@kirplatonov @ShopifyDevs 8 minutes! Impressive haha. Much appreciated.

Just made a quick video for @ShopifyDevs about new Modal web component in Polaris. 🤌 Let me know if you want more videos like this!

🚀 New Polaris web components are here! ColorField, ColorPicker, Popover, Tooltip, Menu, Chip, ClickableChip & DropZone shopify.dev/changelog/new-…

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 shopify.engineering/resilient-impo…

@jenseng MF is a love letter to webpack; if you love webpack, it’s an excuse to add even more of it all over every repo! Haha.

current mood

@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

@kirplatonov It's brilliant, already have several changes ready in dev. The only thing that doesn't make me comfortable moving them to prod is the "experimental" on the name.

Polaris Web Components have isolated styles. It's a very good news for apps migration. In this example I use new web component inside old Polaris ViewComponent page. No styles conflicts at all 👌

@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

[opinion] I've been using Polaris WC for a decent while and can confirm it's headed in the right direction. Yes there's a whole lotta things that still need to come in, but it's in RC and open for folks to play around with and give feedback on. As a React dev, it was frustrating at first to not have Reacty feel to it, but after 3-4 days of reading and playing around with it, I realized that us as React devs build things in a different way. Yes, the migration may feel a little awkward but just stick with it and you'll feel great about it. The great thing is you can use Polaris React with Polaris WC in the same component, so you can migrate slowly but since it's in RC and you're technically loading the experimental version I wouldn't recommend shipping it to Production just yet, but a staging / dev env where you're slowly migrating as and when you have time, would be great. I know this is a huge win for PHP and RoR devs (along with every other non-React dev), but the WC is equally as good for us React devs too. React 19 added way better support for WC and there hasn't been a better time to align with vanilla web standards instead of going after proprietary wrappers^^

@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

@frehner_a @jaffathecake If you're using the shadow dom and shared styles are now possible, that might solve most of the hangups I had. Have you had any issues or annoying problems with composition?

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"! shopify.dev/beta/next-gen-… Lots of things learned, lots of fun edge cases discovered

@ryanleichty multiple instances of a component on a page, the browser engine only sees one stylesheet.

@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 frehner.me/blog/container…

@frehner_a Woah, it looks like that's relatively new 👀 I just saw your codepen where you're using it too. That seems to solve the problem of sharing styles in the shadow dom if I'm understanding it correctly codepen.io/afrehner/pen/r…

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

@devwithalex Reach out with suggestions or problems you run into! We're monitoring here as well! community.shopify.dev/c/polaris/29

I've been playing with the new Polaris web components and it's not perfect but I actually love that it's now a unified component system to be used across apps + extensions I'll also be updating Polaris Components & Dezi ASAP to include web components so keep an eye out!

@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

@frehner_a That makes sense given the context. Are you thinking of writing up a blog post or anything detailing some of the things you found, pain points you encountered, etc.?

@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 I really like @little_bret 's approach to solving that problem though. x.com/ShopifyDevs/st…

@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