Completely disable s-link or s-clickable style

Shopify Apps
, , ,
1

Hey everyone :waving_hand:

I’m building an embedded Shopify admin app (React Router / Hydrogen-style) and I’m using the new Shopify web components:

<s-link> and <s-clickable> for internal navigation.

They work correctly for routing, but I’m trying to fully custom-style them with Tailwind and I’m stuck on one issue:

Both components apply their own built-in interaction styles (hover/pressed/focus gray overlay + link styling).
Because they render inside Shadow DOM, normal CSS/Tailwind utilities don’t override it.

What I’ve already tried:

  • text-decoration: none

  • background: transparent !important

  • targeting s-link, s-clickable

  • ::part() selectors (e.g. ::part(activator))

  • wrapping content in divs

  • removing focus/outline styles

The navigation works perfectly, but the default hover/pressed gray state still appears and overrides my button/card design.

My goal:
Use s-link / s-clickable only for navigation behavior and completely remove all visual styling so the component behaves like a transparent container and my Tailwind UI controls the visuals 100%.

So my question:

:backhand_index_pointing_right: Is there an official way to fully disable the built-in Polaris interaction styles for s-link / s-clickable in embedded apps?

Or is Shopify expecting us to style via Polaris tokens instead of replacing the visuals entirely?

Any guidance (or confirmation that it’s not currently possible) would help a lot :folded_hands:

2

Hii @dvendy

They’re built on Shopify Polaris Web Components and render inside Shadow DOM so their hover / pressed / focus states are intentionally encapsulated. Shopify expects them to be styled via Polaris design tokens not replaced entirely with custom Tailwind UI.
Why your overrides don’t work
Shadow DOM blocks normal CSS / Tailwind
part() only works if the component explicitly exposes parts
Interaction states are handled internally and not fully theme-replaceable
Recommended Approach

If you want 100% visual control don’t use / ` for styling.
Instead:
Use React Router’s (or navigation API
Or wrap your own styled component and trigger navigation programmatically
Keep Polaris components only where you want Polaris styling
Shopify’s intent is:
Use Polaris components = follow Polaris styling
Want full custom UI = use your own components + navigation
So at the moment there’s no official way to completely disable their built-in interaction styles.
Thanks

3

Thanks for the reply!

Can you suggest the correct way to navigate? because if I just use

<a href="shopify://admin/products" target="_top">Products page</a>

it will open shopify’s product. Lets say if I have a route /page2, how do I do it programmatically?
Also I’ve tried to use simple

<a href="/page2" target="_top">Products page</a>

the navigation works, but the auth session is lost

4

Hi @dvendy

For internal routes like /page2 inside an embedded app, don’t use <a href> with target="_top"
Use React Router instead:

Go to Page 2 or programmatically: navigate("/page2"); target="_top"` should only be used when redirecting to Shopify Admin (e.g. `shopify://admin/products.