How to open web component modal with JavaScript

Shopify Apps
,
1

Is it possible to open the web component modal using JavaScript, such as with the app bridge modal with shopify.modal.open(“modal“)?

2

So, if I understand your question right, you’re trying to interact with a Polaris web component directly in the DOM, not via App Bridge? App Bridge’s `shopify.modal.open()` is for opening App Bridge modals within the admin, which are different from standalone Polaris web components.

For a `shopify-modal` web component, you’d typically have it declared in your HTML, then manipulate its `open` attribute or property with JavaScript.

First, make sure you have the `shopify-modal` element in your DOM, for example:

Modal content here

Then, to open it with JavaScript, you’d do:

const myModal = document.getElementById(‘my-custom-modal’);

if (myModal) {

myModal.open = true; // To open

// myModal.open = false; // To close

}

This directly sets the `open` property on the custom element instance, which is how web components are designed to be controlled.

Hope that helps!

3 
document.querySelector('s-modal')?.showOverlay();

Literally on the page you’ve quoted:
https://shopify.dev/docs/api/app-home/polaris-web-components/overlays/modal#properties-propertydetail-showoverlay