SQueryContainer <s-query-container>

Turns an element into a size container so its children can adapt to its width with container queries. SQueryContainer is the typed Vue 3 wrapper for Shopify's Polaris <s-query-container> web component.

import { SQueryContainer } from 'polaris-vue-elements'

Best practices

• Adapt to the container, not the viewport. A query container lets components respond to the width of their container. That helps components that show up in places of different widths, like a product card in a sidebar or in the main column.
• Name containers when there's more than one. If several query containers need different queries, give each a descriptive containerName so you can target it; unnamed containers all answer the same queries.
• Put responsive values on props. The container provides the context Polaris components use to resolve responsive prop values, such as padding="@container (inline-size > 500px) large-500, none", so you don't write container query CSS yourself.
• Use them only where needed. Every query container makes the browser track its size and apply conditional styles, so add one where you need container-based responsiveness rather than wrapping every element.

<SQueryContainer>
  <SBox padding="@container (inline-size > 500px) large-500, none">
    <!-- … -->
  </SBox>
</SQueryContainer>

See Shopify's best practices for <s-query-container> for the full guidance.

Example

Wide layout (container inline-size ≥ 320px)Narrow layout (container inline-size < 320px)

<script setup>
import { SQueryContainer, SText } from 'polaris-vue-elements'
</script>

<template>
  <div class="query-resize-wrapper">
    <SQueryContainer containerName="docs-demo">
      <SText class="wide-only">Wide layout (container inline-size ≥ 320px)</SText>
      <SText class="narrow-only">Narrow layout (container inline-size &lt; 320px)</SText>
    </SQueryContainer>
  </div>
</template>

<style scoped>
.query-resize-wrapper {
  resize: horizontal;
  overflow: auto;
  inline-size: 400px;
  max-inline-size: 100%;
  min-inline-size: 160px;
  border: 1px dashed #8c9196;
  border-radius: 8px;
  padding: 12px;
}
.narrow-only {
  display: none;
}
/* Queries the container established by SQueryContainer via its containerName prop. */
@container docs-demo (inline-size < 320px) {
  .wide-only {
    display: none;
  }
  .narrow-only {
    display: block;
  }
}
</style>

Props

Prop	Type	Description
containerName	string	An identifier for this container that you can reference in CSS container queries to apply styles based on this specific container's size. All query container components automatically receive a container name of s-default. You can omit the container name in your queries, so @container (inline-size <= 300px) is equivalent to @container s-default (inline-size <= 300px). When you provide a custom containerName, it's added alongside s-default. For example, containerName="product-card" results in s-default product-card being set on the container-name CSS property, allowing you to target this container with @container product-card (inline-size <= 300px). Learn more about the container-name property.
id	string	A unique identifier for the element.

Slots

Slot	Description
default	The content displayed within the query container component, which enables container queries for responsive styling based on the container's size rather than the viewport.